Wat is kritieke CSS?
Kritieke CSS is de kleine set opmaak die nodig is om het eerste scherm van je pagina te tonen. Die zet je direct in je pagina in plaats van in een bestand.
Zo hoeft de browser niet te wachten op een extern bestand voordat hij iets kan tekenen.
Het is een snelheidstechniek, geen ontwerpkeuze.
Waarom het helpt
Een opmaakbestand blokkeert het tekenen van je pagina tot het binnen is. Bij een trage verbinding zie je dan seconden niets.
Met kritieke opmaak in je pagina verschijnt je eerste scherm meteen. Meer daarover lees je bij pagespeed.
Hoe het werkt
Je bepaalt welke regels nodig zijn voor wat direct zichtbaar is, zet die in een blok bovenaan, en laadt de rest daarna.
Dat bepalen doet een hulpmiddel voor je; met de hand is het ondoenlijk.
Het verschil met inline CSS
Kritieke opmaak staat in een blok bovenaan je pagina, niet bij losse elementen. Het is dus geen inline opmaak in de gebruikelijke zin.
Meer daarover lees je bij wat inline CSS is.
Mijn vuistregels
- Laat het genereren, doe het niet met de hand.
- Gebruik de functie in je cacheplugin als die er is.
- Genereer opnieuw na elke ontwerpwijziging.
- Controleer of je pagina niet verspringt tijdens het laden.
Die derde wordt vergeten en dan klopt je kritieke opmaak niet meer bij je site.
Wanneer je het nodig hebt
Bij een site waar snelheid echt telt en waar je andere winst al gepakt hebt.
Los eerst je afbeeldingen op; dat levert meer op. Meer daarover lees je bij css.
Het risico
Verkeerd gegenereerde kritieke opmaak laat je pagina verspringen of even verkeerd tonen.
Test het op meerdere paginasoorten. Meer daarover lees je bij elementor.