SEO: Haal 100% score in Google Pagespeed Insights

Bezig met SEO? Vergeet dan niet dat de snelheid van je website één van de ruim 200 ranking factoren is van je website. Het lijkt lastig om die 100% score te behalen maar het is mogelijk. Met dit stappenplan haal ook jij een 100% score in Google Pagespeed Insight.

Denk er zelf maar eens over na, een website die traag laad verlaat je al snel om op zoek te gaan naar een website die minstens dezelfde kwaliteit aan informatie biedt maar wel snel laad. Bezoekers zijn ongeduldig en laadtijd speelt hier een belangrijke rol in.

Verbeter de snelheid van je website en je zal zien dat bezoekers je website beter waarderen. Hierdoor zakt niet alleen je bouncepercentage maar bezoekers vinden ook echt wat ze zoeken en dat is nu juist wat Google graag wil. Daarom is de laadtijd van je website belangrijk voor je SEO. Help Google om hun gebruikers zo snel mogelijk een goed antwoord te vinden op de vraag die schuilgaat achter de zoekterm.

Met de wetenschap dat de snelheid van je website belangrijk is voor zoekmachine optimalisatie ga je naar Google Pagespeed Insights. Je test je pagina’s en krijgt een score van Google. Het gaat erom dat je deze score naar een zo hoog mogelijk getal brengt.

Dit kan misschien lastig zijn, of wat te technisch, maar het is wel mogelijk. Google voorziet je namelijk ook van tips waarmee je de snelheid van je website kan verbeteren. Sommige teksten en termen klinken misschien als abracadabra en daarom dit artikel.

Dit artikel helpt je te begrijpen wat er staat en hoe je je website kan optimaliseren zodat jij een snellere website hebt dan je concurrenten en daarmee hoger gaat komen in Google.

Wat je nog moet weten voordat we beginnen met de tips die de snelheid van jouw website verbeteren; de daadwerkelijke snelheid van je website en Google Pagespeed Insight komen niet helemaal overeen. De snelste website heeft niet altijd een 100% score en een 100% score wil niet altijd zeggen dat je de snelste website hebt.

Google PageSpeed Insights richt zich dan ook op de snelheid van de pagina, niet van de website. Het laat zich dan ook letterlijk vertalen naar ‘laadtijd van de pagina’.

De Google Pagespeed Insights helpen je alleen om een website ervaring te creeeren die volgens de Google standaard de beste is. En door de beste te zijn klim je omhoog in Google. Het is dus een echte SEO tool die je moet gebruiken om je positie in de zoekmachine te verbeteren.

• #1 Servers, hosting en andere infrastructuur die je website sneller maken
• #2 First impressions matter, ook voor SEO
• #3 Schrap alles wat onnodig is om 100% te scoren in Google Pagespeed Insights
• #4 Dubbel laden gaat ten kosten van de snelheid van je website
• #5 Een snellere website begint met gecomprimeerde afbeeldingen
• #6 Minder bestanden is sneller laden van je website
• #7 Laad scripts die niet nodig zijn voor de bezoekers als laatste
• #8 Mobiele laadtijd reduceren

#1 Servers, hosting en andere infrastructuur die je website sneller maken

Als je een website hebt ben je waarschijnlijk wel bekend met hosting en servers. De domeinnaam op het internet staat eigenlijk voor je adres, de straatnaam en het huisnummer zodat mensen weten waar ze je kunnen vinden. Hosting is eigenlijk de fundering van je huis. Het fundament waarop je website gebouwd is.

Daarom spreken we ook over een internetadres en als je van hosting leverancier veranderd spreken we daarom van verhuizen.

Een goed fundament betekent dan ook goede, betrouwbare hosting. Bij hostingpartijen deel je een server met andere websites. Shared hosting. Dat betekent dat alles wat andere websites doen op deze fundering ook effect heeft op jouw fundering. Persoonlijk ben ik meer iemand die houdt van onafhankelijkheid. Daarom kies hier voor een eigen server.

