Google pagespeed score optimaliseren door scripts later in te laden

Radboud Beunk - Markant Internet Radboud Beunk

Google pagespeed is na de update van Google in juni 2021 één van de belangrijkste indicatoren die weergeeft of jouw website optimaal voldoet aan de snelheidseisen van Google. De laadtijd is hier een belangrijk onderdeel van. Dit wil zeggen; hoe snel laad de website als een potentiële klant de pagina bezoekt? Dit is onder andere afhankelijk van de bestandsgrootte van de afbeeldingen, serversnelheid en het inladen van diverse scripts. In dit blogartikelen behandelen wij het inladen van diverse scripts.

In deze case nemen we het inladen van de chat, door middel van Google Tag Manager, als een potentiële klant de website bezoekt als voorbeeld. Ter verbetering van de functionaliteit van de site kan deze ook na een aantal seconden worden ingeladen. Echter, in de huidige situatie wordt het Javascript direct ingeladen. Dit zorgt voor een verhoogde laadtijd van de website, wat nadelig is voor de PageSpeed score van jouw website.

Hoe kan de Google PageSpeed geoptimaliseerd worden?

In dit voorbeeld wordt het chat-script ingeladen door middel van Google Tag Manager. Gezien dit een veelgebruikte manier is, lichten wij dit verder toe in deze case.

Zoals hieronder wordt weergeven, wordt deze tag getriggerd op ‘all pages’./ Het is beter om dit aan te passen naar een timer.

Stap 1

Dit kan door een nieuwe trigger aan te maken, zoals hieronder getoond:

Stap 2

Selecteer vervolgens de timerfunctie in Google Tag Manager door de type trigger ‘timer’ in te stellen. Vervolgens dienen er een aantal waarden ingegeven te worden die onderstaand stapsgewijs worden toegelicht.

Om te beginnen stel je de interval in. Dit is de vertraging wanneer de trigger actief wordt, dit is in milliseconden. De 10.000 milliseconde geeft dus een delay van 10 seconden.

Stap 3

Vervolgens stel je de limit in. Dit geeft aan hoe vaak de trigger actief wordt. Als hier geen limiet ingevoerd wordt, zal de trigger elke 10 seconden geactiveerd worden. In deze situatie is het wenselijk dat de trigger eenmalig wordt geactiveerd, daarom vullen we hier ‘1’ in.

Stap 4

Vervolgens zijn er voorwaarden nodig voor het instellen van de trigger. Dit geeft aan wanneer de timer actief dient te worden. In dit voorbeeld willen we de trigger activeren op alle pagina’s.

Hierbij selecteer je ‘PagePath’ -> ‘Komt overeen met RegEx’ -> ‘.*

Dit wil dus zeggen dat dat de trigger actief wordt op de pagina (PagePath), die overeenkomt met de volgende in de URL. Waarbij een reguliere expressie van .* wordt gebruikt. De ‘.*’ (Punt-Ster) geeft aan dat bij elke waarde achter de punt (.) in de URL de trigger wordt geactiveerd. Hier kun je bijvoorbeeld een uitzondering maken voor de /contact pagina.

Stap 5

Vergeet vervolgens niet de trigger op te slaan en om de naam van de trigger in te geven. Bijvoorbeeld “Timer – 10 seconds”.

Stap 6

Vervolgens ga je naar de Tag van de Chat en verwijder daar de trigger ‘all pages’ door op het ‘-‘ teken te klikken.

Stap 7

Voeg vervolgens hier de trigger aan toe die in de eerste stappen is aangemaakt. Vergeet hierbij niet om deze wijziging ook op te slaan.

Stap 8

Op dit moment hebben we dus een trigger met delay aan de Tag van de chat toegevoegd. Tot slot is het belangrijk om de wijzigen te publiceren.

Stap 9

Welk effect heeft deze wijziging op de Google PageScore?

Door het doorvoeren van deze wijzigingen zijn de onderstaande waarden veranderd:

Desktop zonder delay                                                               Dekstop met delay

No delay desktop       Delay desktop

 

Mobiel zonder delay:                                                                            Mobiel met delay

No delay mobiel      Delay mobiel

Uit bovenstaande foto’s is op te maken dat de meeste winst is behaald op het lader inladen van het Java-script. Gezien dit (grotendeels) het script van de chat is, is dit is ook het gewenste resultaat.. Door deze wijzigingen door te voeren hebben wij dus 1.6 seconden laadtijd winst, en dat zie je terug in de score!

Deel dit artikel
Meer informatie over deze schrijver