Een complete gids over Pagespeed en Google

Het is geen geheim meer, dat Pagespeed en Google veel met elkaar gemeen hebben. Wil je bijvoorbeeld een betere User Experience, dan zal je moeten werken aan een betere website of paginasnelheid. Dit zal ook moeten resulteren in betere kwaliteitsscores voor Google Ads, hogere conversieratio’s en betere SEO- posities.

Het is goed om te weten, dat PageSpeed ook een onderdeel is van de Google ranking factor. Dit is ook de reden waarom men het eerder heeft over Google PageSpeed.

Wil je dus een verbeterde gebruikerservaring (UX) oftewel Page Experience, dan zal je moeten werken aan een aantal zaken. In ieder geval moet het voor gebruikers mogelijk zijn om je website niet alleen via een desktop te benaderen, maar ook via een mobiel. Er moet dus sprake zijn van optimalisatie voor mobiel browsen.

Daarnaast moeten gebruikers ook kunnen rekenen, dat zij veilig kunnen browsen. Je website zal dus geen misleidende of kwaadaardige content mogen bevatten. Denk maar aan zaken als malware en Phishing. Je webpagina’s zullen in dit kader alleen te zien zijn via een beveiligde https- connectie.

Voor een verbeterde UX is het ook van belang om een website met webpagina’s te hebben waar de gebruiker niet op het hele scherm pop- ups te zien krijgt als ze je website bezoeken. Je website zal dus een goede gebruikservaring moeten bieden.

Je zal daarbij moeten letten op de snelheid waarmee je website te benaderen is, visuele stabiliteit en je zal ook de interactiviteit in de gaten moeten houden. Voldoet je website aan al deze elementen, dan is de kans groot dat je website een hoge score van Google zal behalen.

In dit artikel

Google PageSpeed Insights Nader Bekeken

Heb je al ooit van de Google PageSpeed Insights tool gehoord of maak je er al gebruik van? Met deze tool krijg je een scala aan data, metrics en diverse cijfers/ scores ter beschikking.

In dit gedeelte van het artikel kom je onder andere te weten wat de Google PageSpeed Insights tool inhoudt. Het belangrijkste is dat je deze tool het best alleen kunt gebruiken om de laadtijd van je website te berekenen en of te analyseren.

Google PageSpeed Score vs Laadtijd

Het is voor websitebouwers natuurlijk interessant om te weten wat de relatie is tussen de Google PageSpeed Scores en Laadtijd. In ieder geval worden beide termen vaak geassocieerd met de snelheid van een website.

Deze associatie is echter niet correct. Beide termen hebben ook twee verschillende betekenissen. Het is goed om te weten, dat Google Pagespeed Insights niets te maken heeft met het meten van de laadtijd van je website. Dit is belangrijk om te vermelden omdat veel mensen dat juist niet weten en denken dat het alles te maken heeft met de laadtijd van websites.

PageSpeed Insights geeft je een score tussen 0 en 100 en de laadtijd wordt uitgedrukt in (milli)seconden. Het laatste geeft dus ook inderdaad de juiste laadtijd weer.

PageSpeed Insights Score

Het is goed om te weten, dat de Google PageSpeed Score niet de juiste laadtijd weergeeft. Het geeft je slechts een score welke ligt tussen 0 en 100. Score je dus dicht bij 100 of 100 dan betekent het, dat je website een prima laadtijd heeft in vergelijking met andere websites. De tool analyseert een aantal performance metrics van je website om je een score te kunnen geven.

Laadtijd

De laadtijd geeft je namelijk een indicatie hoe lang het duurt voordat een webpagina laadt. In dit geval gaat het dus niet om een score zoals dat het geval is bij de Google PageSpeed. Het gaat dus om de werkelijke tijd en wordt uitgedrukt in (milli)seconden.

Het resultaat wordt berekend vanaf het moment dat de website aan het laden is totdat het laden voltooid is. Door de laadtijd te berekenen kan je te weten komen of je website met snelheidsproblemen te maken heeft en natuurlijk hoe je dit tot het verleden kan laten behoren.

