Veel van de kantoren waarmee we bij Kinsta samenwerken, gaan dagelijks met klanten om. Voor klanten, of zelfs voor een CEO van een bedrijf, is het niet ongewoon om aan hun medewerkers of WordPress-ontwikkelaar te vragen om de Google PageSpeed Insights-score te verhogen. Google doet goed werk door het op de markt brengen van deze tool, maar toch begrijpen veel mensen niet dat een minder perfecte score nog niet het einde van de wereld betekent. Voor mensen die een website beheren, kan dit geregeld tot frustraties leiden.

Vandaag willen graag enkele tips en strategieën met je delen die je kunnen helpen om met je WordPress-site een score van 100/100 in Google PageSpeed Insights te behalen. Of in elk geval om je weer een stapje dichter bij die score te brengen. 😉

Hoe belangrijk is Google PageSpeed Insights?

Google PageSpeed Insights is een door Google ontwikkelde tool die webprestaties meet. De tool biedt handvatten om je site sneller en mobielvriendelijker te maken door praktische aanbevelingen te doen.

Vanaf 2018 worden de snelheidsscores berekend met Lighthouse. Deze automatisch open-source tool is speciaal ontwikkeld om de kwaliteit van webpagina’s te bevorderen. Lighthouse meet tal van factoren, waaronder prestaties, toegankelijkheid, progressieve web-apps en nog veel meer.

Google PageSpeed Insights tool

Google PageSpeed Insights tool

Iets wat heel belangrijk is om te onthouden is dat je echter niet altijd geobsedeerd moet zijn om 100/100 te scoren. Dit is misschien niet eens in alle scenario’s mogelijk en het is afhankelijk van hoe jouw WordPress-site staat ingesteld. Met veel verschillende thema’s en sites met tientallen externe scripts is het bijna onmogelijk om een perfecte score te kunnen behalen. En dat is ook niet erg.

We raden aan om meer naar de daadwerkelijke snelheid van je site te kijken en minder naar de scores. De scores van tools zoals Pingdom, GTMetrix en Google PageSpeed Insights zijn namelijk soms misleidend. Wat er echt toe doet is zorgen dat je site snel laadt en dat de prestaties, zoals de gebruiker deze ervaart, ook in orde is. Deze ervaren prestaties is hoe snel je website aanvoelt voor de gebruiker wanneer deze laadt.

Als je meer wilt weten over hoe je de prestaties van websites kan optimaliseren, lees dan onze gedetailleerde, 25.000+ woorden-bevattende, handleiding waarin we precies uitleggen hoe je jouw WordPress-website razendsnel kan maken.

Gebruikt Google PageSpeed Insights?

Gebruikt Google PageSpeed Insights als het gaat om SEO de laadtijd van de pagina of de zuivere responssnelheid als een rankingfactor? Dit was een interessante vraag, die werd opgeworpen door een SEO bij FDP Group Leeds en werd besproken tijdens de Search Engine Roundtable. Gary Illyes, Webmaster Trends Analyst voor Google, antwoordde met te zeggen “Ik denk allebei”.

Dit is gedeeltelijk te wijten aan het feit dat in de meeste gevallen wanneer je een trage website hebt, je waarschijnlijk in Google PageSpeed Insights veel waarschuwingen zult ontvangen. Veel van die aanbevelingen gaan hand in hand met hoe ze zich verhouden tot jouw pure responstijden. Ze correleren niet altijd 100%, maar wat Gary waarschijnlijk bedoelt, is dat als je een langzame website hebt, ja, dit waarschijnlijk ook van invloed is op je ranking.

Google ging ook een stap verder in 2018. Voorheen werden paginarangschikkingen gemeten aan de hand van hoe snel je website op een desktop werd geladen. Maar vanaf 09 juli 2018 is paginasnelheid een rangordefactor voor mobiele zoekopdrachten. Dit betekent dat het optimaliseren van uw WordPress voor mobiel belangrijker is dan ooit!

100/100 scoren op zowel een gedeelde hosting als op Kinsta

