Hoe krijg ik een hogere Google Pagespeed Insights score?

De snelheid van je website is belangrijk. Als het laden van je website namelijk langer dan 10 seconden duurt denkt de bezoeker dat de website het niet doet of kapot is. Als het minder dan 1 seconde duurt heeft de bezoeker het idee dat de website snel is en kan de bezoeker sneller de gewenste informatie vinden. Lees voor meer informatie mijn artikel ‘Hoe snel moet mijn website zijn?’.

Dit is ook de reden waarom Google waarde hecht aan de snelheid van je website en snellere websites beter zal waarderen. Om je te helpen bij het sneller maken van je website heeft Google een tool ontwikkeld. De PageSpeed Insights analyseert de snelheid van je website en geeft je een score en tips waarmee je je website sneller kan maken.

In dit artikel beschrijf ik een experiment waarin ik ga proberen een zo hoog mogelijke score te halen voor onze eigen website. Ik geef daarbij aan wat ik heb gedaan (en wat jij dus ook kan doen) om onze website sneller te kijken. Omdat wij een Drupal website hebben zullen veel tips daarom Drupal gerelateerd zijn.

Op de hoogte blijven van dit experiment? Schrijf je in voor onze nieuwsbrief!

Voor we beginnen

De snelheid van je website is belangrijk maar het is zonde om dagen bezig te zijn met minimale verbeteringen. Je kan die tijd dan beter stoppen in het maken van goede content omdat dat waarschijnlijk een groter effect zal hebben op je positionering bij de zoekresultaten van Google. Het gaat erom dat je beter scoort dan je concurrenten. Dit is eigenlijk de minimale eis die je moet stellen aan de score die je krijgt van de PageSpeed Insights.

Daarbij moet je je afvragen op welk zoekwoord je het beste gevonden wil worden en welke pagina van jouw website Google dan naar voren schuift als beste kandidaat. Veel wijzigingen die je doet aan de website gelden voor de gehele website maar het is toch verstandig je te focussen op de pagina waar je goed mee wil scoren. In ons geval is dat het zoekwoord ‘Drupal’. Als je zoekt op Drupal in Google wordt je het artikel ‘De voordelen van Drupal’ voorgeschoteld. In dit experiment ga ik daarom deze pagina optimaliseren.

PageSpeed Insights maakt een onderscheid tussen mobiel en desktop. Op een mobiel is het namelijk lastiger een snelle website te krijgen dan op een desktop doordat de verbinding meestal slechter is. Veel aanpassingen die je doet gelden voor zowel de mobiel en desktop maar de mobiele versie vereist op sommige punten net wat extra aandacht. Ik ga mij daarom ook focussen op de score voor de mobiel die onze pagina krijgt in PageSpeed Insights.

Wat we goed doen

PageSpeed Insight splitst de beoordeling op in de volgende onderdelen:

• Groen vinkje: Goed bezig, niks meer aan doen!
• Geel uitroepteken: Heeft niet veel impact maar probeer het op te lossen als je tijd over hebt.
• Rood uitroepteken: Dit probleem oplossen zorgt voor een duidelijke verbetering in de snelheid van je website.

Wij krijgen groene vinkjes voor de volgende onderdelen:

Comprimeren inschakelen + CSS verkleinen + Gebruikmaken van browsercaching

Door standaard de cache aan te zetten in Drupal zorg je ervoor dat hiervoor groene vinkjes krijgt. Op Drupal in 24 dagen kun je leren wat cache precies is en hoe je deze aanzet in je Drupal website.

Daarnaast raad ik je aan de Advanced CSS/JS aggregation module te installeren. Deze zorgt ervoor dat je CSS en Javascript bestanden nog kleiner worden.

Omleidingen op bestemmingspagina vermijden

Zorg ervoor dat wanneer iemand naar jouw pagina surft hij of zij niet direct doorverwezen wordt naar een andere pagina. Dit kan voorkomen wanneer je naast je website ook een specifieke mobiele website hebt. Een script kijkt dan op wat voor een apparaat de website bekeken wordt en stuurt mobiele gebruikers door naar de mobiele versie van je website. Nu hebben wij geen aparte mobiele website maar een responsive website dus is dit voor ons geen probleem. Heb jij nog wel een mobiele versie van je website, neem dan een responsive website.

Reactietijd van server beperken

Vaak heb je geen invloed op de instellingen van je server omdat je gebonden bent aan een bepaalde hosting partij. Het is daarom verstandig een hosting partij te kiezen waarbij de reactietijd van de server laag is. Wij hosten onze website bij Pantheon. Ondanks dat de servers in Amerika zijn is de reactietijd altijd laag en de website snel.

JavaScript en CSS in inhoud boven de vouw die het weergeven blokkeren, verwijderen + Prioriteit geven aan zichtbare content

Waar het bij deze twee punten op neer komt is dat de website direct zichtbaar moet zijn zonder dat er gebruikt wordt van externe CSS of Javascript bronnen. De enigste manier om dit op te lossen is om de CSS en Javascript direct (oftewel inline) in de HTML pagina te laden. Dit kan een hels karwei zijn maar gelukkig is het met de eerder genoemde Advanced CSS/JS aggregation module gemakkelijk op te lossen. Je kan met deze module namelijk aangeven op welke pagina’s de CSS en Javascript inline geladen moet worden. Ik heb dit nu ingesteld voor onze ‘Voordelen van Drupal’ pagina.

Wat we kunnen verbeteren

HTML verkleinen

Met behulp van de Minify module voor Drupal heb ik de grootte van de HTML wel kunnen verkleinen maar niet dusdanig dat de Pagespeed Insights het niet meer als een probleem ziet. Ik zal dus op zoek moeten gaan naar een andere oplossing om de HTML bestanden te verkleinen.

Update 8 juni 2015
Het is ons gelukt om de HTML dermate te verkleinen zodat Pagespeed Insights het accepteert. We hebben onze website gekoppeld aan Cloudflare die de verkleining van de HTML verzorgt. Het is wel belangrijk dat je er eerst voor zorgt dat je HTML geen fouten bevat wanneer je deze valideert met de W3C markup validation service. Want zodra Cloudflare een fout in je HTML tegenkomt wordt de compressie gestaakt.

Afbeeldingen optimaliseren

Google geeft aan dat je het beste geen afbeeldingen kan gebruiken als dat niet nodig is. Ik heb daarom de grote afbeelding die wij bovenaan gebruikte vervangen met een blauw vlak en daarin een icoon geplaatst (met behulp van Font Awesome). Ook heb ik de afbeeldingen bij de gerelateerde artikelen vervangen met kleurvlakken. Dit is wat mij betreft een tijdelijke oplossing want we zijn momenteel bezig om een zogenaamde Content Delivery Network (CDN) te koppelen aan onze Drupal website.

Een CDN zorgt ervoor dat je de afbeeldingen van een andere, en dus niet je eigen, server kan laden. De CDN kijkt naar de geografische locatie van je bezoeker en biedt de afbeeldingen aan vanaf een server die het dichts bij de bezoeker in de buurt is. Daarnaast maakt het CDN waar wij voor gekozen hebben, namelijk ReSRC.it, het ook mogelijk om afbeelding te optimaliseren. Zodra dit ons gelukt is zal ik uitleggen hoe wij het voor elkaar gekregen hebben maar vooralsnog zijn onze afbeeldingen niet geoptimaliseerd.

Welke score haal jij? En heb je tips om een nog betere score te halen? Deel ze met mij in een reactie hieronder.