De Google PageSpeed Score kan handig zijn. Je zou het echter niet als enige tool moeten gebruiken om de performance van je website te meten.

Mobiele apparaten

Als je de performance van je website wil nagaan, dan kan je gebruik maken van de Google PageSpeed Insights tool. Je zou dan de specifieke url van de website moeten ingeven. Hierdoor kan je dan de PageSpeed van je website beheren.

De Google PageSpeed Insights tool zal je op gegeven moment voorzien van twee score:

• Een van de scores zal betrekking hebben op de mobiele versie van je website welke dus alleen benaderd kan worden via mobiele apparaten.
• De andere scores zal dan betrekking hebben op de desktop versie van je website.

Het eerste wat je zal opvallen is dat de scores vaak genoeg niet hetzelfde zijn en in sommige gevallen zelfs enorm van elkaar verschillen. Hoe komt het dat de scores van de mobiele en desktop versie zo van elkaar verschillen?

Scores voor de mobiele versie

De Google PageSpeed Insights Tool baseert de scores op een 4G mobiele internet verbinding. Echter wordt er in vele delen van de wereld nog steeds gebruik gemaakt van een 3G internet verbinding. Dit zorgt ervoor, dat het erop wil lijken dat de website qua performance aan de lage kant is, maar dat in werkelijkheid de internetverbinding gewoon aan de langzame kant is.

Scores voor de desktop versie

Over het algemeen zal de score van de Google PageSpeed Insights tool voor de desktop versie van een website of webpagina veel hoger liggen dan dat van de mobiele versie. Het verschil ligt in de verbinding.

Dit maakt dat de scores van deze tool niet altijd betrouwbaar zijn. Dit is dan ook de reden waarom het sterk aan te bevelen is om andere performance gerelateerde tools te gebruiken. Denk bijvoorbeeld aan de Google Test My Site Tool.

Het verschil tussen Field Data en Lab Data

Bij het berekenen van de performance van je website zal je merken, dat er gebruik wordt gemaakt van field data alsook lab data. Deze twee vormen van data verschillen echter van elkaar.

De Google PageSpeed Tool maakt over het algemeen van beide data soorten gebruik om de performance van een website en of webpagina te calculeren. Het is uiteraard van belang om te weten hoe je deze informatie en of de scores welke je als resultaat krijgt moet interpreteren.

In beide gevallen wordt er in ieder geval met drie verschillende kleuren gewerkt. Dit systeem wordt ook wel gerelateerd aan de kleuren van een verkeerslicht. Krijg je de kleur rood te zien, dan heb je een lage score welke dan zal liggen tussen 0 en 49.

Heb je een score tussen 50 en 89, dan krijg je een oranje kleur te zien. Doet je website het goed qua performance, dan zal je een groene kleur te zien krijgen. Dit laatste betekent, dat je website een hogere score heeft welke ligt tussen 90 en 100.

Field Data en het Chrome User Experience Report

Om je field data te verkrijgen heb je het Chrome Ux Report nodig. De naam geeft het eigenlijk al aan, je krijgt dus data te zien welke betrekking heeft op de echte wereld. Google komt via de Google Chrome Browser data aan deze informatie.

Field Data geeft je dus een indicatie van wat de performance van je webpagina is geweest gedurende een periode van 30 dagen. Het kan ook zo zijn, dat het rapport je aangeeft dat niet te zien is dat je gebruik maakt van de Google PageSpeed Insights tool. Dit kan het gevolg zijn van te weinig beschikbare field data.

Field data kun je onder andere meten met tools als de Chrome User Experience Report of de Google PageSpeed Insights tool.

Wat houdt Lab Data in?

Lab data is niets anders dan data welke afkomstig is uit het laboratorium. Deze data is vooral gebaseerd op de resultaten van een nagebouwde apparaat met connectie. Denk aan de zogenaamde lighthouse en een emulator. Deze data is dus niet hetzelfde als de field data. Het gaat dus niet om data van echte gebruikers, maar van fictieve gebruikers.

Lighthouse maakt vooral gebruik van een normale internetconnectie om webpagina’s te bestuderen. Dit heeft als doel om betrouwbare en realistische informatie te verkrijgen. Je kunt natuurlijk verschillende manieren bedenken om de verbinding te beperken.