We dachten dat het leuk zou zijn om het nieuwe Twenty Seventeen thema in WordPress 4.7 eens gaan te verkennen, want dit is het eerste standaard WordPress-thema dat op bedrijven in plaats van op een typische blog is gericht en dat is natuurlijk spannend! Dus vandaag laten we je zien hoe je die perfecte 100/100 op zowel desktop als op mobiel kunt scoren. We hebben veelgebruikte tools en diensten zoals Google Analytics, Akismet, Yoast SEO, enz. die veel WordPress-sites gebruiken geïnstalleerd. We hebben op zowel een goedkope gedeelde host als op Kinsta testen uitgevoerd om je te laten zien hoeveel verschil er kan zijn als het gaat om afgestemde Google Cloud hosting versus een gedeelde hostingomgeving.

Hoewel dit een kleine site is, is het een goede basis om op zijn minst een klein beetje te begrijpen hoe Google PageSpeed Insights werkt. Als je geïnteresseerd bent in een aantal optimalisaties voor een groter multifunctioneel thema, bekijk dan eens ons artikel over het optimaliseren van het totale WordPress thema.

Score van 100% op Google PageSpeed Insights

Score van 100% op Google PageSpeed Insights

100/100 in Google PageSpeed Insights met een gedeelde host

Onze eerste testsite hebben we WordPress 4.7 met het Twenty Seventeen Theme op een populaire goedkope gedeelde host (Apache) laten draaien. De SSL is geconfigureerd en de volgende plug-ins zijn geïnstalleerd:

  • Yoast SEO
  • Akismet

We laten binnen de <body> van ons header.php-bestand ook Google Analytics draaien. De enige wijziging, die we hebben aangebracht, is dat we een uitgelichte afbeelding hebben toegevoegd aan de standaard dummy “Hello world!” blogpost. We draaien onze testsite via Google PageSpeed Insights en uit het niets krijgen we een desktop-score van 69/100 en een mobiele score van 58/100. Dus hier moeten we zeker enkele verbeteringen gaan aanbrengen. Laten we elk van deze punten eens bekijken om te zien hoe we ze kunnen oplossen.

Score op Google PageSpeed Insights met een gedeelde host

Score op Google PageSpeed Insights met een gedeelde host

Enable Compression

We zullen eerst met de desktop beginnen omdat veel van die oplossingen ook van toepassing zijn op mobiel. De allereerste aanbeveling van Google PageSpeed Insights die we moeten corrigeren is de waarschuwing Enable Compression.

Enable Compression waarschuwing

Enable Compression waarschuwing

Volgens Google moeten we Gzip compression inschakelen om dit te kunnen op te lossen. Helaas heeft de gedeelde host dit niet al automatisch op hun servers ingeschakeld, dus we moeten het handmatig doen.

Alle moderne browsers ondersteunen en gebruiken automatisch de Gzip compressie voor alle HTTP-verzoeken. Het toestaan van de Gzip -compressie kan het formaat van de overgedragen respons tot 90% verminderen, wat de hoeveelheid tijd om de bron te downloaden aanzienlijk kan verlagen, het datagebruik voor de cliënt kan verminderen en de tijd tot het eerste renderen van je pagina’s kan verbeteren.

Er zijn een paar manieren waarop je dit kunt doen. De eerste en één van de gemakkelijkste manieren is door een caching plug-in te gebruiken,die het activeren van Gzip ondersteunt. WP Rocket voegt bijvoorbeeld met behulp van de mod_deflate-module de Gzip-compressie regels automatisch toe aan jouw .htaccess-bestand. W3 Total Cache heeft onder de sectie Performance ook een manier om dit voor je in te schakelen.

De tweede manier om Gzip-compressie in te schakelen, is door je .htaccess-bestand te bewerken. De meeste bedrijven die shared hosting aanbieden gebruiken Apache, waarin je eenvoudig de onderstaande code aan je .htaccess-bestand kunt toevoegen. Je kunt via FTP jouw .htaccess-bestand in de rootfolder van je WordPress-site vinden.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Zorg er wel voor dat je deze onder de huidige content van jouw .htaccess-bestand toevoegt. Bekijk hiervoor het voorbeeld hieronder:

Voeg de GZIP-compressiecode toe

Voeg de GZIP-compressiecode toe

Als je toevallig op NGINX draait, voeg je dit gewoon toe aan je nginx.conf-bestand.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Een tool zoals de Check Gzip Compression kan je laten zien hoeveel bytes je hebt bespaard door Gzip-compressie in te schakelen. Hier is een voorbeeld van wat we op onze testsite hebben bespaard.

