Maak je WordPress website sneller met Google PageSpeed Insights: 8 tips

Wat is PageSpeed Insights of Lighthouse?

• Google PageSpeed Insights (ook wel Lighthouse genoemd) is een open source, geautomatiseerd systeem voor het in de basis verbeteren van websites. Je kunt PageSpeed Insights gebruiken voor iedere openbare website.
• PageSpeed Insights is een samenstelling van gratis instrumenten die de opgegeven website snel op een aantal elementen toetst. Het geeft na deze test een score tussen 0 en 100 voor zowel mobiel als desktop.
• Na de snelheidstest volgt er een rapport met aanbevelingen.
• PageSpeed Insights kan worden uitgevoerd via de Google Chrome DevTools, vanaf de PageSpeed Insights website of als Node plug-in.

Het PageSpeed Insights rapport in het kort

Het PageSpeed Insights rapport komt met de volgende statistieken:

First Contentful Paint: De “eerste tekenbewerking met content” (FCP) Dit is de periode totdat het eerste element zichtbaar is op het scherm. Deze score zou zo laag mogelijk moeten zijn.

Speed Index: Deze snelheidsindex laat zien hoe snel de inhoud van een pagina zichtbaar is.

Largest Contentful Paint: “Grootste weergave met content” (LCP) geeft de tijd aan waarop de grootste tekst of afbeelding is weergegeven.

Time to Interactive: De “Tijd tot interactief” geeft aan hoeveel tijd er nodig is voordat de pagina volledig werkbaar is.

Total Blocking Time: Volgens Google “De som van alle perioden tussen ‘Eerste tekenbewerking met content’ (FCP) en ‘Tijd tot interactief’, wanneer langer dan 50 ms”. Aangegeven in milliseconden.

Cumulative Layout Shift: Cummulatieve indelingsverschuiving (CLS) meet de beweging van zichtbare elementen.

Waarom is Google PageSpeed Insights belangrijk?

Als je een eigen website bouwt, kijk je vaak tegen een gedeeltelijk gecachete versie van je website aan. Hiermee bedoelen we dat bijvoorbeeld afbeeldingen en fonts al een keer zijn ingeladen in je browser en niet nogmaals ingeladen hoeven te worden. Hierdoor lijkt de website sneller dan deze in werkelijkheid is.
Een snelle website is van groot belang op het gebied van gebruikservaring van de bezoeker. Uiteindelijk levert dit een verbetering van de conversie op, zoals contact opnemen of offerte aanvragen. Het verhogen van de snelheid is dus niet alleen van belang omdat de website dan zo lekker snel draait.
En als laatst maar zeker niet als minst: Zoekmachines zoals Google bepalen de waarde (ranking) van jouw website mede op de snelheid. Hoe sneller de website, hoe beter de ranking.

7 manieren om WordPress websites een hogere score in Google PageSpeed Insights te geven

1. Optimaliseer je afbeeldingen

• Grotere afbeeldingen hebben invloed op de laadtijd van je website. Probeer deze te beperken tot een maximaal formaat, waarbij de kwaliteit voor de bezoeker nog voldoende blijft. WordPress maakt standaard gebruik van een sourceset van een afbeelding. Hierbij wordt een afbeelding in verschillende formaten aan de bezoeker gestuurd, en kiest de browser het beste formaat.
• Maak gebruik van een moderne indeling zoals WebP. Deze manier van afbeeldingcompressie is speciaal ontwikkeld voor websites. Deze verkleint de bestandsgrootte aanzienlijk ten opzichte van reguliere jpg en png afbeeldingen.
• Gebruik LazyLoading. Deze methode meet of een afbeelding in het zichtvenster van de bezoeker is. Het laadt een afbeelding pas in op het moment deze bijna getoond wordt. Dit maakt de initiële laadtijd van een website een stuk sneller.

2. Maak gebruik van caching

Door het instellen van caching op jouw WordPress website wordt er als het ware een (deel van) de website tijdelijk statisch opgeslagen. Dit betekent dat er minder (tragere) php en database verbindingen hoeven worden gemaakt en worden websites sneller en efficiënter getoond. Er zijn verschillende soorten van caching. Wij maken voornamelijk gebruik van browsercaching waarbij voorgenoemde statisch opgebouwde pakketjes worden verstuurd naar de browser, en object caching (Redis) voor het opslaan van database aanvragen, zodat bij een volgende aanroep deze ook statisch kunnen worden geserveerd.

3. Ontwikkel je website mobile first