Met een eigen server weet je exact wat er gebeurt op de fundering en heb je geen ‘last’ van de ‘fouten’ die anderen maken. Ook bij hostingbedrijven kan je kiezen voor een eigen server. Denk aan een dedicated server. Echter is dit voor sommige ondernemers een stap te ver. Dan kan je ook kiezen voor een VPS, virtual private server. Dit is een server die opgedeeld is in kleine virtuele servers.

Je hebt hiermee je eigen IP-adres en geen last van websites die ‘fout’ gedrag vertonen in de ogen van Google.

Zorg er bij de keuze van je hostingpartij voor dat zij caching en SSD opslag aanbieden. Dit heeft een positief effect op je SEO.

De responstijd van je server zou onder de 200ms moeten zijn. Dat betekent twee tiende van een seconde. Is dit niet het geval dan moet je op zoek naar de pijnpunten. Langzame database queries, trage routerig of een gebrek aan voldoende geheugen. Je hostingpartij kan je hier in sommige gevallen bij helpen.

De keuze in hosting heeft dus invloed op de snelheid van je website en als je hoger wil komen in Google speelt dit absoluut een rol.

#2 First impressions matter, ook voor SEO

Als je op een website terechtkomt dan laden bepaalde elementen soms sneller dan anderen. Wat je wilt doen voor de beste gebruikerservaring is het deel van de website ‘above the fold’ als eerste te laten laden.

Met ‘above the fold’ bedoelen we de content die direct in je scherm verschijnt en waar je dus niet voor hoeft te scrollen. Bekijk dus vooral de bovenkant van je website.

Leuk, maar hoe doe je dit precies? Verklein deze elementen en bouw je HTML op op een manier dat deze elementen ‘above the fold’ als eerste laden. De bezoeker ziet de elementen onderaan je website namelijk nog niet en deze hebben in de tussentijd de tijd om te laden.

Voor een WordPress website kan je gebruik maken van de W3 Total Cache plugin. Wanneer je deze hebt gedownload ga je in het linkermenu naar ‘performance’ en daarna naar ‘minify’. Daar zie je ‘rewrite URL structure’. Deze staat als het goed is aangevinkt. Zo niet, dan kan je dat doen.

Wat verder naar beneden zie je ‘HTML & XML’. Vink de volgende velden aan:

• Activeer
• Inline CSS minification
• Inline JS minification
• Don’t minify feeds

In website snelheid tip 7 kom ik hier nog verder op terug met handige hands-on oplossingen.

Om dit te optimaliseren begint dit eigenlijk al bij deze keuze van het thema dat je gebruikt voor je website. Thema’s, of themes, zijn je als het goed is bekend als je werkt met bijvoorbeeld een WordPress website. Sommige thema’s zijn hier namelijk op ingericht en spreken dat ook vaak uit in de voordelen van het thema.

Leestip:
Website bovenaan Google krijgen op de populairste zoektermen

#3 Schrap alles wat onnodig is om 100% te scoren in Google Pagespeed Insights

Een website is eigenlijk opgebouwd uit nullen en enen. Alles wat je doet op je website is weer een bepaalde codereeks. Hoe meer code, hoe langer het duurt om de website te laden. Alles moet immers gelezen worden.

Dus, logisch, hoe minder nullen en enen hoe minder er te lezen valt en dus hoe sneller je klaar bent met lezen. En hoe eerder je klaar bent met lezen, hoe sneller je website geladen is.

Verwijder dus alle onnodige code op je website. Verwijder deze code door simpelweg de code door te lopen. Alles wat niet nodig is kan eruit. Denk aan overbodige witregels, overbodige nieuwe regels, maar ook de opmaak van je content.

Schrijf bijvoorbeeld linken naar andere pagina’s niet als http:// wanneer je een https:// website hebt. Dat is een doorverwijzing en kost meer tijd. Sluit een link naar een interne pagina of externe pagina ook altijd af met een /. Doe je dit niet dan is dat ook weer een doorverwijzing.

Het zijn allemaal kleine dingen maar ze helpen wel om de snelheid van je website te verbeteren. Hoe minder redirects, hoe beter. Ook voor de links die je op je mobiele omgeving plaatst.

