Gebruikt geen passieve listeners om scrollprestaties te verbeteren

“Gebruikt geen passieve listeners om scrollprestaties te verbeteren” is een melding van Google page speed dat alleen te maken heeft met JavaScript op de website. Listeners zijn code die ergens op wachten en daar zitten ze te luisteren. Dit is de makkelijkste omschrijving.

Belangrijk is om te weten hoe je dit kan oplossen. Als je niet geen kennis hebt van JavaScript of jQuery dan kan je dit misschien beter aan iemand anders overlaten.

De test kijkt eerst of er scroll handlers zijn. Dit kan touch zijn maar ook muis scroll. Dit wordt meestal gebruikt voor analytics. Er wordt gekeken of men scrolt om dit te registreren. Het kan ook een sliders zijn of een scroll-top functie.
De melding verschijnt in de Google page speed test als er in het JavaScript event listeners zijn opgenomen die geen preventDefault() of passive:true gebruiken. En dit moeten files zijn die op de server staan waar de website op staat. JavaScript van derden worden niet gefilterd.

Browsers al Chrome schakelen het scrollen uit tot alle JavaScript is geladen. Dit kan soms vervelend zijn voor bezoekers en de interactie met de website vertragen.

Gebruikt geen passieve listeners om scrollprestaties te verbeteren

De oplossing om dit te verbeteren lijkt dus vrij eenvoudig. Door passive:true toe te voegen aan de eventlisteners weet een browser dat het deze moet laat gaan. De scroll mogelijkheid wordt zo in het begin van het laden niet onderbroken door de browser. En hierdoor ondervindt geen probleem met de interactie van de pagina.

De passive:true kan op de volgende manier gebruikt worden:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Dit moet aangepast worden in het JavaScript en dat is wat dit moeilijk maakt. Vaak komen degelijk JS files met plugins of dergelijken en dan wordt het lastig om dit aan te passen. Het is natuurlijk ook niet verstandig om in script zaken aan te passen. Het gevolg kan zijn dat het daarna niet meer werkt. Waarschijnlijk zullen de meeste problemen hebben om dit te aan te passen.

Andere oplossing zou kunnen zijn het script te vervangen door een andere dat geen problemen veroorzaakt. Ook dit zal niet echt een makkelijk klus zijn want daarna moeten er meerdere zaken aangepast worden. Uiteindelijk moet er veel extra werk gedaan worden voor een probleem dat geen grote impact heeft op de page speed score.

De impact voor page speed en Web Vitals is niet zo heel erg groot. Hier kan het verstandig zijn eerst te kijken naar ander onderdelen om die te verbeteren voor de website. Onderdelen die bijvoorbeeld een veel grotere impact hebben of makkelijker zijn om te verbeteren.