Optimeiddio

Mewnforion Sass heb lawer o fraster

Wrth ddefnyddio Sass ar y gweill, gwnewch yn siŵr eich bod yn gwneud y gorau o Bootstrap trwy ddefnyddio'r @importcydrannau sydd eu hangen arnoch yn unig. Mae'n debyg y bydd eich optimeiddiadau mwyaf yn dod o Layout & Componentsadran ein 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";

Os nad ydych yn defnyddio cydran, gwnewch sylwadau arni neu dilëwch hi'n gyfan gwbl. Er enghraifft, os nad ydych chi'n defnyddio'r carwsél, tynnwch y mewnforio hwnnw i arbed rhywfaint o faint ffeil yn eich CSS a luniwyd. Cofiwch fod rhai dibyniaethau ar draws mewnforion Sass a allai ei gwneud hi'n anoddach hepgor ffeil.

JavaScript heb lawer o fraster

Mae JavaScript Bootstrap yn cynnwys pob cydran yn ein prif ffeiliau dist ( bootstrap.jsa bootstrap.min.js), a hyd yn oed ein dibyniaeth sylfaenol (Popper) gyda'n ffeiliau bwndel ( bootstrap.bundle.jsa bootstrap.bundle.min.js). Tra'ch bod chi'n addasu trwy Sass, gwnewch yn siŵr eich bod chi'n dileu JavaScript cysylltiedig.

Er enghraifft, gan dybio eich bod chi'n defnyddio'ch bwndelwr JavaScript eich hun fel Webpack, Parcel, neu Vite, dim ond y JavaScript rydych chi'n bwriadu ei ddefnyddio y byddech chi'n mewnforio. Yn yr enghraifft isod, rydym yn dangos sut i gynnwys ein JavaScript moddol yn unig:

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

Fel hyn, nid ydych chi'n cynnwys unrhyw JavaScript nad ydych chi'n bwriadu ei ddefnyddio ar gyfer cydrannau fel botymau, carwseli, a chynghorion offer. Os ydych chi'n mewnforio cwymplenni, awgrymiadau offer neu popovers, gwnewch yn siŵr eich bod chi'n rhestru'r ddibyniaeth ar Popper yn eich package.jsonffeil.

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

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

Autoprefixer .browserslistrc

Mae Bootstrap yn dibynnu ar Autoprefixer i ychwanegu rhagddodiaid porwr yn awtomatig i rai eiddo CSS. Mae rhagddodiaid yn cael eu pennu gan ein .browserslistrcffeil, a geir yng ngwraidd y Bootstrap repo. Bydd addasu'r rhestr hon o borwyr ac ail-grynhoi'r Sass yn tynnu rhywfaint o CSS yn awtomatig o'ch CSS a luniwyd, os oes rhagddodiaid gwerthwr sy'n unigryw i'r porwr neu'r fersiwn hwnnw.

CSS heb ei ddefnyddio

Angen help gyda'r adran hon, ystyriwch agor PR. Diolch!

Er nad oes gennym enghraifft wedi'i hadeiladu ymlaen llaw ar gyfer defnyddio PurgeCSS gyda Bootstrap, mae rhai erthyglau a theithiau cerdded defnyddiol y mae'r gymuned wedi'u hysgrifennu. Dyma rai opsiynau:

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

Yn olaf, mae'r erthygl Tricks CSS hon ar CSS nas defnyddiwyd yn dangos sut i ddefnyddio PurgeCSS ac offer tebyg eraill.

Minify a gzip

Lle bynnag y bo modd, gwnewch yn siŵr eich bod chi'n cywasgu'r holl god rydych chi'n ei roi i'ch ymwelwyr. Os ydych chi'n defnyddio ffeiliau dist Bootstrap, ceisiwch gadw at y fersiynau mini (a nodir gan y .min.cssac .min.jsestyniadau). Os ydych chi'n adeiladu Bootstrap o'r ffynhonnell gyda'ch system adeiladu eich hun, gwnewch yn siŵr eich bod chi'n gweithredu'ch miniifiers eich hun ar gyfer HTML, CSS, a JS.

Ffeiliau nad ydynt yn rhwystro

Er y gallai lleihau a defnyddio cywasgu ymddangos yn ddigon, mae gwneud eich ffeiliau yn rhai nad ydynt yn blocio hefyd yn gam mawr i wneud eich gwefan wedi'i optimeiddio'n dda ac yn ddigon cyflym.

Os ydych chi'n defnyddio ategyn Lighthouse yn Google Chrome, efallai eich bod wedi baglu dros FCP. Mae'r metrig Paent Cynnwys Cyntaf yn mesur yr amser o pan fydd y dudalen yn dechrau llwytho i pan fydd unrhyw ran o gynnwys y dudalen yn cael ei rendro ar y sgrin.

Gallwch wella FCP trwy ohirio JavaScript neu CSS nad yw'n feirniadol. Beth mae hynny'n ei olygu? Yn syml, dylid marcio JavaScript neu ddalennau arddull nad oes angen iddynt fod yn bresennol ar baent cyntaf eich tudalen gyda nodweddion asyncneu defernodweddion.

Mae hyn yn sicrhau bod yr adnoddau llai pwysig yn cael eu llwytho'n ddiweddarach ac nid yn rhwystro'r paent cyntaf. Ar y llaw arall, gellir cynnwys adnoddau hanfodol fel sgriptiau neu arddulliau mewnol.

Os ydych chi eisiau dysgu mwy am hyn, mae yna lawer o erthyglau gwych amdano eisoes:

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

Defnyddiwch HTTPS bob amser

Dim ond dros gysylltiadau HTTPS wrth gynhyrchu y dylai eich gwefan fod ar gael. Mae HTTPS yn gwella diogelwch, preifatrwydd ac argaeledd pob gwefan, ac nid oes y fath beth â thraffig gwe nad yw'n sensitif . Mae'r camau i ffurfweddu'ch gwefan i'w gwasanaethu yn gyfan gwbl dros HTTPS yn amrywio'n fawr yn dibynnu ar eich pensaernïaeth a'ch darparwr gwe-letya, ac felly maent y tu hwnt i gwmpas y dogfennau hyn.

Dylai gwefannau a wasanaethir dros HTTPS hefyd gyrchu'r holl daflenni arddull, sgriptiau ac asedau eraill dros gysylltiadau HTTPS. Fel arall, byddwch yn anfon cynnwys gweithredol cymysg at ddefnyddwyr , gan arwain at wendidau posibl lle gellir peryglu gwefan trwy newid dibyniaeth. Gall hyn arwain at faterion diogelwch a rhybuddion yn y porwr yn cael eu harddangos i ddefnyddwyr. P'un a ydych chi'n cael Bootstrap o CDN neu'n ei weini eich hun, gwnewch yn siŵr eich bod chi'n cael mynediad iddo dros gysylltiadau HTTPS yn unig.