Оптимізувати

Імпорт Lean Sass

Використовуючи Sass у своєму конвеєрі ресурсів, переконайтеся, що ви оптимізували Bootstrap, використовуючи лише @importті компоненти, які вам потрібні. Ваші найбільші оптимізації, ймовірно, будуть отримані з Layout & Componentsрозділу нашого bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Якщо ви не використовуєте компонент, закоментуйте його або повністю видаліть. Наприклад, якщо ви не використовуєте карусель, видаліть цей імпорт, щоб зберегти певний розмір файлу у вашому скомпільованому CSS. Майте на увазі, що між імпортом Sass існують певні залежності, через які може бути складніше пропустити файл.

Lean JavaScript

JavaScript Bootstrap містить усі компоненти в наших первинних файлах dist ( bootstrap.jsі bootstrap.min.js), і навіть нашу основну залежність (Popper) з нашими пакетними файлами ( bootstrap.bundle.jsі bootstrap.bundle.min.js). Під час налаштування за допомогою Sass обов’язково видаліть пов’язаний JavaScript.

Наприклад, припустивши, що ви використовуєте свій власний пакет JavaScript, наприклад Webpack або Rollup, ви імпортуєте лише той JavaScript, який плануєте використовувати. У прикладі нижче ми показуємо, як просто включити наш модальний JavaScript:

// 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Таким чином ви не додаєте JavaScript, який не збираєтеся використовувати для таких компонентів, як кнопки, каруселі та підказки. Якщо ви імпортуєте спадні списки, спливаючі підказки чи спливаючі вікна, обов’язково вкажіть залежність Popper у своєму package.jsonфайлі.

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

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

Автопрефікс .browserslistrc

Bootstrap залежить від Autoprefixer для автоматичного додавання префіксів браузера до певних властивостей CSS. Префікси продиктовані нашим .browserslistrcфайлом, який знаходиться в корені репозиторію Bootstrap. Налаштування цього списку браузерів і перекомпіляція Sass призведе до автоматичного видалення деяких CSS із вашого скомпільованого CSS, якщо є префікси постачальника, унікальні для цього браузера чи версії.

Невикористаний CSS

Потрібна допомога з цим розділом, будь ласка, подумайте про відкриття PR. Спасибі!

Хоча ми не маємо готового прикладу використання PurgeCSS із Bootstrap, спільнота написала кілька корисних статей і покрокових інструкцій. Ось кілька варіантів:

• 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 Tricks про невикористаний CSS показує, як використовувати PurgeCSS та інші подібні інструменти.

Зменшити та gzip

За можливості стискайте весь код, який ви надаєте відвідувачам. Якщо ви використовуєте файли Bootstrap dist, спробуйте дотримуватися скорочених версій (позначених розширеннями .min.cssта .min.js). Якщо ви створюєте Bootstrap із вихідного коду за допомогою власної системи збирання, обов’язково впровадьте власні мініфікатори для HTML, CSS і JS.

Неблокуючі файли

Хоча мінімізації та використання стиснення може здатися достатнім, зробити ваші файли неблокуючими також є великим кроком у тому, щоб зробити ваш сайт добре оптимізованим і досить швидким.

Якщо ви використовуєте плагін Lighthouse у Google Chrome, можливо, ви натрапили на FCP. Метрика First Contentful Paint вимірює час від початку завантаження сторінки до моменту, коли будь-яка частина вмісту сторінки відображається на екрані.

Ви можете покращити FCP, відклавши некритичні JavaScript або CSS. Що це означає? Просто JavaScript або таблиці стилів, які не обов’язково присутні на першій фарбі вашої сторінки, мають бути позначені атрибутами asyncабо .defer

Це гарантує, що менш важливі ресурси будуть завантажені пізніше і не блокуватимуть першу фарбу. З іншого боку, критичні ресурси можна включити як вбудовані сценарії або стилі.

Якщо ви хочете дізнатися про це більше, про це вже є багато чудових статей:

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

Завжди використовуйте HTTPS

Ваш веб-сайт має бути доступним лише через з’єднання HTTPS у робочому стані. HTTPS покращує безпеку, конфіденційність і доступність усіх сайтів, і не існує такого поняття, як неконфіденційний веб-трафік . Етапи налаштування вашого веб-сайту для обслуговування виключно через HTTPS значно відрізняються залежно від вашої архітектури та постачальника веб-хостингу, тому виходять за рамки цих документів.

Сайти, які обслуговуються через HTTPS, також повинні мати доступ до всіх таблиць стилів, сценаріїв та інших ресурсів через з’єднання HTTPS. Інакше ви надсилатимете користувачам змішаний активний вміст , що призведе до потенційної вразливості, коли сайт може бути скомпрометовано шляхом зміни залежності. Це може призвести до проблем із безпекою та попереджень у веб-переглядачі, які відображатимуться користувачам. Незалежно від того, отримуєте ви Bootstrap із CDN чи обслуговуєте його самостійно, переконайтеся, що ви отримуєте доступ до нього лише через з’єднання HTTPS.