ऑप्टिमाइझ करा

लीन सास आयात

तुमच्या मालमत्ता पाइपलाइनमध्ये Sass वापरताना, फक्त @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 आयातीमध्ये काही अवलंबित्व आहेत ज्यामुळे फाइल वगळणे अधिक कठीण होऊ शकते.

लीन JavaScript

bootstrap.jsBootstrap च्या JavaScript मध्ये आमच्या प्राथमिक डिस्ट फाइल्स ( आणि ) मधील प्रत्येक घटक आणि आमच्या बंडल फाइल्स ( आणि ) bootstrap.min.jsसह आमची प्राथमिक अवलंबित्व (पॉपर) समाविष्ट आहे . तुम्ही Sass द्वारे सानुकूलित करत असताना, संबंधित JavaScript काढून टाकण्याची खात्री करा.bootstrap.bundle.jsbootstrap.bundle.min.js

उदाहरणार्थ, तुम्ही वेबपॅक किंवा रोलअप सारखे तुमचे स्वतःचे JavaScript बंडलर वापरत आहात असे गृहीत धरून, तुम्ही वापरण्याची योजना असलेली 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

विशिष्ट CSS गुणधर्मांमध्ये ब्राउझर उपसर्ग स्वयंचलितपणे जोडण्यासाठी बूटस्ट्रॅप ऑटोप्रीफिक्सरवर अवलंबून असतो. .browserslistrcबूटस्ट्रॅप रेपोच्या रूटमध्ये आढळलेल्या आमच्या फाईलद्वारे उपसर्ग निर्धारित केले जातात . ब्राउझरची ही सूची सानुकूलित करणे आणि 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

जेव्हा शक्य असेल तेव्हा, तुम्ही तुमच्या अभ्यागतांना देत असलेले सर्व कोड कॉम्प्रेस करण्याचे सुनिश्चित करा. जर तुम्ही बूटस्ट्रॅप डिस्ट फाइल्स वापरत असाल, तर लहान आवृत्त्यांवर चिकटून राहण्याचा प्रयत्न करा ( .min.cssआणि .min.jsविस्तारांद्वारे सूचित). तुम्ही तुमच्या स्वतःच्या बिल्ड सिस्टीमसह स्त्रोतावरून बूटस्ट्रॅप तयार करत असल्यास, HTML, CSS आणि JS साठी तुमचे स्वतःचे मिनीफायर लागू करण्याचे सुनिश्चित करा.

नॉन-ब्लॉकिंग फाइल्स

कमी करणे आणि कॉम्प्रेशन वापरणे पुरेसे वाटत असले तरी, तुमच्या फायली नॉन-ब्लॉक करणे ही तुमची साइट चांगली-ऑप्टिमाइझ आणि पुरेशी जलद बनवण्यासाठी एक मोठी पायरी आहे.

तुम्ही Google Chrome मध्ये Lighthouse प्लगइन वापरत असल्यास , तुम्ही FCP वर अडखळले असेल. फर्स्ट कंटेंटफुल पेंट मेट्रिक हे पेज कधीपासून लोड होण्यास सुरुवात होते ते पृष्‍ठातील सामग्रीचा कोणताही भाग स्क्रीनवर रेंडर केल्‍यापर्यंत वेळ मोजते.

तुम्ही नॉन-क्रिटिकल JavaScript किंवा CSS पुढे ढकलून FCP सुधारू शकता. याचा अर्थ काय? फक्त, JavaScript किंवा स्टाईलशीट ज्यांना तुमच्या पृष्ठाच्या पहिल्या पेंटवर उपस्थित राहण्याची आवश्यकता नाही त्यांना asyncकिंवा deferविशेषतांनी चिन्हांकित केले पाहिजे.

हे सुनिश्चित करते की कमी महत्वाची संसाधने नंतर लोड केली जातात आणि प्रथम पेंट अवरोधित करत नाहीत. दुसरीकडे, गंभीर संसाधने इनलाइन स्क्रिप्ट किंवा शैली म्हणून समाविष्ट केली जाऊ शकतात.

तुम्हाला याबद्दल अधिक जाणून घ्यायचे असल्यास, याबद्दल आधीच बरेच चांगले लेख आहेत:

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

नेहमी HTTPS वापरा

तुमची वेबसाइट उत्पादनामध्ये फक्त HTTPS कनेक्शनवर उपलब्ध असावी. HTTPS सर्व साइट्सची सुरक्षा, गोपनीयता आणि उपलब्धता सुधारते आणि गैर-संवेदनशील वेब ट्रॅफिक असे काहीही नाही . तुमची वेबसाइट फक्त HTTPS वर सेवा देण्यासाठी कॉन्फिगर करण्याच्या पायर्‍या तुमच्या आर्किटेक्चर आणि वेब होस्टिंग प्रदात्यावर अवलंबून मोठ्या प्रमाणात बदलतात आणि त्यामुळे या डॉक्सच्या व्याप्तीच्या पलीकडे आहेत.

HTTPS वर दिलेल्या साइट्सनी HTTPS कनेक्शनवर सर्व स्टाईलशीट, स्क्रिप्ट आणि इतर मालमत्तांमध्ये देखील प्रवेश केला पाहिजे. अन्यथा, तुम्ही वापरकर्त्यांना मिश्रित सक्रिय सामग्री पाठवत असाल , ज्यामुळे संभाव्य भेद्यता निर्माण होईल जिथे अवलंबित्व बदलून साइटशी तडजोड केली जाऊ शकते. यामुळे सुरक्षितता समस्या उद्भवू शकतात आणि वापरकर्त्यांना ब्राउझरमधील चेतावणी प्रदर्शित होऊ शकतात. तुम्ही CDN वरून बूटस्ट्रॅप मिळवत असाल किंवा ते स्वत: देत असलात तरीही, तुम्ही त्यात फक्त HTTPS कनेक्शनवर प्रवेश करत असल्याचे सुनिश्चित करा.