Bekijk overigens niet alleen de HTML van je website maar ook de CSS en het javascript.

Handige tools die je hierbij kunnen helpen zijn:

• HTMLminifer
• Uglify
• CSSnano

Google zelf beveelt CSSnano en Uglify aan en aangezien we dit allemaal voor Google doen, lijkt me dat een goede keuze.

Maar wacht er is meer.

Met bijvoorbeeld Gzip kan je je bestanden comprimeren zoals CSS, HTML en JavaScript bestanden welke groter zijn dan 150 kb. Gebruik Gzip echter niet voor het verkleinen van afbeeldingen. Hier gaan we later in het artikel op in. Gzip is hier minder geschikt voor.

Gebruik je een WordPress site? Vergeet dan niet regelmatig je plugins te updaten. Vaak zijn de updates ook verbeterd op punten die ervoor zorgen dat de laadtijd van je pagina verkort wordt. Test echter wel altijd even de update zodat je weet dat er tijdens de update niks misgaat met je website. Dat komt helaas nog steeds voor.

#4 Dubbel laden gaat ten kosten van de snelheid van je website

Als een bezoeker al eerder op je website is geweest dan heeft die je website al geladen. Zonde als die de volgende keer wederom alles moet laden toch? Dit kan je namelijk voorkomen door te kiezen voor browser caching.

Alles wat geladen wordt op je website sla je namelijk op in de lokale cache. Dit betekent dat de volgende keer dat je op de website komt, dit niet nogmaals geladen hoeft te worden maar dat deze informatie opgehaald wordt uit je cache. Dit helpt de laadtijd te verlagen voor bijvoorbeeld afbeeldingen, CSS en JavaScript.

Maak je gebruik van een WordPress website dan heb je een aantal plugins die je kunnen helpen hiermee. Bekende browser caching plugins zijn:

• WP Rocket
• W3 Total Cache
• Hyper Cache

Voor W3 Total Cache zal ik een korte toelichting geven over het cache gedeelte. Wanneer je de plugin voor WordPress hebt geïnstalleerd ga je naar ‘general settings’ en vink je de checkbox ‘Page Cache’ aan als dit nog niet aangevinkt is. Normaal gesproken kies je vervolgens voor de methode ‘Disk: Enhanced’. De keuze die je hier maakt is afhankelijk van je server.

Meer weten over welke keuze voor jou geschikt is vind je hier.

Onder de pagina ‘Pagina Cache’, gevonden aan de linkerkant in het menu. Kies je voor ‘Cache posts page’, ‘Cache feeds’, ‘Cache SSL’ en ‘Don’t cache pages for logged in users’. Kies vervolgens voor ‘save all settings’.

Hieronder staat ‘cache preload’. Dit zorgt ervoor dat zelfs nieuwe bezoekers na een bepaalde periode al gebruik maken van cache. Erg handig dus om je nieuwe bezoekers een snelle website ervaring te bieden. Vink deze dus aan. Om hiervan gebruik te maken dien je ook je de url van je sitemap in te vullen. Deze kan je bijvoorbeeld maken met de Yoast SEO plugin.

Er zijn nog meer functies waar je naar kan kijken, de meeste spreken voor zich maar in veel gevallen staan de overige instellingen goed ingesteld voor de meeste websites.

Met YSlow kan je zien tot wanneer je cache is ingesteld. Dit kan je aanpassen. Gebruik Express headers hiervoor. Er wordt geadviseerd om deze in te stellen voor de periode van 1 jaar. Enkel wanneer je website regelmatig van design wisselt is het zinvol om de cache tijd korter in te stellen.

#5 Een snellere website begint met gecomprimeerde afbeeldingen

Uit Google Pagespeed Insight krijg je waarschijnlijk de tip om je afbeeldingen te comprimeren. Hier kan je grote winst mee behalen voor de snelheid van je website. Laat dit dan ook zeker niet na.

