In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle niet-verkleinde CSS-bestanden vermeld, samen met de potentiële besparingen in kibibytes (KiB) wanneer deze bestanden worden verkleind:
Hoe het verkleinen van CSS-bestanden de prestaties kan verbeteren
Het verkleinen van CSS-bestanden kan de laadprestaties van uw pagina verbeteren. CSS-bestanden zijn vaak groter dan nodig is. Bijvoorbeeld:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Kan worden teruggebracht tot:
h1,
h2 {
background-color: #000000;
}
Vanuit het perspectief van de browser zijn deze twee codevoorbeelden functioneel gelijkwaardig, maar het tweede voorbeeld gebruikt minder bytes. Minifiers kunnen de byte-efficiëntie verder verbeteren door witruimte te verwijderen:
h1,
h2 {
background-color: #000000;
}
Sommige minifiers gebruiken slimme trucs om bytes te minimaliseren. De kleurwaarde #000000 kan bijvoorbeeld verder worden teruggebracht tot #000 , wat het verkorte equivalent is.
Lighthouse geeft een schatting van de potentiële besparingen op basis van de opmerkingen en witruimtetekens die in uw CSS worden aangetroffen. Dit is een conservatieve schatting. Zoals eerder vermeld, kunnen minifiers slimme optimalisaties uitvoeren (zoals het verkleinen van #000000 naar #000 ) om uw bestandsgrootte verder te verkleinen. Als u dus een minifier gebruikt, ziet u mogelijk meer besparingen dan wat Lighthouse rapporteert.
Gebruik een CSS-minifier om uw CSS-code te verkleinen
Voor kleine sites die u niet vaak bijwerkt, kunt u waarschijnlijk een online service gebruiken om uw bestanden handmatig te verkleinen. U plakt uw CSS in de gebruikersinterface van de service en retourneert een verkleinde versie van de code.
Voor professionele ontwikkelaars wilt u waarschijnlijk een geautomatiseerde workflow opzetten die uw CSS automatisch verkleint voordat u uw bijgewerkte code implementeert. Dit wordt meestal bereikt met een buildtool zoals Gulp of Webpack.
Leer hoe u uw CSS-code kunt verkleinen in Minify CSS .
Stapelspecifieke begeleiding
Drupal
Schakel Geaggregeerde CSS-bestanden in Beheer > Configuratie > Ontwikkeling in. U kunt ook meer geavanceerde aggregatieopties configureren via extra modules om uw site te versnellen door uw CSS-stijlen aaneen te schakelen, te verkleinen en te comprimeren.
Joomla
Een aantal Joomla-extensies kunnen uw site versnellen door uw CSS-stijlen samen te voegen, te verkleinen en te comprimeren. Er zijn ook sjablonen die deze functionaliteit bieden.
Magento
Schakel de optie CSS-bestanden verkleinen in de ontwikkelaarsinstellingen van uw winkel in.
Reageer
Als uw buildsysteem CSS-bestanden automatisch verkleint, zorg er dan voor dat u de productiebuild van uw applicatie implementeert. U kunt dit controleren met de React Developer Tools-extensie.
WordPress
Een aantal WordPress-plug-ins kunnen uw site versnellen door uw stijlen samen te voegen, te verkleinen en te comprimeren. Mogelijk wilt u indien mogelijk ook een bouwproces gebruiken om deze verkleining vooraf uit te voeren.