Besparingen door GZIP-compressie

Besparingen door GZIP-compressie

Als we onze site opnieuw via Google PageSpeed Insights draaien, kunnen we zien dat de waarschuwing GZip-compression nu is verdwenen en dat onze desktopscore is gestegen van 69/100 naar 80/100 en onze mobiele score van 58/100 naar 67/100.

PageSpeed Insights na GZIP-compressie

PageSpeed Insights na GZIP-compressie

Optimaliseer afbeeldingen

De volgende aanbeveling van Google PageSpeed Insights die we moeten corrigeren, is de waarschuwing Optimize images. Onze standaard “Hello world!” blogpost heeft een uitgelichte afbeelding, die deze fout weergeeft.

Waarschuwing Optimize images

Waarschuwing Optimize images

Dit is een zeer belangrijke en nuttige waarschuwing. Volgens HTTP Archieve maken afbeeldingen vanaf november 2016 gemiddeld 65% van het totale gewicht van een webpagina uit. Het optimaliseren van jouw afbeeldingen kan één van de gemakkelijkste manieren zijn om bij jouw WordPress-website prestatieverbeteringen te kunnen zien.

Er zijn een aantal manieren waarop je dit kunt bewerkstelligen. De eerste is om een plug-in voor beeldoptimalisatie te gebruiken. Een plug-in kan jouw volledige WordPress mediabibliotheek doorlopen en in bulk optimaliseren en deze ook automatisch optimaliseren wanneer je ze uploadt. We hebben een hele handleiding geschreven over hoe je je WordPress afbeeldingen kunt optimaliseren. Hieronder staan enkele populaire plug-ins voor beeldoptimalisatie:

Die plug-ins zorgen dat het probleem wordt opgelost, maar je kunt de afbeeldingen voordat je ze uploadt ook comprimeren met een tool zoals Adobe Photoshop, Gimp of Affinity Photo. Hieronder staat de afbeelding waarvan je de waarschuwing hebt gezien. We kunnen de afbeelding op twee manieren van tevoren comprimeren: door deze zowel te verkleinen als door de kwaliteit te verlagen. Het is het beste om jouw afbeeldingen zo klein mogelijk te houden. Deze afbeelding was oorspronkelijk 2.32MB, maar na downscaling en compressie is deze nu 99.38kB. Vergeet niet dat het het beste is om afbeeldingen kleiner te uploaden en niet te vertrouwen op CSS om ze te verkleinen, want dit vertraagt namelijk jouw site.

Afbeeldingen comprimeren met Affinity Photo

Afbeeldingen comprimeren met Affinity Photo

Als we onze site opnieuw via Google PageSpeed Insights laten draaien, kunnen we zien dat de waarschuwing Optimize images nu is verdwenen en onze desktopscore is gestegen van 80/100 naar 88/100 en onze mobiele score van 67/100 naar 73/100. We boeken vooruitgang!

PageSpeed Insights na beeldcompressie

PageSpeed Insights na beeldcompressie

Elimineer Render-blocking in JavaScript en CSS in Above-the-fold Content

De volgende aanbeveling van Google PageSpeed Insights, die we moeten corrigeren, is de waarschuwing Eliminate Render-blocking in JavaScript en CSS in Above-the-fold Content. We hebben zelfs een diepgaande post over de problemen met render-blocking in JavaScript en in CSS.

Waarschuwing verwijder de Render-blocking in JavaScript en in CSS

Waarschuwing verwijder de Render-blocking in JavaScript en in CSS

Wanneer een browser een webpagina laadt, voorkomen JavaScript- en CSS-bronnen meestal dat de webpagina wordt weergegeven, totdat deze worden gedownload en door de browser worden verwerkt. Sommige bronnen moeten worden gedownload en worden verwerkt voordat ze iets kunnen weergeven. Veel CSS- en JavaScript-bronnen zijn echter voorwaardelijk, dat wil zeggen dat ze alleen in specifieke gevallen worden toegepast of zijn gewoon niet nodig om de above-the-fold content te renderen. Om de snelst mogelijke ervaring voor jouw gebruikers te kunnen produceren, moet je proberen om de bronnen voor render-blocking, die niet vereist zijn om above-the-fold content weer te geven, te verwijderen.

