ഒപ്റ്റിമൈസ് ചെയ്യുക

ലീൻ സാസ് ഇറക്കുമതി

@importനിങ്ങളുടെ അസറ്റ് പൈപ്പ്‌ലൈനിൽ Sass ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾക്ക് ആവശ്യമുള്ള ഘടകങ്ങൾ മാത്രം നൽകി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക . നിങ്ങളുടെ ഏറ്റവും വലിയ ഒപ്റ്റിമൈസേഷനുകൾ 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 ഇമ്പോർട്ടുകളിലുടനീളം ചില ഡിപൻഡൻസികൾ ഉണ്ടെന്ന് ഓർക്കുക, അത് ഒരു ഫയൽ ഒഴിവാക്കുന്നത് കൂടുതൽ ബുദ്ധിമുട്ടാക്കിയേക്കാം.

മെലിഞ്ഞ ജാവാസ്ക്രിപ്റ്റ്

bootstrap.jsബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ജാവാസ്‌ക്രിപ്‌റ്റ് ഞങ്ങളുടെ പ്രാഥമിക ഡിസ്‌റ്റ് ഫയലുകളിലെ ( ഒപ്പം ) എല്ലാ ഘടകങ്ങളും bootstrap.min.jsഞങ്ങളുടെ ബണ്ടിൽ ഫയലുകളുമായുള്ള ( bootstrap.bundle.jsഒപ്പം bootstrap.bundle.min.js) പ്രാഥമിക ആശ്രയത്വവും (പോപ്പർ) ഉൾപ്പെടുന്നു. നിങ്ങൾ Sass വഴി ഇഷ്‌ടാനുസൃതമാക്കുമ്പോൾ, ബന്ധപ്പെട്ട 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 ഒന്നും നിങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടില്ല. നിങ്ങൾ ഡ്രോപ്പ്‌ഡൗണുകളോ ടൂൾടിപ്പുകളോ പോപോവറോ ഇറക്കുമതി ചെയ്യുകയാണെങ്കിൽ, നിങ്ങളുടെ package.jsonഫയലിൽ പോപ്പർ ഡിപൻഡൻസി ലിസ്റ്റ് ചെയ്യുന്നത് ഉറപ്പാക്കുക.

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

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

Autoprefixer .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 ഉം മറ്റ് സമാന ഉപകരണങ്ങളും എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കാണിക്കുന്നു.

ചെറുതാക്കി gzip ചെയ്യുക

സാധ്യമാകുമ്പോഴെല്ലാം, നിങ്ങളുടെ സന്ദർശകർക്ക് നിങ്ങൾ നൽകുന്ന എല്ലാ കോഡുകളും കംപ്രസ്സുചെയ്യുന്നത് ഉറപ്പാക്കുക. നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡിസ്‌റ്റ് ഫയലുകളാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, മിനിഫൈഡ് പതിപ്പുകളിൽ ( .min.cssഉം .min.jsവിപുലീകരണങ്ങളും സൂചിപ്പിക്കുന്നത്) പറ്റിനിൽക്കാൻ ശ്രമിക്കുക. നിങ്ങളുടെ സ്വന്തം ബിൽഡ് സിസ്റ്റം ഉപയോഗിച്ച് ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് നിർമ്മിക്കുന്നതെങ്കിൽ, HTML, CSS, JS എന്നിവയ്‌ക്കായി നിങ്ങളുടെ സ്വന്തം മിനിഫയറുകൾ നടപ്പിലാക്കുന്നത് ഉറപ്പാക്കുക.

നോൺബ്ലോക്ക് ചെയ്യുന്ന ഫയലുകൾ

കംപ്രഷൻ ചെറുതാക്കുകയും ഉപയോഗിക്കുകയും ചെയ്യുന്നത് മതിയെന്ന് തോന്നുമെങ്കിലും, നിങ്ങളുടെ ഫയലുകൾ തടയാത്തവയാക്കുന്നത് നിങ്ങളുടെ സൈറ്റിനെ നന്നായി ഒപ്റ്റിമൈസ് ചെയ്യാനും മതിയായ വേഗത്തിലാക്കാനുമുള്ള ഒരു വലിയ ഘട്ടമാണ്.

നിങ്ങൾ ഗൂഗിൾ ക്രോമിൽ ഒരു ലൈറ്റ്ഹൗസ് പ്ലഗിൻ ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾ 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 കണക്ഷനുകളിലൂടെ എല്ലാ സ്റ്റൈൽഷീറ്റുകളും സ്ക്രിപ്റ്റുകളും മറ്റ് അസറ്റുകളും ആക്സസ് ചെയ്യണം. അല്ലാത്തപക്ഷം, നിങ്ങൾ ഉപയോക്താക്കൾക്ക് സമ്മിശ്ര സജീവ ഉള്ളടക്കം അയയ്‌ക്കും , ഇത് ഒരു ആശ്രിതത്വം മാറ്റുന്നതിലൂടെ ഒരു സൈറ്റ് വിട്ടുവീഴ്ച ചെയ്യപ്പെടാൻ സാധ്യതയുള്ള കേടുപാടുകളിലേക്ക് നയിക്കുന്നു. ഇത് സുരക്ഷാ പ്രശ്‌നങ്ങളിലേക്കും ഉപയോക്താക്കൾക്ക് ഇൻ-ബ്രൗസർ മുന്നറിയിപ്പുകളിലേക്കും നയിച്ചേക്കാം. നിങ്ങൾ ഒരു CDN-ൽ നിന്ന് ബൂട്ട്‌സ്‌ട്രാപ്പ് നേടുകയാണെങ്കിലും അല്ലെങ്കിൽ അത് സ്വയം സേവിക്കുകയാണെങ്കിലും, നിങ്ങൾ അത് HTTPS കണക്ഷനുകളിലൂടെ മാത്രമേ ആക്‌സസ് ചെയ്യുന്നുള്ളൂവെന്ന് ഉറപ്പാക്കുക.