अनुकूलन

झुक सास आयात

अपनी संपत्ति पाइपलाइन में 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

यदि आप किसी घटक का उपयोग नहीं कर रहे हैं, तो उस पर टिप्पणी करें या उसे पूरी तरह से हटा दें। उदाहरण के लिए, यदि आप हिंडोला का उपयोग नहीं कर रहे हैं, तो अपने संकलित सीएसएस में कुछ फ़ाइल आकार सहेजने के लिए उस आयात को हटा दें। ध्यान रखें कि Sass आयातों में कुछ निर्भरताएँ हैं जो किसी फ़ाइल को छोड़ना अधिक कठिन बना सकती हैं।

लीन जावास्क्रिप्ट

बूटस्ट्रैप की जावास्क्रिप्ट में हमारी प्राथमिक डिस्ट फाइलों ( bootstrap.jsऔर ) में प्रत्येक घटक शामिल है, और यहां तक ​​कि हमारी बंडल फाइलों ( और ) bootstrap.min.jsके साथ हमारी प्राथमिक निर्भरता (पॉपर) भी शामिल है । जब आप Sass के माध्यम से कस्टमाइज़ कर रहे हों, तो संबंधित JavaScript को निकालना सुनिश्चित करें।bootstrap.bundle.jsbootstrap.bundle.min.js

उदाहरण के लिए, यह मानते हुए कि आप अपने स्वयं के जावास्क्रिप्ट बंडलर जैसे वेबपैक या रोलअप का उपयोग कर रहे हैं, आप केवल उस जावास्क्रिप्ट को आयात करेंगे जिसका आप उपयोग करने की योजना बना रहे हैं। नीचे दिए गए उदाहरण में, हम दिखाते हैं कि कैसे केवल हमारे मोडल जावास्क्रिप्ट को शामिल किया जाए:

// 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';

इस तरह, आप किसी भी जावास्क्रिप्ट को शामिल नहीं कर रहे हैं जिसका उपयोग आप बटन, कैरोसेल और टूलटिप्स जैसे घटकों के लिए नहीं करना चाहते हैं। यदि आप ड्रॉपडाउन, टूलटिप्स या पॉपओवर आयात कर रहे हैं, तो अपनी package.jsonफ़ाइल में पॉपर निर्भरता को सूचीबद्ध करना सुनिश्चित करें।

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

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

स्वतः उपसर्ग .ब्राउज़रसूची

बूटस्ट्रैप कुछ सीएसएस गुणों में ब्राउज़र उपसर्गों को स्वचालित रूप से जोड़ने के लिए ऑटोप्रिफ़िक्सर पर निर्भर करता है। उपसर्ग हमारी फ़ाइल द्वारा निर्धारित होते हैं .browserslistrc, जो बूटस्ट्रैप रेपो की जड़ में पाए जाते हैं। ब्राउज़रों की इस सूची को कस्टमाइज़ करना और Sass को फिर से कंपाइल करना आपके संकलित CSS से कुछ CSS को स्वचालित रूप से हटा देगा, यदि उस ब्राउज़र या संस्करण के लिए विशिष्ट विक्रेता उपसर्ग हैं।

अप्रयुक्त सीएसएस

इस खंड में मदद चाहिए थी, कृपया एक पीआर खोलने पर विचार करें। धन्यवाद!

जबकि हमारे पास बूटस्ट्रैप के साथ PurgeCSS का उपयोग करने के लिए एक पूर्वनिर्मित उदाहरण नहीं है , समुदाय द्वारा लिखे गए कुछ उपयोगी लेख और पूर्वाभ्यास हैं। यहां कुछ विकल्प दिए गए हैं:

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

अंत में, अप्रयुक्त CSS पर यह CSS ट्रिक्स लेख दिखाता है कि PurgeCSS और अन्य समान टूल का उपयोग कैसे करें।

छोटा करें और gzip

