Google's PageSpeed Insights is één van de vele tool-sets die een gemiddelde frontend developer tot zijn arsenaal rekent. Hopelijk hoorde Google's Lighthouse daar ook reeds bij. Lighthouse is een Google extensie dat vanuit de browser (DevTools), command line of als node module gedraaid kan worden. Het geeft middels scores vervolgens inzicht in onder meer de performance, accessibility en SEO.
Afgelopen maandag maakte Google kenbaar dat PageSpeed Insights is veranderd, nadat Google de PageSpeed Insights tests eerder al voorzien had van real-world user-data. Deze week werd gemeld dat PageSpeed Insights nu ook gebruik maakt van de Lighthouse engine, waarbij de resultaten in een iets gelikter interface worden weergegeven.
Gevolgen voor PageSpeed score
De gevolgen voor de pagespeed score, worden er zelden beter op. Voorheen leek Critical Render Path het meest belangrijke, het direct opnemen van de CSS code dat benodigd is om de website boven de vouw alvast vorm te geven. Middels Lighthouse, lijkt extern bronmateriaal in het algemeen de focus te krijgen.
De trend die we zien, is dat door ons gerealiseerde websites hun performance scores van 99% of 100% behouden. Dit komt onder meer doordat de analytics code ingebakken zit binnen de eigen website. Sommige van onze hand opgeleverde sites worden achteraf voorzien van Google Tag Manager (GTM), zodat Analytics, Facebook, Salesfeed of Hotjar koppelingen kunnen worden ingeladen. Behalve qua AVG wetgeving, is het gebruik van GTM ook van invloed op performance-vlak.
Wordpress en Lighthouse
Uit ons netwerk ontvangen we signalen dat vooral websites gebouwd middels open source oplossingen als Wordpress, een terugval zien in pagespeed score. Wanneer er geen programmeer- als ook performance-kennis aanwezig is, kan het een arbeidsintensieve taak zijn om een Wordpress website uit het performance-dal te trekken. Veelal werkt de inzet van louter Wordpress-plugins, averechts op de PageSpeed.
Performance score gradatie
Een overzicht:
- 98%: Een test van een nieuw op te leveren website, behaalde deze score na inzet van Webp;
- Alhoewel de invloed op pagespeed groot is, levert de afwezigheid van Webp afbeeldingen hooguit 2 procentpunten aftrek op;
- Het niet gebruik maken van Critical Render Path voor CSS / styling, heeft op kleinere websites maximaal 3 procentpunten invloed;
- Een te lange TTFB levert 10 procentpunten aftrek op. Gebruik je Wordpress? Reduceer dan het aantal plugins of maak gebruik van caching;
- Gebruik van Hotjar + Analytics via GTM levert ook ongeveer 10 procentpunten aftrek op. De bottleneck hierin is de caching-policy die gepaard gaan met de JavaScript bestanden van deze third-parties.
Gebruik van eigen JavaScript kan overigens ook invloed hebben op de performance score. Is er sprake van DOM-manipulatie, wat de gebruik blokkeert van het doen van acties? Dan heeft dat invloed op de gebruikerservaring (Time to Interactive, zoals Google het noemt), wat Lighthouse zwaar mee-rekent. Tip: maak waar kan gebruik van (passieve) Listeners.
Meer dan een test
Er valt echter meer te doen dat een test kan ontdekken of adviseren. Critical Render Path levert dus meetbaar snellere websites op, maar het blijven inzetten van de Critical Render Path techniek, werkt averechts voor herhalende bezoekers. Het voordeel van caching wordt bijvoorbeeld niet benut.
Toegankelijkheid
Lighthouse geeft aanvullend praktische tips omtrent accessibility c.q. toegankelijkheid. Zowel contextuele leesbaarheid als ook leesbaarheid door (al dan niet onjuist) kleurgebruik wordt hierbij onder de loep genomen. Daarbij geeft Google te kennen zelf aanvullende stappen te testen.
In de basis is dit eenvoudig te doen zonder aanvullende hulpmiddelen. Valt de website met enkel toetsenbord te bedienen, waarbij je elke drang om voor die ene klik de muis te gebruiken weet te weerstaan? Slaag je er in de navigatie en dropdowns te openen, gallerij foto's te openen, maar ook weer te sluiten met de escape toets. Lukt het je door eventuele popups en cookie-policies te klikken en je doel te bereiken?
Dan is de kans groot dat bezoekers die aangewezen zijn op alternatieve hulpmiddelen, ook in staat zijn door de website te navigeren. In elk ander geval is er werk aan de winkel.