Google weegt de snelheid van een mobiele website zwaar mee in de ranking. Hierom is het belangrijk dat de snelheid van de website ook op kleinere schermen met langzamere verbindingen optimaal is.

Het belangrijkste is dat de website “responsive” is, wat betekent dat de gebruikerservaring zo optimaal mogelijk is. De bezoeker zou dus niet hoeven in te zoomen of naar links en rechts te moeten swipen om de volledige inhoud te kunnen bekijken. Dit is eigenlijk standaard tegenwoordig.

Houd bij het bouwen van de stylesheet van website rekening dat de mobiele variant eerst opgebouwd wordt, en daarna de rest van de schermformaten. Beperk het gebruik van CSS en Javascript zoveel mogelijk. Dit komt de laadtijd ook ten goede.

4. Gebruik GZIP compressie

Met GZIP compressie op je server wordt de website ingepakt. Er worden kleinere bestanden vanaf de server naar de browser van de bezoeker gestuurd, zodat deze sneller geladen wordt. Een website kan wel tot 80% in grootte verkleind worden door het aanzetten van GZIP compressie. Doe hier de test en indien blijkt dat GZIP niet geïnstalleerd is, vraag bij je hostingbedrijf dit alsnog te doen.

5. Minimaliseer CSS en Javascript

Dit is een veelgehoorde melding binnen PageSpeed Insights. Het vereist ook wat werk om dit helemaal goed te krijgen. Bij het verkleinen van CSS en Javascript bestanden worden onder andere alle witregels, regel afbrekingen en ontwikkelaars commentaren uit de code verwijderd. De meeste caching plug-ins kunnen deze scripts minimaliseren. Het is wel van belang dat je de functionaliteiten op je website goed test nadat je een dit hebt aangezet. Het zou namelijk zonde zijn als bijvoorbeeld je contactformulier niet meer werkt omdat de javascript hiervan niet meer werkt.

Een andere mogelijkheid om de snelheid van je website te verbeteren is om CSS en Javascript bestanden samen te voegen. Hierdoor hoeven er minder bestanden ingeladen te worden. Dit wordt overigens niet aangeraden als je hostingomgeving gebruik maakt van HTTP/2 (waarbij meerdere bestanden asynchroon (tegelijk) ingeladen kunnen worden), omdat het 1 of een aantal grotere bestanden creëert. Hier kun je controleren of jouw website gebruik maakt van HTTP/2.

6. Update en beperk WordPress plug-ins

Slecht geschreven of verouderde plug-ins kunnen van invloed zijn op de snelheid van je website. Het is daarom van belang dat deze up-to-date gehouden worden. Ook kunnen verouderde plug-ins beveiligingslekken veroorzaken, maar dat terzijde.

Het is ook goed om van tijd tot tijd eens door je lijst met plug-ins te lopen en je af te vragen of je deze nog nodig hebt. Indien je deze niet nodig hebt kun je deze deactiveren, of nog liever, helemaal verwijderen. Ook dit kan de snelheid en daarmee ook de PageSpeed Insights score verhogen

7. Schoon de database op

Als laatste is de database de bron van alle gegevens op je website. Het is dan ook logisch dat deze in goede conditie gehouden moet worden. Houd de database dan ook zo klein mogelijk. Er zijn diverse gratis plug-ins te verkrijgen om je database te optimaliseren. Ook kan het beperken van het aantal revisies de database behoorlijk verkleinen.

8. Gebruik een CDN

Promoot je jouw product of dienst ook buiten Nederland? Dan is het goed om een CDN te gebruiken. CDN staat voor Content Delivery Network en betekent dat een afbeelding op jouw website niet alleen op een server in Nederland staat, maar ook in andere regio’s en zelfs andere werelddelen. Zo is overal ter wereld jouw website snel te benaderen. Ook verlaagt een CDN de eerste reactietijd (TTFB).

Blijf meten

We hebben hier maar een aantal punten genoemd waar op gelet kan worden bij de optimalisatie van je website door gebruik te maken van Google PageSpeed Insights.

Bij Google zijn ze continue bezig de PageSpeed tool te verbeteren. Wat nu modern is, kan over een jaar verouderd zijn. Daarom is het goed om van tijd tot tijd je website te controleren in PageSpeed.

Als laatste is het wellicht goed om te melden dat PageSpeed Insights belangrijk is, maar staar je er niet blind op. Een 100% score is minder belangrijk dan een goede gebruikerservaring. Er zijn tal van andere mogelijke tests zoals GTMetrix en Pingdom waaruit je misschien wel meer gegevens kunt halen.