De Google PageSpeed Insights tool zal bijvoorbeeld de pagina zonder enige vorm van beperking uploaden. Vervolgens zal er gesimuleerd worden hoe de webpagina wordt geladen bij een langzamere internet verbinding.

Er kunnen verschillende redenen waarom men gebruik maakt van Lab data. Het kan dat er onvoldoende field data beschikbaar is of om technische problemen op te sporen. Web developers hebben dan lab data en de PageSpeed score nodig om problemen op te lossen en de prestaties van websites te verbeteren.

Het verschil tussen PageSpeed Insights en LightHouse

Het is goed om te weten dat zowel PageSpeed Insights alsook Lighthouse onderdeel zijn van Google. Echter zijn er ook een aantal verschillen. Het grootste verschil is dat de Google PageSpeed Insights tool voornamelijk prestatiescores meet.

De metingen zijn vooral gebaseerd op verkregen field data uit het Chrome Gebruikerservaring Rapport. Er wordt verder ook gebruik gemaakt van lab data. Lighthouse echter maakt in tegenstelling tot PageSpeed Insights alleen gebruik van Lab Data.

Is een Google PageSpeed Insights score van 100/100 mogelijk?

Alle webmasters, website eigenaren of ontwikkelaars van websites willen natuurlijk zo snel als mogelijk hun url invoeren om te weten welke score ze behalen in de Google PageSpeed Insights tool. De meeste personen streven daarbij een score van 100/100 na.

De vraag is natuurlijk of het ook mogelijk is om een dergelijke score neer te zetten. Ze hebben hun website geoptimaliseerd of ze optimaliseren afbeeldingen om een goede performance score neer te zetten.

Dit is echter nooit de achterliggende gedachte geweest bij het ontwikkelen van PageSpeed Insights. Het is daarnaast niet handig om steeds stappen te ondernemen om een 100/100 score neer te zetten. Er zijn natuurlijk manieren om een hoge performance score neer te zetten en die zullen ook in de vervolg subparagrafen aan de orde komen.

Het belang van een 100/100 PageSpeed Insights score

Het hebben van een hogere score is eigenlijk niet super belangrijk. Het geeft je alleen een indicatie of je al dan niet in het bezit bent van een supersnelle website. Je zal ook merken, dat er vrijwel geen website is, die een score van 100 heeft. Ook niet de websites van Google zelf. Een PageSpeed Insights score is dus minder belangrijk dan de werkelijke snelheid van een website.

Er zijn supersnelle websites die een laadtijd hebben van minder als 500 milliseconden en toch geen 100/100 score behalen. Je moet je voorstellen dat een snelheid van 500 milliseconden behoorlijk snel is. Wat natuurlijk wel erg belangrijk is, is wat gebruikers te zeggen hebben over de snelheid van je website.

Je performance score welke je krijgt van PageSpeed Insights is in mindere mate van belang voor gebruikers. Zij willen alleen de mogelijkheid hebben om zo snel als mogelijk de geplaatste inhoud van je website te benaderen.

De Google Pagespeed Insights test heeft dus als voornaamste doel om problemen te identificeren op je website welke betrekking hebben op de snelheid van je website en in mindere mate of je nu een hoge score behaalt of niet.

Hoe kan je de prestatie van je website verbeteren?

Er zijn namelijk een aantal manieren waarop je ervoor kan zorgen voor het sneller laden van je website. Hieronder krijg je een overzicht van de stappen welke je kunt ondernemen om de performance van je website te verbeteren.

Een Solide Hosting Basis

Hoewel het resultaat van de PageSpeed Insights tool niet helemaal overeenkomt met de werkelijkheid wil dat echter nog niet zeggen, dat je absoluut niets hoeft te doen aan de verbetering van de snelheid van je website. Het is nog steeds van belang om een solide hosting basis te hebben.

Dit kun je alleen hebben als je gebruik maakt van een goede en betrouwbare webhosting. Je moet weten dat elke website delen bevat, die kunnen bijdragen aan het verlengen van de laadtijd van de site. Ook kun je de performance van de site vergroten door het gebruik van shared hosting te staken. Het is niet raadzaam om een server te delen met anderen. Vooral niet als je werkt aan het sneller laden van je website.