जब भी संभव हो, अपने द्वारा अपने आगंतुकों को प्रदान किए जाने वाले सभी कोड को संपीड़ित करना सुनिश्चित करें। यदि आप बूटस्ट्रैप डिस्ट फाइलों का उपयोग कर रहे हैं, तो छोटे संस्करणों ( .min.cssऔर .min.jsएक्सटेंशन द्वारा इंगित) से चिपके रहने का प्रयास करें। यदि आप अपने स्वयं के बिल्ड सिस्टम के साथ स्रोत से बूटस्ट्रैप बना रहे हैं, तो HTML, CSS और JS के लिए अपने स्वयं के मिनीफ़ायर को लागू करना सुनिश्चित करें।

गैर-अवरुद्ध फ़ाइलें

जबकि संपीड़न को छोटा करना और उसका उपयोग करना पर्याप्त प्रतीत हो सकता है, आपकी फ़ाइलों को गैर-अवरुद्ध करने वाली बनाना भी आपकी साइट को अच्छी तरह से अनुकूलित और पर्याप्त तेज़ बनाने में एक बड़ा कदम है।

यदि आप Google क्रोम में लाइटहाउस प्लगइन का उपयोग कर रहे हैं, तो आप शायद FCP पर ठोकर खा चुके हैं। पहला कंटेंटफुल पेंट मीट्रिक उस समय को मापता है जब पृष्ठ लोड होना शुरू होता है और जब पृष्ठ की सामग्री के किसी भी हिस्से को स्क्रीन पर प्रस्तुत किया जाता है।

आप गैर-महत्वपूर्ण JavaScript या CSS को स्थगित करके FCP में सुधार कर सकते हैं। इसका क्या मतलब है? बस, जावास्क्रिप्ट या स्टाइलशीट जिन्हें आपके पृष्ठ के पहले पेंट पर मौजूद होने की आवश्यकता नहीं है, उन्हें asyncया deferविशेषताओं के साथ चिह्नित किया जाना चाहिए।

यह सुनिश्चित करता है कि कम महत्वपूर्ण संसाधनों को बाद में लोड किया जाता है और पहले पेंट को अवरुद्ध नहीं किया जाता है। दूसरी ओर, महत्वपूर्ण संसाधनों को इनलाइन स्क्रिप्ट या शैलियों के रूप में शामिल किया जा सकता है।

यदि आप इसके बारे में अधिक जानना चाहते हैं, तो इसके बारे में पहले से ही बहुत सारे बेहतरीन लेख हैं:

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

हमेशा एचटीटीपीएस का इस्तेमाल करें

उत्पादन में आपकी वेबसाइट केवल HTTPS कनेक्शन पर उपलब्ध होनी चाहिए। HTTPS सभी साइटों की सुरक्षा, गोपनीयता और उपलब्धता में सुधार करता है, और गैर-संवेदनशील वेब ट्रैफ़िक जैसी कोई चीज़ नहीं होती है । आपकी वेबसाइट को एचटीटीपीएस पर विशेष रूप से प्रस्तुत करने के लिए कॉन्फ़िगर करने के चरण आपके आर्किटेक्चर और वेब होस्टिंग प्रदाता के आधार पर व्यापक रूप से भिन्न होते हैं, और इस प्रकार इन दस्तावेज़ों के दायरे से बाहर हैं।

HTTPS पर दी जाने वाली साइटों को HTTPS कनेक्शन पर सभी स्टाइलशीट, स्क्रिप्ट और अन्य संपत्तियों तक पहुंच बनानी चाहिए। अन्यथा, आप उपयोगकर्ताओं को मिश्रित सक्रिय सामग्री भेज रहे होंगे , जिससे संभावित भेद्यताएं हो सकती हैं जहां एक निर्भरता को बदलकर किसी साइट से समझौता किया जा सकता है। इससे सुरक्षा संबंधी समस्याएं हो सकती हैं और उपयोगकर्ताओं को इन-ब्राउज़र चेतावनियां दिखाई दे सकती हैं। चाहे आप किसी सीडीएन से बूटस्ट्रैप प्राप्त कर रहे हों या इसे स्वयं परोस रहे हों, सुनिश्चित करें कि आप इसे केवल HTTPS कनेक्शन पर एक्सेस करते हैं।