Eén van de meer lastige onderdelen van een 100% score in Google's PageSpeed insights, is het uit de weg ruimen van de "Eliminate render-blocking JavaScript and CSS" melding die Google soms afgeeft.
Een artikel omtrent dit onderwerp is niet nieuw. Deze PageSpeed melding is gerelateerd aan de Critical Render Path.
Hoe je dit aspect in de basis moet benaderen, tref je in bovenstaande link. In praktijk kom ik echter oplossingen tegen, die de plank juist mis slaan. Dit kom ik vooral tegen bij geautomatiseerde oplossingen. Ik heb het dan ook over (Wordpress) plugins.
Soms kan ik de verleiding niet weerstaan om in de broncode te duiken. Zeker wanneer iemand zwaait met een Wordpress site in combinatie met een hoge score. Ik weet dat het binnen Wordpress websites vrij arbeidsintensief kan zijn om een hoge score, met behoud van optimale performance, te behalen.
Wat is render blocking JavaScript en CSS?
De reden van de "Eliminate render-blocking"-melding, is dat je browser eerst moet wachten op alle bronbestanden waarnaar verwezen wordt, voordat het kan beginnen met tekenen. Hier kun je op inspelen, door te zorgen dat de CSS, benodigd voor de bovenkant van je webpagina, onvertraagd verwerkt kan worden door de browser. Dit aspect kun je bereiken, door benodigde requests weg te nemen, en dus dat stukje -benodigd voor de bovenkant van je webpagina- in je HTML document op te nemen.
Critical Render Path binnen Wordpress
Van alle aspecten die binnen de PageSpeed test gemeten wordt, is dit onderdeel het minst te automatiseren. Er zijn echter Wordpress plugins, die claimen de melding "Eliminate render-blocking JavaScript and CSS" te tackelen. Deze plugins verzamelen de inhoud van alle CSS bestanden (en wellicht tevens JS bestanden), om de verzamelde inhoud vervolgens direct in het HTML document te plaatsen. Hieronder valt dus ook eventuele CSS code, dat in zijn geheel niet gebruikt wordt op de door de bezoeker bezochte pagina.
Voordelen:
- er zijn geen extra requests nodig, de browser kan direct beginnen met tekenen zonder te hoeven wachten op extra bronnen;
- je kunt voldoen aan "Eliminate render-blocking JavaScript and CSS" melding van Google's PageSpeed Insights tests.
Nadelen:
Ik laat in bovenstaande bewoording reeds doorschemeren, dat er kanttekeningen zijn aan deze oplossing van Wordpress. Deze zijn als volgt:
- Pagina's worden, gemeten in kilobytes, beduidend groter. In dit vraagstuk, waar zo een module was toegepast, kwam geen enkele pagina gezipped onder de 250kb, waar dit artikel rond de 20kb schommelt;
- De laadtijd van de webpagina zelf is hoger, doordat het initieel HTML document groter is;
- Vanwege dit verschil in aanwezige code in het directe HTML bestand, valt het SEO aspect "Text to Code ratio" lager uit, namelijk 0% versus ongeveer 18% voor dit artikel;
- Het client side caching mechanisme wordt niet benut, waardoor je je bezoekers bij elk bezochte pagina, dwingt om de CSS code opnieuw als totaalpakket met het HTML document, te downloaden;
- Het kost je extra dataverkeer, doordat CSS bestanden en wellicht zelf JavaScript bestanden, niet gecached worden door je bezoekers en dus elke keer als totaalpakket mee verstuurd wordt in het HTML document.
Met deze toepassing van Wordpress, gaat je score op papier weliswaar omhoog, maar heeft het juist een negatieve invloed op elk ander aspect dat met laadtijd, performance of SEO te maken heeft. Ook op bijzaken, zoals hostingkosten voor grotere websites, zal het impact hebben.
Mijn advies in deze: ga voor optimalisatie per te gebruiken plugin na wat het exact doet en of aanwezige plugins in combinatie met Wordpress überhaupt de gewenste SEO techniek en performance kan leveren voor je bedrijfswebsite.
