Critical rendering path
Ook wel kritiek renderpad
Wat betekent critical rendering path?
Het critical rendering path is de reeks stappen die een browser doorloopt om de code, opmaak en scripts van je website om te zetten in een zichtbare pagina. Bestanden die de browser eerst moet laden voordat hij iets kan tonen, vertragen dat pad.
Veelgestelde vragen over critical rendering path
Hoe meet ik het critical rendering path van mijn website?
Je meet het het makkelijkst met PageSpeed Insights van Google. Vul je URL in en kijk naar deze onderdelen:
- First Contentful Paint (FCP): wanneer de eerste tekst of afbeelding verschijnt.
- Largest Contentful Paint (LCP): wanneer het grootste element zichtbaar is.
- De suggestie om bronnen te elimineren die het weergeven blokkeren. Daar zie je welke CSS- en JavaScript-bestanden het pad vertragen.
Wil je meer detail, open dan in Chrome de ontwikkelaarstools (F12) en gebruik het tabblad Performance. Daar zie je per milliseconde wat de browser laadt en uitvoert.
Hoe verkort ik het critical rendering path in WordPress?
Met een snelheidsplugin als WP Rocket of LiteSpeed Cache regel je het meeste zonder code. Zo pak je het aan:
- Laat ongebruikte CSS verwijderen of kritieke CSS genereren, zodat alleen de opmaak voor het eerste scherm direct laadt.
- Zet JavaScript op uitgesteld laden (defer).
- Stel scripts van bijvoorbeeld chatwidgets of trackers uit tot de bezoeker iets doet.
- Laad lettertypen lokaal in plaats van via een externe server.
- Test na elke wijziging je site en meet opnieuw.
LiteSpeed Cache werkt het best als je hosting een LiteSpeed-server gebruikt.
Moet ik al mijn JavaScript uitstellen voor een snellere site?
Nee, dat is een veelgemaakte fout. Sommige scripts zijn nodig om je pagina goed te tonen, zoals het script van een menu, slider of cookiebanner. Stel je die uit, dan kan je pagina er eerst kapot uitzien of werkt een knop pas na een paar seconden.
Beter werkt dit:
- Stel scripts uit die niet nodig zijn voor het eerste scherm, zoals tracking en chatwidgets.
- Sluit scripts uit die direct zichtbare onderdelen aansturen.
- Controleer je site op mobiel en desktop na elke aanpassing.
In WP Rocket en LiteSpeed Cache kun je bestanden uitsluiten van uitstellen.
Wat doe ik als mijn site breekt na het optimaliseren?
Zet de laatst gewijzigde instelling terug. Meestal komt het probleem door het combineren van bestanden, het verwijderen van CSS of het uitstellen van JavaScript. Ga zo te werk:
- Leeg de cache van je plugin, je hosting en je browser.
- Zet de optimalisaties een voor een uit tot het probleem verdwijnt.
- Sluit het bestand dat de fout veroorzaakt uit van die optimalisatie.
- Test wijzigingen voortaan eerst op een stagingomgeving, een kopie van je site.
Maak voor je begint een back-up, bijvoorbeeld met UpdraftPlus. Dan kun je altijd terug.
Hoeveel sneller wordt mijn site door het renderpad te optimaliseren?
Dat hangt sterk af van je huidige situatie. Is je site nu traag door veel blokkerende CSS en JavaScript, dan merk je vaak duidelijk verschil in hoe snel de eerste inhoud verschijnt. Is je site al goed opgebouwd, dan is de winst kleiner.
De uitkomst hangt onder meer af van:
- Je thema en paginabouwer.
- Het aantal plugins dat eigen scripts en stijlen laadt.
- Externe scripts zoals advertenties, chat en tracking.
- De snelheid van je hosting.
Meet daarom voor en na met PageSpeed Insights, zodat je ziet wat het voor jouw site oplevert.