Wat betreft het Render-blocking in Javascript, heeft Google drie aanbevelingen:

  • Als je niet veel JavaScript hebt, kun je het inline plaatsen om van deze waarschuwing af te komen. Je kunt JavaScript met een plug-in zoals Autoptimize omzetten. Dit is echter echt alleen mogelijk voor zeer kleine sites. De meeste WordPress-sites beschikken over veel JavaScript, zodat dit je site zelfs zou kunnen vertragen.
  • De tweede mogelijkheid is om jouw JavaScript asynchroon te laden. Async Javascript downloadt het bestand tijdens het parsen van de HTML en pauzeert de HTML-parser om het uit te voeren wanneer het klaar is met downloaden.
  • De derde is om je JavaScript uit te stellen. De uitstel-tool downloadt het bestand ook tijdens HTML-parsing, maar het voert het alleen uit nadat de parsing al is voltooid. Ook worden met het gebruik van deze tool scripts in volgorde van weergave op de pagina uitgevoerd. Lees hier meer over de verschillen tussen async en uitstel.

In ons voorbeeld gaan we ons JavaScript asynchroon laden. Om dit te kunnen doen, gebruiken we een gratis plug-in genaamd Async JavaScript. Je kunt het downloaden van de WordPress-bibliotheek of door ernaar te zoeken op je WordPress-dashboard onder “Plugins > Add New”. Op dit moment heeft het momenteel meer dan 9.000 actieve installaties en een gemiddelde beoordeling van 4.2 uit 5 sterren. In essentie voegt de plug-in het kenmerk ‘async’ of ‘defer’ toe aan alle JavaScript content, die is geladen door de WordPress wp_enqueue_script-functie. De ontwikkelaar heeft ook een premiumversie beschikbaar waarmee je de scripts kunt kiezen, die je wilt asynchroniseren of wilt uitstellen.

Voorbeeld van Async

<script src="file1.js" async></script>

Voorbeeld van uitstel

<script src="file1.js" defer></script>

Ga na het installeren naar Settings en schakel Async JavaScript in.

async javascript

Async JavaScript

Ook voor grotere sites kan het uitsluiten van scripts handig zijn. Hierbij is de premium-versie van de plug-in erg handig. In dit voorbeeld hebben we het niet nodig, maar als je een site hebt met veel JavaScript content, zul je als je alles gewoon instelt op Async of Defer waarschijnlijk eindigen met dat dingen vastlopen. In dat geval zul je die problemen moeten oplossen door niet alle scripts asynchroon te laden.

Async uitsluitingen

Async uitsluitingen

Als je hiervoor geen plug-in wilt gebruiken, zijn er een paar andere alternatieven, zoals bijvoorbeeld het toevoegen van de volgende code aan jouw functions.php-bestand.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Hier zijn twee extra artikelen waarin wordt gesproken over het toevoegen van async of defer zonder een plug-in:

We draaien onze site opnieuw via Google PageSpeed Insights en zoals je ziet, is het Render-blocking in JavaScript nu opgelost en krijgen we de waarschuwing Optimize CSS delivery te zien.

Waarschuwing Optimize CSS delivery

Waarschuwing Optimize CSS delivery

Je kunt zien dat de eerste CSS die we moeten optimaliseren onze Google Fonts (fonts.googleapis.com) is. CSS gebruikt standaard render-blocking, waaronder CSS uit Web Fonts en om dit op te lossen gaan we de gratis plug-in voor het uitschakelen van Google Fonts installeren. De ontwikkelaar van de plug-in, Milan Dinić, heeft dit onlangs bijgewerkt om het nieuwe Twenty Seventeen Libre Franklin font toe te voegen. Na het installeren van de plug-in, zullen jouw Google fonts waarschijnlijk niet goed werken. Dus moet je naar Google Fonts gaan en de embed-code handmatig ophalen. We selecteren dezelfde fontformaten die standaard zijn opgenomen in het Twenty Seventeen-thema.

Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
google fonts embed

Google Fonts embed

Vervolgens moet je dit, vlak voor de </body> tag, toevoegen aan je footer.php-bestand. Opmerking: als je het op deze manier doet, krijg je FOUT, wat ze een flash noemen van niet-gestileerde tekst. Maar het zal ook het probleem van render-blocking oplossen. Je moet voor je eigen site beslissen of FOUT voor jouw bezoekers een acceptabele gebruikerservaring is. Je kunt ook Google’s Web Font Loader gebruiken.

