Ottimizza

Lean Sass importazzjonijiet

Meta tuża Sass fil-pipeline tal-assi tiegħek, kun żgur li tottimizza Bootstrap billi tagħmel biss @importil-komponenti li għandek bżonn. L-akbar ottimizzazzjonijiet tiegħek x'aktarx jiġu mis- Layout & Componentssezzjoni ta' tagħna 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";

Jekk m'intix qed tuża komponent, ikkummenta jew ħassarha kompletament. Pereżempju, jekk m'intix qed tuża l-karużell, neħħi dik l-importazzjoni biex tiffranka xi daqs tal-fajl fis-CSS ikkumpilat tiegħek. Żomm f'moħħok li hemm xi dipendenzi madwar l-importazzjonijiet Sass li jistgħu jagħmluha aktar diffiċli biex tħalli barra fajl.

Lean JavaScript

Il-JavaScript ta' Bootstrap jinkludi kull komponent fil-fajls tad-dist primarji tagħna ( bootstrap.jsu bootstrap.min.js), u anke d-dipendenza primarja tagħna (Popper) mal-fajls tal-pakkett tagħna ( bootstrap.bundle.jsu bootstrap.bundle.min.js). Waqt li tkun qed tippersonalizza permezz ta' Sass, kun żgur li tneħħi JavaScript relatat.

Pereżempju, jekk wieħed jassumi li qed tuża l-bundler JavaScript tiegħek bħal Webpack, Parcel, jew Vite, int timporta biss il-JavaScript li qed tippjana li tuża. Fl-eżempju hawn taħt, nuru kif tinkludi biss il-JavaScript modali tagħna:

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

B'dan il-mod, m'intix qed tinkludi l-ebda JavaScript li m'għandekx il-ħsieb li tuża għal komponenti bħal buttuni, karużelli, u tooltips. Jekk qed timporta dropdowns, tooltips jew popovers, kun żgur li telenka d-dipendenza Popper fil- package.jsonfajl tiegħek.

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

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

Autoprefixer .browserslistrc

Bootstrap jiddependi fuq Autoprefixer biex iżżid awtomatikament il-prefissi tal-browser għal ċerti proprjetajiet CSS. Il-prefissi huma ddettati mill- .browserslistrcfajl tagħna, li jinsab fl-għerq tar-repo Bootstrap. Il-personalizzazzjoni ta' din il-lista ta' browsers u l-kompilazzjoni mill-ġdid tas-Sass awtomatikament ineħħu xi CSS mis-CSS ikkumpilat tiegħek, jekk ikun hemm prefissi tal-bejjiegħ uniċi għal dak il-browser jew verżjoni.

CSS mhux użat

Għajnuna mfittxija b'din it-taqsima, jekk jogħġbok ikkunsidra li tiftaħ PR. Grazzi!

Filwaqt li m'għandniex eżempju mibni minn qabel għall-użu ta ' PurgeCSS ma' Bootstrap, hemm xi artikli ta' għajnuna u walkthroughs li kitbet il-komunità. Hawn huma xi għażliet:

• 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/

Fl-aħħar nett, dan l-artikolu CSS Tricks dwar CSS mhux użat juri kif tuża PurgeCSS u għodod oħra simili.

Minify u gzip

Kull meta jkun possibbli, kun żgur li tikkompressa l-kodiċi kollu li sservi lill-viżitaturi tiegħek. Jekk qed tuża Bootstrap dist files, ipprova żżomm mal-verżjonijiet minifikati (indikati mill- .min.cssu l- .min.jsestensjonijiet). Jekk qed tibni Bootstrap mis-sors bis-sistema tal-bini tiegħek stess, kun żgur li timplimenta l-minifiers tiegħek għal HTML, CSS u JS.

Fajls li ma jimblukkawx

Filwaqt li l-minimifikazzjoni u l-użu tal-kompressjoni jistgħu jidhru li huma biżżejjed, li tagħmel il-fajls tiegħek dawk li ma jimblukkawx huwa wkoll pass kbir biex is-sit tiegħek ikun ottimizzat tajjeb u mgħaġġel biżżejjed.

Jekk qed tuża plugin Lighthouse fil-Google Chrome, jista 'jkollok tfixkel fuq FCP. Il-metrika tal-Ewwel Żebgħa Contentful tkejjel iż-żmien minn meta l-paġna tibda titgħabba sa meta xi parti mill-kontenut tal-paġna tiġi mogħtija fuq l-iskrin.

Tista' ttejjeb l-FCP billi tiddiferixxi JavaScript jew CSS mhux kritiċi. Xi tfisser? Sempliċement, JavaScript jew stylesheets li m'għandhomx għalfejn ikunu preżenti fuq l-ewwel żebgħa tal-paġna tiegħek għandhom ikunu mmarkati bi asyncjew deferattributi.

Dan jiżgura li r-riżorsi inqas importanti jiġu mgħobbija aktar tard u ma jimblukkawx l-ewwel żebgħa. Min-naħa l-oħra, ir-riżorsi kritiċi jistgħu jiġu inklużi bħala skripts jew stili inline.

Jekk trid titgħallem aktar dwar dan, diġà hemm ħafna artikli kbar dwar dan:

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

Dejjem uża HTTPS

Il-websajt tiegħek għandha tkun disponibbli biss fuq konnessjonijiet HTTPS fil-produzzjoni. HTTPS itejjeb is-sigurtà, il-privatezza u d-disponibbiltà tas-siti kollha, u m'hemm l-ebda ħaġa bħal traffiku tal-web mhux sensittiv . Il-passi biex jiġi kkonfigurat il-websajt tiegħek biex tiġi moqdija esklussivament fuq HTTPS ivarjaw ħafna skont l-arkitettura u l-fornitur tal-web hosting tiegħek, u għalhekk huma lil hinn mill-ambitu ta 'dawn id-dokumenti.

Is-siti moqdija fuq HTTPS għandhom ukoll jaċċessaw l-stylesheets, l-iskripts u l-assi l-oħra kollha fuq konnessjonijiet HTTPS. Inkella, tkun qed tibgħat lill-utenti kontenut attiv imħallat , li jwassal għal vulnerabbiltajiet potenzjali fejn sit jista' jiġi kompromess billi tbiddel dipendenza. Dan jista' jwassal għal kwistjonijiet ta' sigurtà u twissijiet fil-browser murija lill-utenti. Kemm jekk qed tieħu Bootstrap minn CDN jew li sservi lilek innifsek, kun żgur li taċċessah biss permezz ta' konnessjonijiet HTTPS.