Hoe we Blabloom.com meer dan 40% sneller maakten met behulp van Google PageSpeed Insights

Geschreven door: Dieter Verjans Dieter Verjans

Performantie van websites en webapplicaties is belangrijk, want gebruikers wachten niet graag lang op pagina’s die traag inladen. Niet alleen voor webshops is een snelle laadtijd zeker een meerwaarde voor de customer experience, ook zoekmachines houden van snelle websites. Het is dus zowel voor je gebruikers als om te scoren in zoekmachines belangrijk om een snelle website te hebben. In dit artikel laten we zien hoe we Blabloom.com optimaliseerden met behulp van Google PageSpeed Insights.

PageSpeed Insights is een tool van Google die de snelheid en gebruiksvriendelijkheid van je website analyseert. Geef zeker je website even in op https://developers.google.com/speed/pagespeed/insights/ en bekijk het resultaat. Scoort je website goed? Mooi zo, goed bezig.

Scoort je website minder goed, dan is het aan te raden om de nodige stappen te ondernemen om de score te verbeteren.

Voor de optimalisatie scoorde Blabloom.com 69 op mobiel en 81 op desktop.

Hoe gingen we te werk?

Disclaimer: de informatie in deze blogpost is vaak technisch, maar geeft je wel een zicht op hoe diep we gaan graven om optimalisaties door te voeren.

Op PageSpeed Insights van Google krijg je een mooi overzicht van wat je kan optimaliseren aan je website. Wanneer we dit lieten lopen voor Blabloom kregen we geen slechte, maar ook zeker geen goede resultaten.

PageSpeed Insights resultaat mobiel:

PageSpeed Insights Mobiel

PageSpeed Insights resultaat desktop:

Google PageSpeed Insights DesktopDat moest beter dachten we! Een oranje score was voor ons niet goed genoeg.

Google geeft mooi aan wat je zeker moet corrigeren en wat je moet overwegen.
Hieronder overlopen we kort de zaken die we voor Blabloom hebben aangepast met een goed resultaat tot gevolg.

Afbeeldingen optimaliseren

Heel belangrijk, zeker voor mobiel, is het optimaliseren van afbeeldingen.

Alle statische afbeeldingen waren reeds in orde, maar alle dynamische afbeeldingen (afbeeldingen die geüpload werden via het cms) werden niet geoptimaliseerd.

Voor de statische afbeeldingen maken we gebruik van ImageOptim waarmee je snel en gemakkelijk afbeeldingen kunt optimaliseren. Dat zat dus al goed. Het optimaliseren van de dynamische afbeeldingen zorgde voor wat extra programmatiewerk. Na het uploaden van de afbeeldingen via het cms lieten we deze door de server optimaliseren via jpegoptim en optipng, beiden standaard geïnstalleerd op de servers van Level27, waar Blabloom gehost staat.

Javascript verkleinen

Minify alle javascript bestanden zodat deze sneller gedownload en verwerkt kunnen worden door de webbrowser. Tijdens een minify worden alle overbodige tekens en spaties uit de javascript gehaald, waardoor de code compacter en sneller wordt.

Wanneer je externe javascript libraries inlaadt, zoals bijvoorbeeld jquery, zorg dan ook zeker dat je hiervoor de “geminifiede” versie gebruikt. Er bestaan online verschillende sites die je snel javascript bestanden kunnen minifien zoals bvb. https://jscompress.com/.

CSS verkleinen

Vergeet naast de javascript-code zeker ook niet je CSS-code te verkleinen. CSS is de code die zorgt voor de styling van je website.

Om CSS te verkleinen zijn er ook tal van online tools te vinden zoals https://cssminifier.com. Je kunt ook gebruik maken van build systemen zoals Grunt of Gulp om dat te automatiseren. Bij Blabloom maken we gebruik van Grunt om de CSS te verkleinen.

Maak gebruik van browsercaching

Zorg dat alle bestanden die je zelf aanlevert aan de webbrowser de juiste HTTP-headers krijgen zodat alles mooi gecached kan worden.

Bestanden die eenmaal in de cache van je browser zitten kunnen razendsnel geraadpleegd worden door je browser. Hoe meer items in de cache opgeslagen kunnen worden, hoe sneller je website.

Maak je gebruik van externe systemen, zoals google analytics, hang je af van hun headers en kun je hier helaas zelf niets aan veranderen. Deze zaken zijn dan ook niet te cachen, probeer daarom externe scripts tot een minimum te beperken.

Externe avatars verwijderd

Bij Blabloom kunnen bezoekers reageren op blogberichten. Zeker bij de testoproepen gaat het vaak om meer dan 100 reacties. Om de site wat op te fleuren, tonen we hun avatar via Gravatar, Facebook of Twitter. Uit onderzoek dat we deden bleek dat op Blabloom maar 5% van de bezoekers een externe avatar gebruikte. We hebben bijgevolg deze functionaliteit verwijderd zodat er weer performantiewinst geboekt werd.

Dit probleem hebben we gevonden via Google Analytics in de sectie "Paginatiming".

Op onderstaand screenshot kan je zien dat de pagina op plaats 8 opmerkelijk slechter presteert dan de rest van de website.

paginatimingToen we gingen analyseren waarom deze pagina zoveel trager was dan de rest, kwamen we al snel uit bij de extern ingeladen avatars van gebruikers van de reacties.

De externe request werden verwijderd en de pagina was meteen weer op snelheid.

Nu wordt er niet meer bij iedere reactie een call gedaan naar gravatar en geloof me, dat scheelt een pak in responstijd wanneer er meer dan 100 reacties onder 1 blogpost staan.

Resultaat

Na wat kleine aanpassingen te doen bekomen we voor Blabloom een mooi resultaat.
Nu scoort Blabloom 87 voor mobiel en 93 voor desktop.

Je kan uiteindelijk nog verder gaan door HTML te verkleinen, Javascript en CSS boven de fold optimaliseren. Misschien dat we dit in een latere fase nog overwegen. Maar voorlopig zijn we tevreden met het huidige resultaat. De site voelt merkbaar sneller aan en dat is absoluut een meerwaarde voor zowel de gebruikers als voor Google. Google hecht immers zeker waarde aan de snelheid van websites.

Ook in Google Analytics is het verschil overduidelijk. Zie onderstaand screenshot:

Google analytics

Meer dan 40% snelheidswinst maakt een groot verschil!

Test zeker je eigen website ook eens via PageSpeed Insights van Google en probeer zo hoog mogelijk te scoren. Probeer 85 of meer op 100 te scoren en je site zal er zeker wel bij varen. De ervaring zal dan voor zowel bezoekers en zoekmachines aangenaam zijn en dat is wat telt!

Schrijf je in op onze maandelijkse developers nieuwsbrief als je op de hoogte wil blijven van wat onze developers lezen over webdevelopment.

{* Remarketing tag *}