Afbeeldingen comprimeren, of verkleinen, is namelijk erg simpel en het levert je enorm veel winst op in laadtijd. Wie had gedacht dat het zo simpel was om hoger in Google te komen? Loop je afbeeldingen allemaal na en comprimeer ze met een van de volgende online tools.

• CompressJPEG
• Optimizilla
• JPEGreducer
• Compressor
• TinyPNG
• CrushPics

Gebruik je een WordPress website dan kan je dit ook eenvoudig oplossen door gebruik te maken van een plugin. Een veelgebruikte plugin is: WP Smush Image.

Je zal zien dat er ook een verschil kan zijn per tool. De ene tool kan de afbeelding namelijk kleiner maken dan de andere en hoe meer gecomprimeerd hoe beter. Zorg dat je afbeeldingen ergens tussen de 100kb en 250kb uitkomen.

Uiteindelijk mag dit alles niet ten koste gaan van de kwaliteit voor de bezoeker. Afbeeldingen moeten nog steeds scherp en goed zichtbaar zijn.

Bonustip: JPEG afbeeldingen zijn kleiner dan PNG afbeeldingen. JPEG zijn beter geschikt voor fotomateriaal. PNG is beter geschikt voor grafische afbeeldingen. Let dus op het bestandsformaat.

Leestip:
Zoekmachine optimalisatie van afbeeldingen

#6 Minder bestanden is sneller laden van je website

Wat? Ja, het klinkt niet zo ingewikkeld als het is maar een pagina uit je website wordt opgebouwd uit verschillende bestanden. Dit is het makkelijkste uit te leggen aan de hand van het CSS-bestand.

Als je een pagina maakt aan de achterkant van je website dan schrijf je deze zonder opmaak van de tekst. De kleur van een link naar een andere website bijvoorbeeld. Om de pagina goed weer te geven voor de bezoeker van je website haalt de computer het bestand op waar de tekst staat maar ook waar de opmaak staat. Dit staat in het CSS-bestand.

Door deze samen te voegen krijg je de opmaak van je pagina te zien zoals deze bedoeld is voor de bezoeker. Elk bestand dat opgevraagd wordt om een pagina te laden kost tijd. Door bepaalde bestanden samen te voegen kan dit versnelt worden. Dit komt omdat er dan minder communicatie plaatsvindt tussen bestanden aan de achterkant van je website.

Ga hiermee onder andere aan de slag in het .htaccess bestand op je server. Voeg in dit bestand bijvoorbeeld de CSS-bestanden samen.

Bonustip: Ken je CSS Sprites? Hiermee verlaag je het aantal verzoeken naar bestanden bij het laden van je afbeeldingen. Maar het maakt je afbeeldingen ook nog eens kleiner. Twee vliegen in één klap. Zo haal je de 100% PageSpeed score wel.

Leestip:
Technische SEO noodzakelijk bij zoekmachine optimalisatie

#7 Laad scripts die niet nodig zijn voor de bezoekers als laatste

Misschien kom je de term ‘render blocking’ tegen in de adviezen van Google Pagespeed Insights. Wat is dat vraag je je wellicht af?

Met render blocking geeft Google Pagespeed Insights aan dat er informatie geladen wordt die niet direct relevant is voor de bezoeker maar er wel voor zorgt dat de informatie die voor de bezoeker wel nodig is langer nodig heeft om geladen te worden. Snap je het nog?

Kijk, je meet waarschijnlijk je website statistieken via Google Analytics. Hiervoor is een stukje code op je website gezet. Deze informatie is niet van belang voor je bezoekers maar wel voor jouw als marketeer of eigenaar van de website. Je wilt namelijk weten welke pagina’s wel worden bekeken door bezoekers en welke niet.

Omdat deze informatie niet voor je bezoekers interessant is kan je deze informatie net zo goed als laatste laden op je pagina. Dit zit dan andere informatie niet in de weg en verbetert de laadtijd van relevante informatie voor de bezoekers. Aangezien Google de beste gebruikerservaring wilt voor de bezoeker moet de informatie die hieraan bijdraagt voorrang krijgen.

