Optimaliseren

Slanke Sass-imports

Wanneer je Sass in je asset pipeline gebruikt, zorg er dan voor dat je Bootstrap optimaliseert door alleen de componenten te @importen die je nodig hebt. Je grootste winst zit waarschijnlijk in het onderdeel Layout & Components van onze bootstrap.scss.

Standaardwaarden: zie scss/bootstrap.scss in de Bootstrap-broncode.

Gebruik je een component niet, zet die dan in commentaar of verwijder hem helemaal. Gebruik je bijvoorbeeld de carousel niet, verwijder dan die import om bestandsgrootte in je gecompileerde CSS te besparen. Houd er rekening mee dat er tussen Sass-imports onderlinge afhankelijkheden bestaan die het lastiger kunnen maken om een bestand weg te laten.

Slanke JavaScript

De JavaScript van Bootstrap bevat elk component in onze primaire dist-bestanden (bootstrap.js en bootstrap.min.js), en in onze bundle-bestanden (bootstrap.bundle.js en bootstrap.bundle.min.js) zelfs onze belangrijkste afhankelijkheid (Popper). Terwijl je via Sass aanpassingen doet, verwijder dan ook de bijbehorende JavaScript.

Stel dat je bijvoorbeeld je eigen JavaScript-bundler gebruikt, zoals Webpack, Parcel of Vite, dan importeer je alleen de JavaScript die je van plan bent te gebruiken. In het onderstaande voorbeeld laten we zien hoe je alleen onze modal-JavaScript opneemt:

// Importeer alleen wat we nodig hebben

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

Zo neem je geen JavaScript op die je niet van plan bent te gebruiken voor componenten als knoppen, carousels en tooltips. Importeer je dropdowns, tooltips of popovers, vermeld dan de Popper-afhankelijkheid in je package.json-bestand.

Autoprefixer .browserslistrc

Bootstrap leunt op Autoprefixer om automatisch browserprefixes aan bepaalde CSS-eigenschappen toe te voegen. Welke prefixes dat zijn, wordt bepaald door ons .browserslistrc-bestand in de root van de Bootstrap-repo. Wanneer je deze browserlijst aanpast en de Sass opnieuw compileert, wordt automatisch wat CSS uit je gecompileerde CSS verwijderd, mits er vendor-prefixes zijn die uniek zijn voor die browser of versie.

Ongebruikte CSS

Hulp gezocht bij dit onderdeel; overweeg een PR te openen. Dank je wel!

Hoewel we geen kant-en-klaar voorbeeld hebben voor het gebruik van PurgeCSS met Bootstrap, zijn er wel nuttige artikelen en stapsgewijze uitleg die de community heeft geschreven. Een paar opties:

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

Tot slot laat dit CSS Tricks-artikel over ongebruikte CSS zien hoe je PurgeCSS en vergelijkbare tools gebruikt.

Minificeren en gzippen

Comprimeer waar mogelijk alle code die je aan je bezoekers serveert. Gebruik je de dist-bestanden van Bootstrap, houd het dan bij de geminificeerde versies (herkenbaar aan de extensies .min.css en .min.js). Bouw je Bootstrap vanaf de bron met je eigen buildsysteem, zorg dan dat je je eigen minifiers voor HTML, CSS en JS inzet.

Niet-blokkerende bestanden

Hoewel minificeren en comprimeren misschien genoeg lijkt, is het niet-blokkerend maken van je bestanden ook een grote stap om je site goed geoptimaliseerd en snel genoeg te krijgen.

Als je een Lighthouse-plugin in Google Chrome gebruikt, ben je misschien FCP tegengekomen. De metriek First Contentful Paint meet de tijd vanaf het moment dat de pagina begint te laden tot het moment dat een willekeurig deel van de pagina-content op het scherm wordt weergegeven.

Je kunt FCP verbeteren door niet-kritieke JavaScript of CSS uit te stellen. Wat betekent dat? Simpel gezegd: JavaScript of stylesheets die niet aanwezig hoeven te zijn bij de eerste paint van je pagina, moeten worden gemarkeerd met de attributen async of defer.

Zo worden de minder belangrijke resources later geladen en blokkeren ze de eerste paint niet. Kritieke resources kun je daarentegen als inline scripts of stijlen opnemen.

Wil je hier meer over leren, dan zijn er al veel goede artikelen over:

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

Gebruik altijd HTTPS

Je website zou in productie alleen via HTTPS-verbindingen beschikbaar moeten zijn. HTTPS verbetert de veiligheid, privacy en beschikbaarheid van alle sites, en niet-gevoelig webverkeer bestaat niet. De stappen om je website uitsluitend via HTTPS te serveren verschillen sterk per architectuur en hostingprovider en vallen dus buiten het bestek van deze documentatie.

Sites die via HTTPS worden geserveerd, zouden ook alle stylesheets, scripts en andere assets via HTTPS-verbindingen moeten benaderen. Doe je dat niet, dan stuur je gebruikers gemengde actieve content, wat tot mogelijke kwetsbaarheden leidt waarbij een site kan worden gecompromitteerd door een afhankelijkheid aan te passen. Dat kan beveiligingsproblemen opleveren en waarschuwingen in de browser tonen aan gebruikers. Of je Bootstrap nu van een CDN haalt of zelf serveert: zorg dat je het uitsluitend via HTTPS-verbindingen benadert.