Content boven de vouw

Bezoekers van de verschillende website krijgen altijd als eerst een deel van je website te zien. Dit gedeelte van je website welke aan de bovenzijde te zien is en waar er niet naar beneden gescrold hoeft te worden. Dit wordt ook wel gekwalificeerd als content boven de vouw.

Google heeft als policy om gebruikers de mogelijkheid te bieden direct aan de slag te gaan op websites. Dit is dan ook de reden waarom voorrang gegeven wordt aan content boven de vouw.

Het is dus van belang om aandacht te besteden aan de opbouw van je website. Ga na hoe de html van je website is opgebouwd en zorg ervoor, dat de juiste data boven de vouw geladen wordt. Je kunt ook een thema kiezen voor je website welke in ieder geval het doel van content boven de vouw realiseert.

Verklein Code

Het is van eminent belang om codes zoveel als mogelijk te verkleinen. Het is goed om te weten dat Google over het algemeen compacte websites zeer waardeert.

Dit betekent echter niet, dat je een website in elkaar moet zetten welke zeer eenvoudig is en bestaat uit een witte vlak met menu en tekst. Je zou er wel goed aan doen om alle onnodige codes zo veel als mogelijk weg te werken. Hoe compacter de codes hoe beter de performance van je website qua oplaadsnelheid en meer.

Je kunt programmeurs ook aan het werk zetten om de CSS, HTML en JavaScript op je site te analyseren en waar nodig te verbeteren. Laat daarbij zoveel als mogelijk overbodige witregels en nieuwe regels verwijderen. Denk ook aan overtollig opmaak of onderdelen in de code waarvan geen gebruik meer wordt gemaakt.

Browser Caching implementeren

Wist je dat je browser bij elke website welke je bezoekt delen van die desbetreffende website opslaat in je lokale cache? Je kunt in dit geval onder andere denken aan javascript en afbeeldingen.

Bij een volgend bezoekje aan de site heeft je browser de site eigenlijk al opgeslagen. Hierdoor wordt de website welke je bezoekt bij elk volgend bezoek sneller geladen. Dit moet echter wel aangevinkt staan in de instellingen.

Het is echter niet zo eenvoudig om iets als browser caching in te stellen. Ben je in het bezit van een WordPress-website? Dan kun je deze optie instellen via plug-ins. Denk maar aan de W3 Total Cache of WP Rocket.

Optimaliseer afbeeldingen

Een van de meest bekende adviezen is om je afbeeldingen te optimaliseren. Afbeeldingen zijn belangrijk voor een website en bieden je ook de mogelijkheid om voldoende winsten mee te halen.

Je hoeft afbeeldingen dus niet te verwijderen, maar verklein ze wel zo snel als mogelijk. Je kunt bijvoorbeeld werken met de zogenaamde foto compressor tools. Daarnaast is het zo dat foto’s welke opgeslagen zijn als jpg bestand over het algemeen kleiner zijn dan de foto’s welke zijn opgeslagen als png- bestand.

Bij het verkleinen van de afbeeldingen dien je erop te letten, dat de foto’s niet kleiner als 100 kb worden. Anders zullen gebruikers die foto’s niet goed in beeld te zien krijgen bij fullscreen. Optimalisatie van afbeeldingen kan resulteren in pagespeed test score van plus 50 punten.

Het verkleinen van bestanden

Naast het verkleinen van afbeeldingen kun je ook werken aan het verkleinen van bestanden. Websites bestaan uit verschillende bestanden. Dit zal niet veel verschillen met jouw website.

Het probleem is dat sommige van die bestanden erg groot zijn en dus veel ruimte in beslag nemen. Een browser stuur voor het laden van bestanden elke keer een verzoek naar de server van de site.

Bij grote bestanden moet je browser veel meer tijd erover doen om een verzoek in te dienen en de bestanden te laden. Het verlagen van de grote van de bestanden kan ervoor zorgen dat onderlinge communicatie tussen de server en de browser veel sneller verloopt en dat je website dus ook veel sneller geladen kan worden.

