Een hoge score met je website in Google PageSpeed Insights
Een hoge score met je website in Google PageSpeed Insights

Recent heeft Google met de tool PageSpeed Insights de lat weer een stuk hoger gelegd. Websites die eerder een redelijke of hoge score behaalden daalden aanzienlijk in score. Google vond het duidelijk tijd om de druk bij websitebouwers op te voeren. Een uitdaging die wij graag aannamen.

Website afbeeldingen snel laden

Het grootste deel van de snelheid van je website is afhankelijk van hoe snel grote bestanden worden geladen. Dit zijn voornamelijk de afbeeldingen, maar ook css en javascript bestanden tellen mee. Google neemt in de score de snelheid van het laden van dit soort bestanden mee.

Om bestanden sneller te kunnen laden hebben wij o.a.:

Afbeeldingen op maat snijden

Afbeeldingen worden automatisch geschaald naar het ideale formaat. Dit wordt gedaan door de front-end editor. Je hoeft hier zelf niets voor te doen.

Overbodige informatie uit de afbeeldingen halen

In afbeeldingen staat veel extra informatie die je niet direct ziet. Bijvoorbeeld waar de afbeelding gemaakt is, onder welke omstandigheden, met welke camera-instellingen. Om de bestanden zo klein mogelijk te maken wordt al deze informatie uit de bestanden gehaald.

Afbeeldingen en bestanden comprimeren

Afbeeldingen en bestanden worden automatisch gecomprimeerd op de server. Zodra ze door een bezoeker worden bekeken worden de bestanden door zijn/haar browser weer uitgepakt. Zo zijn de bestanden die de bezoeker moet downloaden een stuk kleiner. Dit kan soms 90% schelen!

Afbeeldingen en bestanden cachen

Als je een pagina voor de tweede keer bezoekt heb je de afbeeldingen en bestanden die er bijhoren al een keer gedownload. Dat hoef je dus niet opnieuw te doen, tenzij de afbeeldingen of bestanden gewijzigd zijn.

Om te zien of de afbeeldingen gewijzigd zijn gaat je browser uit van de informatie bij die afbeelding. Daar in staat hoe lang de afbeelding (waarschijnlijk) niet gewijzigd wordt. Bij onze laatste update geven we mee dat afbeeldingen nooit meer gewijzigd worden. Dan hoef je ze ook nooit meer te downloaden. Een stuk sneller!

Pas je het design van je pagina aan? Dan zetten wij automatisch een nieuwe afbeelding neer. Zo komt ondanks de cache, je wijziging toch bij alle bezoekers aan.

Razendsnel een pagina opbouwen

Als alle afbeeldingen, css en javascript bestanden snel geladen worden, blijft natuurlijk de pagina zelf over. Aan de laadtijd hier van stelt Google zeer hoge eisen: binnen de 200 milliseconden.

Om dit te bereiken hebben we alle technische trucs uit de kast gehaald die we konden vinden. De voornaamste verbeteringen zitten in het voorkome dat er onnodig code uitgevoerd wordt, en om het resultaat van code die al eerder uitgevoerd is te onthouden zodat deze niet opnieuw uitgevoerd hoeft te worden.

Het resultaat mag er zijn. De meeste pagina's laden nu binnen de 200 miliseconden. De snelheid blijft afhankelijk van de complexiteit van de pagina. Maar een gewone pagina, nieuwsartikel of blog valt onder die grens.

Javascript en css alleen laden indien nodig

Naarmate een website uitgebreider wordt, sluipen er steed meer bestanden en vertragende codes in. Prima als ze noodzakelijk zijn, maar dat is niet altijd het geval. Dit was helaas ook bij onze websites het geval. Daarom hebben we een reeks controles toegevoegd die er voor zorgen dat bestanden alleen geladen worden op pagina's waar ze ook echt nodig zijn.

Het resultaat in Google PageSpeed Insights

Leuk verhaal, maar wat heb ik er aan? Heel simpel: als je al een Webanizr site hebt hoef je niets te doen. Haal de website door de google speedtest en onderzoek de resultaten:

https://developers.google.com/speed/pagespeed/insights/?hl=nl

Heb je nog geen website in Webanizr draaien, maar zou je ook zulke scores willen behalen? Start dan een website in Webanizr of stap over. Of probeer het gratis uit: