ოპტიმიზაცია

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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

თუ არ იყენებთ კომპონენტს, დატოვეთ კომენტარი ან მთლიანად წაშალეთ იგი. მაგალითად, თუ არ იყენებთ კარუსელს, წაშალეთ ეს იმპორტი, რათა შეინახოთ ფაილის გარკვეული ზომა თქვენს შედგენილ CSS-ში. გაითვალისწინეთ, რომ Sass-ის იმპორტში არის გარკვეული დამოკიდებულება, რამაც შეიძლება გაართულოს ფაილის გამოტოვება.

Lean JavaScript

Bootstrap-ის JavaScript მოიცავს ყველა კომპონენტს ჩვენს ძირითად დისტანციურ ფაილებში ( 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/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';

ამ გზით, თქვენ არ შეიცავს JavaScript-ს, რომლის გამოყენებასაც არ აპირებთ ისეთი კომპონენტებისთვის, როგორიცაა ღილაკები, კარუსელები და ინსტრუმენტების რჩევები. თუ თქვენ იმპორტირებთ ჩამოსაშლელ ფაილებს, ინსტრუმენტთა რჩევებს ან პოპოვერებს, აუცილებლად მიუთითეთ პოპერის დამოკიდებულება თქვენს 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

დახმარება მჭირდება ამ განყოფილებაში, გთხოვთ განიხილოთ პიარის გახსნა. მადლობა!

მიუხედავად იმისა, რომ ჩვენ არ გვაქვს წინასწარ აშენებული მაგალითი 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 და სხვა მსგავსი ინსტრუმენტები.

Minify და gzip

შეძლებისდაგვარად, დარწმუნდით, რომ შეკუმშეთ ყველა კოდი, რომელსაც ემსახურებით თქვენს სტუმრებს. თუ იყენებთ Bootstrap dist ფაილებს, შეეცადეთ დაიცვან მინიფიცირებული ვერსიები (მითითებულია .min.cssდა .min.jsგაფართოებებით). თუ თქვენ აშენებთ Bootstrap-ს წყაროდან თქვენი საკუთარი build სისტემით, დარწმუნდით, რომ დანერგეთ თქვენი საკუთარი მინიფიკატორები HTML, CSS და JS-ისთვის.

დაუბლოკავი ფაილები

მიუხედავად იმისა, რომ შეკუმშვის შემცირება და გამოყენება შეიძლება საკმარისად მოგეჩვენოთ, თქვენი ფაილების დაუბლოკავი ფაილების დაბლოკვა ასევე დიდი ნაბიჯია თქვენი საიტის კარგად ოპტიმიზებული და საკმარისად სწრაფი გასაკეთებლად.

თუ Google Chrome-ში Lighthouse დანამატს იყენებთ , შესაძლოა FCP-ზე წააწყდეთ. First Contentful Paint- ის მეტრიკა ზომავს დროს გვერდის ჩატვირთვის დაწყებიდან გვერდის კონტენტის რომელიმე ნაწილის ეკრანზე გადმოცემამდე.

შეგიძლიათ გააუმჯობესოთ FCP არაკრიტიკული JavaScript ან CSS-ის გადადების გზით. Ეს რას ნიშნავს? უბრალოდ, JavaScript ან stylesheets, რომლებიც არ უნდა იყოს წარმოდგენილი თქვენი გვერდის პირველ საღებავზე, უნდა იყოს მონიშნული asyncან deferატრიბუტებით.

ეს უზრუნველყოფს, რომ ნაკლებად მნიშვნელოვანი რესურსები ჩაიტვირთება მოგვიანებით და არ ბლოკავს პირველ საღებავს. მეორეს მხრივ, კრიტიკული რესურსები შეიძლება შევიდეს როგორც შიდა სკრიპტები ან სტილი.

თუ გსურთ გაიგოთ მეტი ამის შესახებ, ამის შესახებ უკვე ბევრი შესანიშნავი სტატიაა:

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

ყოველთვის გამოიყენეთ HTTPS

თქვენი ვებსაიტი ხელმისაწვდომი უნდა იყოს მხოლოდ HTTPS კავშირებით წარმოებაში. HTTPS აუმჯობესებს ყველა საიტის უსაფრთხოებას, კონფიდენციალურობას და ხელმისაწვდომობას და არ არსებობს არასენსიტიური ვებ ტრაფიკი . თქვენი ვებსაიტის კონფიგურაციის ნაბიჯები, რათა მოემსახუროს ექსკლუზიურად HTTPS-ზე, მნიშვნელოვნად განსხვავდება თქვენი არქიტექტურისა და ვებ ჰოსტინგის პროვაიდერის მიხედვით და, შესაბამისად, სცილდება ამ დოკუმენტების ფარგლებს.

HTTPS-ით მოწოდებულ საიტებს ასევე უნდა ჰქონდეს წვდომა ყველა სტილის ფურცელზე, სკრიპტებსა და სხვა აქტივებზე HTTPS კავშირების მეშვეობით. წინააღმდეგ შემთხვევაში, თქვენ გაუგზავნით მომხმარებლებს შერეულ აქტიურ კონტენტს , რაც გამოიწვევს პოტენციურ დაუცველობას, სადაც საიტი შეიძლება დაზარალდეს დამოკიდებულების შეცვლით. ამან შეიძლება გამოიწვიოს უსაფრთხოების პრობლემები და მომხმარებლებისთვის ნაჩვენები გაფრთხილებები ბრაუზერში. მიუხედავად იმისა, იღებთ Bootstrap-ს CDN-დან თუ თავად ემსახურებით მას, დარწმუნდით, რომ მასზე წვდომა გაქვთ მხოლოდ HTTPS კავშირებით.