Render Blocking verwijderen

Websites bestaan namelijk uit een aantal onderdelen, die gebruikers en of bezoekers niet boeien. Het is echter wel van belang, dat deze onderdelen ingeladen worden. Denk in dit geval maar aan CSS, bepaalde (Java)Scripts, zoals Google Analytics en veel meer. Voor het beter functioneren van je website heb je dit nodig.

Een optie is om bepaalde van de CSS- en JavaScripts-bestanden te laten laden. Je kunt ze dan in de -tag plaatsen. Aan Google Analytics hebben gebruikers niet zoveel. Deze zou je bijvoorbeeld in de footer kunnen plaatsen.

Het gaat in deze meer om een tool om bijvoorbeeld statistieken van de site te meten. Het kan dus alleen voor vertraging van je website zorgen. Je kunt er ook voor zorgen, dat de Css en javascript welke betrekking hebben op de site en de gebruiker als eerste worden geladen. De overige kunnen dan daarna volgen. Dit proces wordt dan render blocking genoemd.

Verwijder Bronnen & het gebruik van plug ins

Een van de goede aanbevelingen met betrekking tot Pagespeed Insights is het verwijderen van bronnen, die de weergave blokkeren van je website. Deze aanbeveling heeft vooral betrekking op de CSS scripts en javascript, die voor vertraging kunnen zorgen bij het laden van je website of delen daarvan.

Webbrowsers moeten op verzoek de scripts eerst downloaden en verwerken voordat de rest van de pagina geladen wordt. Hier komt het aspect van content boven de vouw weer aan de orde. Je zou het best de minder belangrijke scripts van de content boven de vouw kunnen halen omdat een te veel hiervan kan zorgen voor vertraging van het laden van je website.

Heb je een beperkt aantal javascripts of Css scripts, dan zouden ze inline geplaatst kunnen worden. Je neemt ze dus op in je html bestand. Dit kan geregeld worden middels een plug in.

Let wel! Dit kan je alleen doen op kleine websites. WordPress websites hebben over het algemeen te veel javascripts waardoor deze methode zelfs voor vertraging van de site kan zorgen.

CSS- en javaScripts verkleinen

Om de PageSpeed Insights score te beïnvloeden kan je ook de CSS scripts verkleinen. Vaak genoeg zijn de bestanden van deze script aan de grote kant. Dit voor het leesgemak van de gebruikers. Deze bevatten meestal een regelterugloop en spaties. Ontwikkelaars werken hier graag mee, maar voor een website is dit niet relevant.

Je kunt dus de Css Script verkleinen door tekens, spaties als duplicaten, die niet nodig zijn te verwijderen. Naast het verkleinen van je CSS scripts kan je ook de javascripts van je website verkleinen.

CSS Verwijderen

Je zal merken, dat niet elke CSS script gebruikt wordt om de website te laden. Het handige is dat je dan ook de ongebruikte css scripts verwijdert van de site. Dit zal dan resulteren in een betere prestatie qua snelheid van je website.

Het minimaliseren van Primaire Thread Bewerkingen

De Primaire Thread Bewerkingen zijn een vast onderdeel van de webbrowser van gebruikers. Deze bewerkingen zorgen ervoor, dat de code van de pagina wordt omgezet in de werkelijke webpagina welke de gebruiker te zien krijgt. Dit wordt gedaan met behulp van de html, css en javascripts. Het heeft ook betrekking op de interacties van gebruikers.

Een nadeel is dat terwijl de code omgezet wordt voor gebruikers, de mogelijkheid niet bestaat om op dat moment ook tegelijkertijd binnengekomen verzoeken van gebruikers te verwerken.

Als de primaire thread dus een aantal opdrachten binnen krijgt, kan het op gegeven moment zorgen voor een slechte gebruikerservaring. Het zal ook leiden tot het traag laden van websites en of delen daarvan.

Dit zorgt er ook voor dat de scores van de Pagespeed insights test aan de lagere kant zal zijn. Het beste is dus dat je de primaire thread bewerkingen zoveel als mogelijk minimaliseert. Je kunt je code bijvoorbeeld verkleinen, codes welke je niet gebruikt verwijderen en je kunt caching implementeren.