Google font in WordPress footer

Google font in WordPress footer

We draaien onze testsite opnieuw via Google PageSpeed Insights en nu verschijnt de waarschuwing Optimize CSS Delivery, waardoor ons nog slechts één ding rest en dat is het style.css-bestand bekijken.

Waarschuwing optimaliseer CSS Delivery query strings

Waarschuwing optimaliseer CSS Delivery query strings

Eén van de gemakkelijkste manieren om dit te verhelpen, is om een gratis WordPress plug-in genaamd Autoptimize, die ontwikkeld is door Frank Goossens, te gebruiken.

Autoptimize WordPress plug-in

Autoptimize WordPress plug-in

Deze plug-in is vrij licht, slechts 176KB om precies te zijn. Op het moment van schrijven heeft het meer dan 400.000 actieve installaties en een gemiddelde beoordeling van 4,5 ster. De plug-in helpt je bij het samenvoegen van scripts, de minificatie, de aflooptijd van je headers en de mogelijkheid om stijlen naar je header en scripts naar je footer te kunnen verplaatsen. Deze plug-in is volledig compatibel met de Async JavaScript plug-in, die we al eerder gebruikten.

Na het installeren van de plug-in, klik je op Settings en selecteer je ‘Optimize CSS-code’. Klik vervolgens op het tabblad Advanced en schakel ook ‘Aggregate inline CSS’ en ‘Inline All CSS’ in. Let op, afhankelijk van het thema waarop je dit doet, wordt het misschien niet aanbevolen om deze methode te gebruiken. Voor grote sites kan inline minder geschikt zijn. In dat geval is het eigenlijk beter om die specifieke waarschuwing van Google PageSpeed Insights te negeren. En vergeet niet dat met behulp van HTTP/2, de aaneenschakeling jouw site soms kan vertragen.

Optimaliseer de CSS-code

Optimaliseer de CSS-code

We raden je ook aan om de optie HTML-code in te schakelen.

Optimaliseer de HTML-code

Optimaliseer de HTML-code

Als we onze site opnieuw via Google PageSpeed Insights laten draaien, kunnen we zien dat de waarschuwing Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content, nu volledig is verdwenen! Het herstelde ook de waarschuwing Minify CSS, die wat verderop stond en waar we nog niet aan toe waren gekomen. We hebben onze desktop score verhoogd van 88/100 naar 92/100 en onze mobiele score van 73/100 naar 89/100. We zijn er bijna.

PageSpeed Insights na JS en CSS-optimalisatie

PageSpeed Insights na JS en CSS-optimalisatie

Leverage Browser Caching

De volgende aanbeveling van Google PageSpeed Insights, die we moeten verhelpen, is de waarschuwing Leverage Browser Caching. We hebben zelfs een hele uitgebreide post over het item Leverage Browser Caching, omdat het betrekking heeft op WordPress.

Waarschuwing Leverage Browser Caching

Waarschuwing Leverage Browser Caching

De meest voorkomende reden waarom de waarschuwing Leverage Browser Caching wordt geactiveerd, is dat jouw webserver niet over de juiste headers beschikt. In de bovenstaande schermafbeelding kun je zien dat al onze interne scripts een vervaldatum hebben en geen gespecificeerde waarschuwing. Als het gaat om caching zijn er twee primaire methoden die worden gebruikt: Cache-Control headers en de Expires headers. Hoewel de header Cache-Control Caching aan de kant van de cliënt wordt ingeschakeld en het de maximum tijd van een bron instelt, wordt de header Expires gebruikt om een specifiek tijdstip op te geven, wanneer de bron niet langer meer geldig is.

Je hoeft niet noodzakelijk beide headers toe te voegen, omdat dit overbodig is. Cache-Control is nieuwer en meestal de aanbevolen methode, maar sommige webprestatie tools zoals GTmetrix controleren nog steeds op verlopen headers. Dit zijn allemaal voorbeelden en je kunt de bestandstypen, vervaltijden, enz veranderen. Wijzig dit op basis van jouw behoeften. Hieronder vind je enkele opties. We gaan voor dit artikel vervallen headers toevoegen in Apache op onze gedeelde host.

Cache-Control Header in Nginx toevoegen

Je kunt Cache-Control Headers in Nginx toevoegen door het volgende aan je server toe te voegen: de server config locatie of block.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Het toevoegen van Expires Headers in Nginx

