Wat is critical CSS?
Ben jij al bezig met de snelheid van je website? Dit kan onder andere je Google ranking positief beïnvloeden. Je zult vast termen als asynchronous CSS load en het aanbieden van critical CSS gezien hebben. Wat dit precies inhoudt en waar je op moet letten wanneer je dit wilt gebruiken, leg ik je uit in dit blog.
Normaliter wordt er pas content, zoals afbeeldingen en tekst, op een website getoond wanneer ook de styling gedownload is. Dit is vaak een apart .css bestand dat los van je website gedownload moet worden. Hoe groter dit bestand, hoe langer het duurt voordat je content op de website kan laten zien. Het tonen van content is dus lineair: eerst de CSS, dan de content. Dit kan ook anders.
Wat is asynchronous CSS load?
Wanneer je asynchroon het CSS bestand laat downloaden, wil dit zeggen dat je de content en het CSS bestand tegelijkertijd downloadt. Is de content eerder klaar? Dan laat de website alvast de content zien. Dit kan de site versnellen, omdat de browser namelijk niet hoeft te wachten tot alle elementen van de website gereed zijn. Echter: is de content sneller gedownload dan de styling? Dan krijg je een onopgemaakte pagina, deze flitst vaak na een paar seconden naar een gestylde pagina. Dit noemen we FOUC: “flash of unstyled content”. Wanneer je erop let, zal je het bij verschillende websites weleens merken. In de meeste gevallen heb je het alleen de eerste keer wanneer je een pagina bezoekt en duurt het vaak nog geen seconde. Echter kan het wel storend zijn voor de bezoeker. Gelukkig is er een tussenoplossing: critical CSS.
Wat doet critical CSS?
Bij critical CSS wordt de styling die nodig is om de eerste weergave goed te tonen apart gedownload. Hierbij geeft de website wel aan dat deze styling van belang is vóórdat er content op het scherm getoond mag worden.
Stel je voor: wanneer iemand op je website komt, ziet hij waarschijnlijk als eerst je menubalk en logo. Deze content wil je dus gelijk in de goede styling hebben. Zet je dit in je critical CSS, dan is deze gelijk bij de eerste weergave goed zichtbaar. De footer, helemaal onderaan de website, kan je pas zien wanneer je helemaal naar onder scrolt. Bij deze content is het dus minder erg als er een FOUC optreedt.
Je kunt ervoor kiezen om deze critical CSS inline (tussen de HTML code) of via een apart bestand te laten downloaden. Deze keuze hangt vaak af hoeveel van je CSS critical is. Wanneer het toch erg veel is, kan je dit beter via een apart CSS bestand doen.
Hoe bepaal je wat critical CSS is?
Er zijn tools die je kunnen vertellen welke styling gebruikt is op welke plekken, of welke styling uit een CSS bestand helemaal niet gebruikt wordt. Dit zit onder andere in de developers settings van Google Chrome. Echter is dit zeer bewerkelijk. Je kunt beter een plugin gebruiken die zelf de critical CSS voor je kan genereren. Sommige plugins doen dit extern: ze laten een andere server je website bezoeken om zo te zien welke styling echt nodig is. Deze styling kan je weer downloaden en instellen als critical CSS.
Moet ik critical CSS gebruiken?
Critical CSS wordt pas van belang als je asychroon CSS wilt inladen. Dit is vaak iets wat je doet als je erg veel of grote CSS bestanden hebt, of echt het uiterste van je website wilt qua snelheid. Voor je Google ranking is goede content waarschijnlijk veel belangrijker. Maar ben je zover om nog verder te gaan met je website en te gaan werken met caching? Dan is critical CSS een logische, volgende stap.
Besteed je het inzetten van critical CSS op je eigen WordPress website liever uit en laat je het graag door specialisten uitvoeren? Of heb je hulp nodig bij maatwerk CSS voor je WordPress website? Neem dan eens contact met ons op! Wij helpen je graag.