अप्टिमाइज गर्नुहोस्

लीन सास आयात

तपाईको सम्पत्ति पाइपलाइनमा Sass प्रयोग गर्दा, तपाईलाई आवश्यक पर्ने कम्पोनेन्टहरू मात्र @importing गरेर बुटस्ट्र्यापलाई अप्टिमाइज गर्न निश्चित गर्नुहोस्। 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 मा केहि फाइल आकार बचत गर्न आयात हटाउनुहोस्। दिमागमा राख्नुहोस् त्यहाँ सास आयातहरूमा केही निर्भरताहरू छन् जसले फाइललाई हटाउन गाह्रो बनाउन सक्छ।

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

बुटस्ट्र्यापको जाभास्क्रिप्टले हाम्रो प्राथमिक डिस्ट फाइलहरू ( bootstrap.jsर ), र हाम्रो बन्डल फाइलहरू ( र ) bootstrap.min.jsसँग हाम्रो प्राथमिक निर्भरता (पप्पर) मा प्रत्येक कम्पोनेन्ट समावेश गर्दछ । जब तपाइँ Sass मार्फत अनुकूलन गर्दै हुनुहुन्छ, सम्बन्धित JavaScript हटाउन निश्चित हुनुहोस्।bootstrap.bundle.jsbootstrap.bundle.min.js

उदाहरणका लागि, तपाईंले वेबप्याक, पार्सल, वा Vite जस्ता आफ्नै 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फाइलमा Popper निर्भरता सूचीबद्ध गर्न निश्चित हुनुहोस्।

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

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

Autoprefixer .browserslistrc

बुटस्ट्र्याप स्वचालित रूपमा निश्चित CSS गुणहरूमा ब्राउजर उपसर्गहरू थप्न Autoprefixer मा निर्भर गर्दछ। .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

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

गैर-ब्लक फाइलहरू

कम्प्रेसन र कम्प्रेसन प्रयोग गर्दा पर्याप्त जस्तो लाग्न सक्छ, तपाईंको फाइलहरूलाई नन-ब्लक गर्नेहरू बनाउनु पनि तपाईंको साइटलाई राम्रोसँग अप्टिमाइज गरिएको र पर्याप्त छिटो बनाउनको लागि ठूलो कदम हो।

यदि तपाइँ Google Chrome मा लाइटहाउस प्लगइन प्रयोग गर्दै हुनुहुन्छ भने, तपाइँ FCP मा ठोक्किएको हुन सक्छ। फर्स्ट कन्टेन्टफुल पेन्ट मेट्रिकले पृष्ठको सामग्रीको कुनै पनि भाग स्क्रिनमा रेन्डर गर्दा पृष्ठ लोड हुन सुरु भएको समयलाई मापन गर्दछ।

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

यसले सुनिश्चित गर्दछ कि कम महत्त्वपूर्ण स्रोतहरू पछि लोड हुन्छन् र पहिलो पेन्ट अवरुद्ध गर्दैनन्। अर्कोतर्फ, महत्वपूर्ण स्रोतहरूलाई इनलाइन लिपि वा शैलीहरूको रूपमा समावेश गर्न सकिन्छ।

यदि तपाइँ यस बारे थप जान्न चाहनुहुन्छ भने, त्यहाँ पहिले नै यसको बारेमा धेरै उत्कृष्ट लेखहरू छन्:

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

सधैं HTTPS प्रयोग गर्नुहोस्

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

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