Je kunt Expires headers in Nginx toevoegen door het volgende aan je serverblok toe te voegen. In dit voorbeeld kun je zien hoe de verschillende vervaltijden op basis van bestandstypen moeten worden opgegeven.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Cache-Control Headers in Apache toevoegen

Je kunt door het volgende toe te voegen aan jouw .htaccess-bestand Cache-Control Headers in Apache toevoegen.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"

Expires Headers toevoegen in Apache

Je kunt door het volgende toe te voegen aan jouw .htaccess-bestand Expires headers in Apache toevoegen.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Weet je nog dat we eerder Gzip-compressie hebben ingeschakeld? Hieronder zie je hoe ons .htaccess-bestand er nu uit ziet na het toevoegen van de Expires headers. We plaatsen het eenvoudig onder het Compression block.

Expire headers-code

Expire headers-code

We draaien onze testsite opnieuw via Google PageSpeed Insights en krijgen nu de waarschuwing Leverage Browser Caching , maar we blijven met één ding zitten en dat is het script van onze Google Analytics. Dit is nogal ironisch omdat dit het eigen script van Google is. Het probleem is, zoals te zien op de onderstaande schermafbeelding, dat ze een korte cache-tijd van 2 uur op hun item instellen. Ze doen dit waarschijnlijk omdat ze willen dat, als ze om wat voor reden dan ook iets aan hun kant willen wijzigen, alle gebruikers de wijzigingen zo snel mogelijk ontvangen. Er is echter een manier om dit te omzeilen en dat is door lokaal het Google Analytics-script te hosten. Houd er echter wel rekening mee dat dit niet wordt ondersteund door Google.

Leverage Browser Caching met Google Analytics

Leverage Browser Caching met Google Analytics

Er is een geweldige gratis kleine plugin, genaamd Complete Analytics Optimization Suite en die gemaakt en ontwikkeld is door Daan van den Bergh, waarmee je Google Analytics lokaal op jouw WordPress-website kunt hosten.

CAOS WordPress plug-in

CAOS WordPress plug-in

Je kunt Complete Analytics Optimization Suite uit de WordPress-repository downloaden of op jouw WordPress-dashboard ernaar zoeken onder “Add New” plug-ins. Op het moment van schrijven heeft de plug-in meer dan 10.000 actieve installaties en een 5-sterren beoordeling. Met de plug-in kun je jouw Google Analytics JavaScript-bestand (analytics.js) lokaal hosten en bijgewerkt houden met wp_cron (). Andere functies zijn onder meer het gemakkelijk kunnen anonimiseren van het IP-adres van jouw bezoekers, het instellen van een aangepast bouncepercentage en het plaatsen van het script (header of footer).

Installeer de plug-in, voer jouw tracking-ID voor Google Analytics in en de plug-in voegt de benodigde trackingcode voor Google Analytics toe aan jouw WordPress-website, download het en sla het analytics.js-bestand op jouw server op en houdt het met een gepland script in wp_cron ( ) bijgewerkt. We raden je aan om deze ook in te stellen om de footer te laden. Opmerking: deze plug-in is niet compatibel met andere WordPress-plug-ins van Google Analytics.

Lokale Google Analytics

Lokale Google Analytics

Als we onze site opnieuw via Google PageSpeed Insights laten draaien, kunnen we zien dat de waarschuwing Leverage Browser Caching nu helemaal weg is! En we hebben onze desktopscore verhoogd van 92/100 naar 97/100 en onze mobiele score van 89/100 naar 96/100. We zijn nu echt heel dichtbij.

PageSpeed Insights na het herstellen van leverage browser caching

PageSpeed Insights na het herstellen van leverage browser caching

Verlaag de responstijd van de server

De volgende aanbeveling van Google PageSpeed Insights, die we moeten verhelpen, is de waarschuwing Reduce server response time. Deze waarschuwing verschijnt vaak wanneer iemand een goedkoop gedeeld/shared hostingplan heeft. De server is niet snel en Google weet dat. Dus om dit te verhelpen, moeten we een vorm van caching implementeren om dingen te kunnen versnellen. Er zijn hiervoor veel geweldige caching plug-ins beschikbaar. In ons voorbeeld gebruiken we de gratis Cache Enabler plug-in van het team van KeyCDN.

