Ongebruikte CSS
Silktide laadt je pagina's in een echte browser en meet hoeveel van elk stylesheet daadwerkelijk wordt gebruikt om de pagina weer te geven. Stylesheets met veel ongebruikte opmaak worden gerapporteerd, samen met de mogelijke besparing.
Waarom dit belangrijk is
Browsers kunnen een pagina pas weergeven nadat ze de bijbehorende hebben gedownload en verwerkt. Elke regel die niet wordt gebruikt, vertraagt dus het moment waarop je content verschijnt. Ongebruikte CSS stapelt zich vanzelf op: thema's en frameworks leveren opmaak voor elke functie, of je die nu gebruikt of niet, en oude opmaak wordt zelden verwijderd wanneer ontwerpen veranderen. Het resultaat is dat bezoekers wachten op opmaak die nooit iets weergeeft.
Zo los je het op
- Verwijder opmaak die je niet meer gebruikt. Buildtools kunnen dit automatisch doen door je templates te scannen en alleen de CSS te behouden waarnaar ze verwijzen.
- Splits grote stylesheets op, zodat elke pagina alleen de opmaak laadt die ze nodig heeft, in plaats van één bundel met de opmaak van elke pagina.
- Geef voor de opmaak die een pagina wel nodig heeft prioriteit aan de regels die het eerste scherm weergeven, en laat de rest laden zonder te blokkeren:
<!-- Laden zonder de eerste weergave te blokkeren -->
<link rel="preload" href="rest.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>
Wees voorzichtig met automatisch verwijderen: opmaak die alleen door wordt gebruikt, of alleen op andere pagina's die de stylesheet delen, kan per ongeluk worden verwijderd.
Zo test Silktide dit
- Laad de pagina in een echte browser en leg vast welke CSS-regels tijdens het laden van de pagina worden toegepast.
- Meet voor elke stylesheet hoeveel bytes nooit zijn gebruikt.
- Rapporteer elke stylesheet met aanzienlijke verspilling en toon de huidige grootte, het ongebruikte percentage en het aantal bytes dat je kunt besparen.
Problemen oplossen
De CSS wordt gebruikt, maar niet meteen
De meting omvat het laden van de eerste pagina. Opmaak die pas later wordt toegepast — bij hoveren, in modals of nadat JavaScript content zichtbaar maakt — telt als ongebruikt, ook al heeft de pagina die uiteindelijk wel nodig. Dat is nog steeds nuttige informatie: deze opmaak hoeft het weergeven van het eerste scherm niet te blokkeren en kan dus apart worden geladen.
De stylesheet wordt op de hele site gedeeld
Een gedeelde stylesheet is op een afzonderlijke pagina grotendeels ‘ongebruikt’. Dat kan een redelijke afweging zijn, omdat het bestand na het bekijken van de eerste pagina in de wordt opgeslagen. Weeg de kosten van het eerste bezoek af tegen het gemak voordat je de stylesheet opsplitst.