بهینه سازی کنید

واردات ناب ساس

هنگام استفاده از Sass در خط لوله دارایی خود، مطمئن شوید که Bootstrap را فقط @importبا استفاده از اجزای مورد نیاز خود بهینه کنید. بزرگترین بهینه‌سازی‌های شما احتمالاً از Layout & Componentsبخش ما خواهد آمد bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

اگر از یک مؤلفه استفاده نمی کنید، آن را نظر دهید یا آن را به طور کامل حذف کنید. به عنوان مثال، اگر از چرخ فلک استفاده نمی کنید، آن واردات را حذف کنید تا مقداری از اندازه فایل در CSS کامپایل شده خود ذخیره شود. به خاطر داشته باشید که برخی از وابستگی‌ها در واردات Sass وجود دارد که ممکن است حذف یک فایل را دشوارتر کند.

جاوا اسکریپت ناب

جاوا اسکریپت بوت استرپ شامل همه مؤلفه‌های فایل‌های dist اولیه ما ( bootstrap.jsو bootstrap.min.js) و حتی وابستگی اولیه ما (Popper) با فایل‌های باندل ما ( bootstrap.bundle.jsو bootstrap.bundle.min.js) می‌شود. در حالی که از طریق Sass در حال سفارشی سازی هستید، حتما جاوا اسکریپت مرتبط را حذف کنید.

به عنوان مثال، با فرض اینکه از بسته‌کننده جاوا اسکریپت خود مانند Webpack، Parcel یا Vite استفاده می‌کنید، فقط جاوا اسکریپتی را که قصد استفاده از آن را دارید وارد می‌کنید. در مثال زیر، نشان می‌دهیم که چگونه جاوا اسکریپت مدال خود را وارد کنیم:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

به این ترتیب، هیچ جاوا اسکریپتی را که قصد استفاده از آن را برای اجزایی مانند دکمه‌ها، چرخ فلک‌ها و نکات ابزار ندارید، درج نمی‌کنید. اگر فهرست‌های بازشو، راهنمای ابزار یا پاپ‌اور را وارد می‌کنید، حتماً وابستگی Popper را در package.jsonفایل خود فهرست کنید.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

پیشوند خودکار .browserslistrc

بوت استرپ برای افزودن خودکار پیشوندهای مرورگر به ویژگی های خاص CSS به Autoprefixer بستگی دارد. پیشوندها توسط فایل ما دیکته می شوند که .browserslistrcدر ریشه مخزن Bootstrap یافت می شود. سفارشی کردن این لیست از مرورگرها و کامپایل مجدد Sass به طور خودکار برخی از CSS ها را از CSS کامپایل شده شما حذف می کند، اگر پیشوندهای فروشنده منحصر به فرد آن مرورگر یا نسخه وجود داشته باشد.

CSS استفاده نشده

در مورد این بخش کمک می خواهید، لطفاً یک PR را باز کنید. با تشکر!

در حالی که ما یک نمونه از پیش ساخته شده برای استفاده از PurgeCSS با بوت استرپ نداریم، برخی از مقالات مفید و توضیحاتی وجود دارد که انجمن نوشته است. در اینجا چند گزینه وجود دارد:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

در نهایت، این مقاله ترفندهای CSS در مورد CSS استفاده نشده ، نحوه استفاده از PurgeCSS و سایر ابزارهای مشابه را نشان می دهد.

Minify و gzip

در صورت امکان، مطمئن شوید که تمام کدهایی را که به بازدیدکنندگان خود ارائه می دهید فشرده کنید. اگر از فایل‌های Bootstrap dist استفاده می‌کنید، سعی کنید به نسخه‌های کوچک‌شده (که با .min.cssو .min.jsپسوند مشخص شده‌اند) پایبند باشید. اگر بوت استرپ را از منبع با سیستم ساخت خود می‌سازید، حتماً مینی‌فایرهای خود را برای HTML، CSS و JS پیاده‌سازی کنید.

غیر مسدود کردن فایل ها

در حالی که کوچک کردن و استفاده از فشرده سازی ممکن است کافی به نظر برسد، غیر مسدود کردن فایل های شما نیز گام بزرگی در بهینه سازی سایت شما و به اندازه کافی سریع است.

اگر از افزونه Lighthouse در Google Chrome استفاده می کنید، ممکن است به FCP برخورد کرده باشید. متریک First Contentful Paint زمان شروع بارگیری صفحه تا زمانی که هر بخشی از محتوای صفحه روی صفحه نمایش داده می شود را اندازه گیری می کند.

می توانید FCP را با به تعویق انداختن جاوا اسکریپت یا CSS غیر بحرانی بهبود بخشید. معنی آن چیست؟ به سادگی، جاوا اسکریپت یا شیوه نامه هایی که نیازی به حضور در اولین نقاشی صفحه شما ندارند، باید با asyncیا deferویژگی ها علامت گذاری شوند.

این تضمین می کند که منابع کمتر مهم دیرتر بارگذاری می شوند و اولین رنگ را مسدود نمی کنند. از سوی دیگر، منابع حیاتی را می توان به عنوان اسکریپت ها یا سبک های درون خطی گنجاند.

اگر می خواهید در مورد این موضوع بیشتر بدانید، در حال حاضر مقالات عالی زیادی در مورد آن وجود دارد:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

همیشه از HTTPS استفاده کنید

وب سایت شما باید فقط از طریق اتصالات HTTPS در حال تولید در دسترس باشد. HTTPS امنیت، حریم خصوصی و در دسترس بودن همه سایت ها را بهبود می بخشد و چیزی به نام ترافیک وب غیر حساس وجود ندارد . مراحل پیکربندی وب سایت شما به گونه ای که به طور انحصاری از طریق HTTPS ارائه شود، بسته به معماری و ارائه دهنده میزبانی وب شما بسیار متفاوت است، و بنابراین فراتر از محدوده این اسناد است.

سایت‌هایی که از طریق HTTPS ارائه می‌شوند باید به همه شیوه نامه‌ها، اسکریپت‌ها و سایر دارایی‌ها از طریق اتصالات HTTPS دسترسی داشته باشند. در غیر این صورت، محتوای فعال ترکیبی را برای کاربران ارسال می‌کنید که منجر به آسیب‌پذیری‌های احتمالی می‌شود که در آن سایت می‌تواند با تغییر یک وابستگی در معرض خطر قرار گیرد. این می تواند منجر به مشکلات امنیتی و هشدارهای درون مرورگر شود که به کاربران نمایش داده می شود. فرقی نمی‌کند Bootstrap را از CDN دریافت می‌کنید یا خودتان آن را ارائه می‌دهید، مطمئن شوید که فقط از طریق اتصالات HTTPS به آن دسترسی دارید.