Cache Enabler WordPress plug-in

Cache Enabler WordPress plug-in

Vanaf het moment dat dit geschreven is, heeft deze Cache Enabler meer dan 30.000 actieve installaties en een beoordeling van gemiddeld 4,6 ster. Het is een lichte caching plug-in voor WordPress, die jouw website door het genereren van statische HTML-bestanden plus WebP-ondersteuning sneller maakt. Er zijn geen instellingen om in te schakelen, je kunt het gewoon installeren en het is klaar om te gebruiken. Deze plug-in is volledig compatibel met de Async JavaScript en Autoptimize plug-ins, die al eerder werden gebruikt. Als je nog meer snelheid wilt, raden we je aan om advanced snippet toe te voegen om PHP te omzeilen.

Als we onze site opnieuw via Google PageSpeed Insights laten draaien, kunnen we zien dat de waarschuwing Reduce server response time nu helemaal weg is! En we hebben ook onze desktopscore verhoogd van 97/100 naar 99/100 en onze mobiele score van 96/100 naar 99/100. We staan op het punt om de finishlijn te overschrijden.

PageSpeed Insights na het herstellen van de responstijd

PageSpeed Insights na het herstellen van de responstijd

Doorgaans zie je hier bij Kinsta niet de aanbeveling “Reduce server response time”. Maar het is wel belangrijk om op te merken dat er tientallen potentiële factoren zijn, die de respons van jouw server kunnen vertragen, zoals bijvoorbeeld trage database queries van plug-ins, frameworks, libraries, uitputting van CPU-bronnen of gebrek aan geheugen. We gebruiken New Relic om klanten te helpen om beter te kunnen bepalen waar dit vandaan komt.

Minify JavaScript

De laatste aanbeveling van Google PageSpeed Insights, die we nog moeten corrigeren, is de waarschuwing Minify JavaScript.

Minify JavaScript waarschuwing

Minify JavaScript waarschuwing

Om dit op te lossen, gaan we eigenlijk terug naar de Autoptimize plug-in Settings en we schakelen de optie Optimize JavaScript Code in. Omdat je nu een caching plug-in laat draaien, moet je, om de resultaten te kunnen zien, misschien ook nadat je dit hebt gedaan je cache leegmaken.

Optimaliseer de JavaScript-code

Optimaliseer de JavaScript-code

En dat is het! We hebben nu met succes het WordPress Twenty Seventeen-thema op zowel mobiel als op desktop met een goedkope gedeelde host van 69/100 naar 100/100 gebracht.

100/100 score op Google PageSpeed Insights

100/100 score op Google PageSpeed Insights

Dit zijn de mobiele scores. We hoefden niets extra’s voor mobiel te doen. Door de desktopversie op 100/100 te krijgen, werden onze scores voor de mobiele versie en de gebruikerservaringen ook automatisch verhoogd naar 100/100.

100/100 score voor mobiel op Google PageSpeed Insights

100/100 score voor mobiel op Google PageSpeed Insights

We hebben ook een vóór en na met de snelheidstests van Pingdom.

Vóór de snelheidsoptimalisatie test van PageSpeed Insights

Hier is een snelheidstest van Pingdom voordat er optimalisaties werden uitgevoerd op de gedeelde host.

Snelheidstest voor optimalisatie van PageSpeed

Snelheidstest voor optimalisatie van PageSpeed

Na de snelheidsoptimalisatie test van PageSpeed Insights

Hier is een snelheidstest van Pingdom nadat optimalisaties zijn uitgevoerd op de gedeelde host.

Snelheidstest na de optimalisatie op PageSpeed

Snelheidstest na de optimalisatie op PageSpeed

100/100 in Google PageSpeed Insights met Kinsta

Onze tweede testsite is op exact dezelfde manier geconfigureerd als de eerste. Het is alleen op een ander domein. We hebben WordPress 4.7 met het Twenty Seventeen Theme op onze Kinsta-servers (NGINX) laten draaien. De SSL is geconfigureerd en de volgende plug-ins zijn geïnstalleerd.

  • Yoast SEO
  • Akismet