Maar dit is niet het volledige verhaal. Ook CSS en JavaScripts die draaien om de beleving op de website die door de bezoeker bezocht wordt te verbeteren kunnen vallen onder render-blocking. Dit gaat dan om content die niet aan de bovenkant van je website getoont wordt maar wel direct geladen wordt.

Weet je nog wat Above the Fold content is? Dat stukje content moet perfect zijn voordat de rest van de pagina geladen wordt. Dat betekent dus dat alle bestanden die Below the Fold staan ook pas geladen hoeven te worden zodra het Above the Fold stuk helemaal geladen is. Dit om vertragingen in laadtijd van de Above the Fold content en bestanden te voorkomen.

Hoe los je dit op? Laad scripts zoals Google Analytics in de footer, onderaan, van je website en informatie die wel belangrijk is voor de beleving van de bezoeker aan de bovenkant van je website, in de head. Denk hierbij aan je CSS-bestand. Zo worden deze eerder geladen dan de informatie in je footer.

Even een concreet voorbeeld.

Zodra je de opmerking ‘Verwijder bronnen die de weergave blokkeren’ ziet staan in Google PageSpeed Insights is dit het volgende dat je doet:

Gebruik voor deze oplossing de WordPress plugin W3 Total Cache zoals we eerder adviseerde.

Stap 1: Gaan naar ‘performance’ → ‘general settings’.
Stap 2: Vindt het minify gedeelte op de pagina. Vink het hokje ‘activeer’ aan voor minify.
Stap 3: Bij minify mode kies je voor ‘handmatig’ en klik op ‘save all settings’.
Stap 4: Kies in de linker menukolom voor ‘Minify’
Stap 5: Scroll in de pagina naar het kopje JS.
Stap 6: Je ziet staan ‘operations in areas’. Kies bij ‘before ’ voor Non-blocking using “defer”.
Stap 7: Ga naar ‘JS file management’ en kies voor ‘Add a script’. In de adresbalk die verschijnt type je de urls die je vind in Google PageSpeeds advies om te optimaliseren. Let er wel op dat je alleen Javascript links gebruikt. Kies voor ‘save all settings’.
Stap 8: Scroll wat naar onder en je vindt ‘.CSS’. Klik op ‘activeer’ en ‘line break removal’. De volgende stap is @import handling op ‘process’ zetten.
Stap 9: Klik op ‘Add a stylesheet’ en voeg evenals bij het Javascript de urls toe uit Google PageSpeed. Gebruik hier alleen CSS-bestanden.
Stap 10: Klik op ‘save settings & purge cache’.
Stap 11: Nu even snel kijken of je site nog goed werkt. Zo niet dan verwijder je de linken weer uit W3 Total Cache. Je kan ze één voor één verwijderen om het probleem te achterhalen of alles verwijderen en één voor één toevoegen om te zien waar het probleem ontstaat.

Een veiligere stap is om te niet te kiezen voor ‘minify’ maar voor ‘combine only’. Dit geeft minder vaak problemen op de website. Ook de keuze voor ‘default (blocking)’ in plaats van ‘non-blocking using defer´ geeft minder problemen op de website.

De laatste stap is eigenlijk simpel, kijk in Google PageSpeed Insights of je score erop vooruitgegaan is.

#8 Mobiele laadtijd reduceren

Zoals je waarschijnlijk hebt gezien is er een Google Pagespeed Insights voor desktop en mobiel. Als je goed scoort op desktop wil dat nog niet zeggen dat dat ook zo is voor mobiel en dat terwijl mobiel heel erg belangrijk is voor zoekmachine optimalisatie.

Maak dan gebruik van AMP, Accelerated Mobile Pages. Het helpt je om je pagina’s voor Google te optimaliseren. Het haalt namelijk onnodige informatie van je website weg om deze meer geschikt te maken voor mobiele devices.

Duizenden bedrijven maken al gebruik van AMP en dus is het zinvol om AMP eens goed te bekijken en wat mij betreft te gebruiken voor jouw website.

Met een WordPress website kan je de plugin AMP for WP gebruiken.

En? Heb je de 100% score behaald?