PageSpeed verbeteren in 5 stappen


Afgelopen jaar heeft Google haar PageSpeed eisen flink aangescherpt. Waarbij je eerst relatief makkelijk goede scores kon krijgen, is het sinds de introductie van Lighthouse een stuk lastiger geworden om goed te scoren. In deze blog leg ik aan de hand van een stappenplan uit hoe je ervoor kan zorgen dat je scores een stuk verbeteren.

Leestijd

4 minuten

Categorie

Online development

Datum

17-02-2020
Schrijf je in en ontvang maandelijks een update van de belangrijkste ontwikkelingen
Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.

Om te beginnen is het belangrijk om je startpunt goed te bekijken en te analyseren. De beste manier om dit te doen? De PageSpeed Insights tool van Google. Test de snelheid van je website eenvoudig via de PageSpeed tool.
 
Werk aan de winkel? Let's do it! Let wel op, onderstaande informatie kan soms wat technisch klinken. Misschien is dit dus ook handige informatie voor de developer van jouw website!

Stap 1: Zorg voor een goede basis

Als basis zien wij zaken als afbeeldingen die het juiste formaat hebben, CSS en javascript die verkleind zijn en een goede stabiele server. Als deze basis nog niet goed is pak dan de volgende dingen eerst aan:

  • Zorg dat een afbeelding nooit te groot wordt ingeladen en zorg ervoor dat er bijvoorbeeld op een smartphone een ander formaat wordt ingeladen dan op een desktop. 
  • Zorg ervoor dat alle afbeeldingen altijd iets gecomprimeerd worden, zo wordt er overbodige data verwijderd en is het bestandsformaat een stuk kleiner. Let hierbij wel op de kwaliteit van de afbeelding.
  • Zorg ervoor dat alle CSS en JavaScript bestanden die aanwezig zijn verkleind zijn. Dit zorgt ervoor dat bestanden een stuk minder groot zijn en sneller geladen kunnen worden. Er zijn veel tools beschikbaar die dit kunnen doen.
  • Zorg voor een goede stabiele snelle server, die bij voorkeur niet op een ander continent staat. Zo kan goedkope hosting je soms toch duur komen te staan. Een trans-Atlantische verbinding zorgt soms voor een vertraging van 12 seconden! Zoek dus een goede hosting partij. Bij Loyals gebruiken wij hiervoor de hosting makelaar.

Er zijn zeker nog een aantal basiszaken die goed moeten zijn, zoals het asynchroon inladen van JavaScript en critical CSS, hier is online genoeg over te vinden!

Stap 2: Afbeeldingen optimaliseren

Nu we een aantal belangrijke basispunten in orde hebben, gaan we wat dieper in op de afbeeldingen.
Google vindt het fijn als er "eigen" dingen gebruikt worden, daarom is het werken met een .jpg / .png e.d. niet meer voldoende. Ook al is deze gecomprimeerd.
 
WebP (.webp) is de nieuwe standaard voor afbeeldingen, het zorgt er soms voor dat het bestandsformaat van een afbeelding met 50% verminderd wordt zonder kwaliteitsverlies! Omdat Google & Apple een leuke haat-liefde verhouding hebben werkt het helaas niet op IOS. Zorg dat je daar een goede fallback in de vorm van een .jpg hebt.

Stap 3: Lazy loading

Toon pas iets als het nodig is en eerst met een mindere kwaliteit. Door bijvoorbeeld eerst een afbeelding van 1px in te laden, of een afbeelding van mindere kwaliteit zal de pagina sneller geladen zijn.
 
De visie om iets niet te tonen wat niet in beeld is spreekt voor zich, maar kan soms nog best wat voet in de aarde hebben. Zorg er altijd voor dat de bezoeker geen hinder ondervindt van het later inladen van bijvoorbeeld afbeeldingen die buiten beeld staan. 

Stap 4: Regel de cache

Cache tijden zijn enorm belangrijk, maar bieden tegelijkertijd ook een uitdaging. Google wil het liefste dat alles zo lang mogelijk gecached is, dit kan echter zorgen dat - wanneer er een aanpassing gedaan wordt - deze niet direct zichtbaar is voor iemand die bijvoorbeeld je website al heeft bezocht.
 
Geef daarom goede cache tijden mee in bijvoorbeeld je .htaccess
 
Verander je bijvoorbeeld een font, kleur of icoon? Dan moet er soms goed gerefreshed worden om zaken zichtbaar te krijgen voor iedereen.
 
Een handige truc hiervoor is door de browser te laten denken dat er een "nieuw" bestand aanwezig is, neem bijvoorbeeld een stylesheet als style.css. Door achter style.css?=v2 te zetten zal de browser direct zien dat er een nieuw bestand aanwezig is, of zorg voor een goede server side caching die handmatig te legen is in een CMS.

Stap 5: Vermijd externe sources

Zaken waar je geen invloed op hebt kunnen je website serieus vertragen, zo ook Google zelf. Gek genoeg vertraagd Google vaak zelf, omdat er bijvoorbeeld caching tijden niet optimaal zijn. Wij hebben al eens een mailtje aan de CEO gewaagd, helaas hebben we hier geen reactie op gehad.. ;-) Vermijd dus alles wat je niet nodig hebt aan externe sources.
 
Ik hoor je denken: "Maar ik wil toch wel graag externe sources gebruiken. Wat nu?"
Ook hier hebben we een handige truc voor bedacht: zet al het niet direct nodige achter je cookiemelding.
 
Sinds we met z'n allen aan de AVG moeten voldoen, hebben we ook allemaal zo'n mooie cookiemelding die je moet accepteren. Ervaring leert dat veel bezoekers deze direct accepteren, dus de bezoeker zal geen hinder ondervinden dat eerst die Google Maps er niet helemaal geladen stond.
 
Google PageSpeed kan zelf deze melding niet accepteren, dus die zal alle externe sources niet inladen.
Let erop dat dit uiteindelijk natuurlijk wel vertragend kan werken voor de bezoeker, maar het helpt je wel bij je scores.
 
Zoals je ziet vergt het soms best een stukje creativiteit om je Google Pagespeed scores goed te krijgen, maar wees vooral niet bang. Je bent niet de enige die dit lastig vindt. Een score in het groen is mooi, maar oranje is ook zeker ok.
 
Heb je vragen over de PageSpeed van jouw website? Neem dan contact met ons op, we helpen je graag verder.

Whitepaper

Vraag nu de Whitepaper aan

whitepaper

Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.


Schrijf je in en ontvang maandelijks een update van de belangrijkste ontwikkelingen
Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.