Code Splitting is ook een optie. Je javascript wordt dan in een aantal delen verdeeld en kan op die manier beter verwerkt worden bij het laden van een website.

Serverreactietijden beperken

Een andere optie om een betere pagespeed insights testscore neer te zetten is door de serverreactietijden te beperken. Middels de Time to First Byte oftewel TTFB wordt de serverreactietijd gemeten. Hoe lager je TTFB hoe beter. Dit kan er alleen voor zorgen, dat je website zeer snel geladen kan worden.

Er zijn een aantal manieren die je kunnen helpen om de serverreactietijden te beperken. Allereerst zou je een goede webhostingprovider kunnen kiezen en je zou verder minder zware thema’s en plug ins kunnen gebruiken.

Verder is het raadzaam om het aantal geïnstalleerde plug ins op je site te verminderen en een content delivery network te gebruiken. Ook browsercaching implementatie en het kiezen van een solide DNS kan voor een lage serverreactietijd zorgen.

Afbeeldingen niet vroegtijdig laden

Ben je bekend met de term ‘lazy loading’? Het heeft onder andere betrekking op het uitstellen van off- screen afbeeldingen, dus afbeeldingen die nog niet te zien zijn.

Bij het bouwen van je website zorg je er dan voor, dat alleen de afbeeldingen welke zichtbaar zijn ook direct geladen worden en dus niet alles tegelijkertijd. Tijdens het scrollen worden de andere afbeeldingen, die dan in beeld komen geladen. Men spreekt ook wel van on demand laden van afbeeldingen.

Je zal ook merken, dat hoe minder er geladen moet worden hoe beter het resultaat in de Pagespeed Insights test zal zijn. Het is goed om te weten, dat er onder andere WordPress- plug ins ter beschikking zijn om lazy loading mogelijk te maken.

Het gebruik van een video indeling

Om een betere resultaat te genereren met betrekking tot de Pagespeed test is het van belang, dat er een video indeling wordt gemaakt voor content met animaties. Je kunt in dit geval vooral denken aan content in de vorm van GIF’s. Deze worden ook wel gekwalificeerd als de effectieve vorm van visuele content.

Deze GIF’s kunnen onder diverse omstandigheden gebruikt worden. Er zijn niet alleen humoristische animaties, maar ook animaties voor tutorials, beoordelingen en meer. Ze stellen je in staat om verbeterde, aangenamere en waardevollere artikelen te plaatsen voor de gebruikers op je website.

Nadelen GIF’s

Het mindere van GIF’s is dat ze tijdrovend zijn. De GIF’s zijn namelijk moeilijk om te zetten naar video- formaat. Dit is de reden waarom PageSpeed Insights aanbeveelt om in plaats daarvan video-content te plaatsen. Je dient natuurlijk eerst na te gaan welke video content je zal gebruiken.

Je hebt de mogelijkheid om MP4 bestanden of WebM. MP4 bevat echter grotere bestanden, maar zijn wel goed te gebruiken op grotere webbrowsers. WebM bevat het ideale videoformat, maar is qua browsercompatibiliteit zeer beperkt.

GIF’s zijn namelijk een beetje anders dan normale video’s. Deze spelen meestal vanzelf af. GIF’s zijn geluidloos en als toevallig je nieuwe MP4 of WebM bestand op je WordPress website insluit, dan kun je geen gebruik meer maken van die optie.

Pagina- omleidingen vermijden

Heb je bij het bouwen van je website gebruik gemaakt van omleidingen? Heb je ervoor gezorgd, dat de ene url op gegeven moment naar een andere verwijst? Op zich is hier niets mis mee.

Een te veel aan omleidingen zal er echter voor zorgen, dat er extra tijd nodig zal zijn om de website te laden. Je krijgt dus te maken met de vertraging van de laadtijd en daarmede een lagere Pagespeed Insights resultaat.

Je kunt dit probleem verhelpen door alleen omleidingen te gebruiken, die noodzakelijk zijn en dus niet weggelaten kunnen worden.