We hebben Google Analytics binnen de <body> van ons header.php-bestand draaien. De enige wijziging, die we hebben aangebracht, is dat we een uitgelichte afbeelding hebben toegevoegd aan de standaard dummy “Hello world!” Blogpost. We draaien onze testsite via Google PageSpeed Insights en plotseling krijgen we een desktopscore van 73/100 en een mobiele score van 63/100. Het is belangrijk op te merken dat er in vergelijking met de testsite van de shared hosting (zie hierboven) er veel waarschuwingen zijn die automatisch worden opgelost, zoals:

  • Enable Compression (Kinsta heeft Gzip al op alle servers geactiveerd, niet nodig om in te schakelen)
  • Reduce server response time (Kinsta is al razendsnel, al ruim binnen de acceptabele parameters van Google zonder enige optimalisatie)
  • Expires Headers (Niet nodig om in te schakelen omdat Kinsta op serverniveau caching-headers heeft ingeschakeld)
PageSpeed Insights met beheerde WordPress-host

PageSpeed Insights met beheerde WordPress-host

Op Kinsta hoef je slechts enkele van dezelfde aanbevelingen volgen als voorheen:

Het kostte ons minder dan de helft van de tijd om onze site op Kinsta naar een score van 100/100 te krijgen, omdat er eenvoudigweg minder stappen waren om mee te beginnen.

100/100 score op PageSpeed Insights met Kinsta

100/100 score op PageSpeed Insights met Kinsta

Dit zijn de mobiele scores.

100/100 score voor mobiel met Kinsta op PageSpeed Insights

100/100 score voor mobiel met Kinsta op PageSpeed Insights

We hebben ook een vóór en na met snelheidstesten van Pingdom.

Vóór de snelheidsoptimalisatie test van PageSpeed Insights

Hier is een snelheidstest van Pingdom voordat er op Kinsta optimalisaties werden uitgevoerd. Merk op dat de niet-geoptimaliseerde site op Kinsta meer dan 200ms sneller was dan de geoptimaliseerde site van de gedeelde host!

Snelheidtest voor de optimalisatie van PageSpeed

Snelheidtest voor de optimalisatie van PageSpeed

Na de snelheidsoptimalisatie test van PageSpeed Insights

Hier is een snelheidstest van Pingdom nadat optimalisaties op Kinsta werden uitgevoerd.

Snelheidstest na optimalisatie in PageSpeed

Snelheidstest na optimalisatie in PageSpeed

Aanvullende verbeteringen van PageSpeed

In de handleiding laten we je zien hoe je voor Google PageSpeed Insights kunt optimaliseren. Sterker nog, we hadden het resultaat wat betreft de laadtijden nog verbluffender kunnen maken als we ook het volgende hadden gedaan:

En natuurlijk hebben we veel nog meer geweldige aanvullende tips in onze beginnershandleiding voor de optimalisatie van de websnelheid.

Samenvatting

Het doel van dit artikel was om uit te leggen wat de waarschuwingen in Google PageSpeed Insights betekenen en wat je kunt doen om ze te herstellen. Zodra je dit proces beter begrijpt, kun je enkele van deze strategieën op je (grotere) sites toepassen. Natuurlijk zul je met grote sites waarschijnlijk nooit die perfecte 100/100 kunnen behalen (of als het je wel lukt, zal het je de nodige inspanning kosten). Maar dit is helemaal geen ramp! We raden je aan om te implementeren wat je kunt en dan zul je hoogstwaarschijnlijk verbeteringen in je snelheid zien. Vergeet niet dat de snelheid en eigenlijke prestaties van je site – en niet een externe score – er echt toe doen. Maak je niet te druk over de scores.

Het is als het gaat om gedeelde hosting en de perfect afgestemde WordPress-omgeving Kinsta ook belangrijk om de verschillen hierboven op te merken. We hebben na optimalisatie veel meer mogelijkheden dan de meeste andere aanbieders van shared hosting. Je moet je afvragen: hoeveel is je tijd je echt waard? Als je snel resultaten wilt zien, kan de beheerde hosting-omgeving van Kinsta je daarbij helpen.

De volgende keer dat een klant je vraagt om zijn scores te verbeteren, heb je nu de allernieuwste tips voor hoe je dat moet doen. En als we iets belangrijks over het hoofd hebben gezien, laat het ons dan hieronder weten! We gaan in de nabije toekomst een grootschaligere casestudy met Google PageSpeed Insights uitvoeren. Zorg dat je deze niet mist!

77
keer gedeeld