Voorkom dat verouderde JavaScript aan moderne browsers wordt geleverd

« Back to Glossary Index

De melding “Voorkom dat verouderde JavaScript wordt geleverd aan moderne browsers” komt uit Lighthouse en PageSpeed Insights, en betekent dat je site JavaScript meestuurt die alleen bedoeld is voor oude browsers: polyfills en transpilaties die elke moderne browser allang niet meer nodig heeft. Die code wordt wel gedownload, geparseerd en uitgevoerd, en dat kost laadtijd zonder dat iemand er iets aan heeft.

Waar het vandaan komt

Ontwikkelaars schrijven moderne JavaScript en laten een build-tool die code omzetten naar een oudere variant, zodat verouderde browsers hem ook begrijpen. Daarbij worden polyfills toegevoegd: kleine stukjes code die functies nabouwen die oude browsers missen. Denk aan zaken als Array.prototype.includes, Object.assign of Promise.

Het probleem: die instelling staat vaak nog afgestemd op Internet Explorer 11, een browser die niet meer bestaat. Elke bezoeker met een actuele Chrome, Safari of Firefox krijgt daardoor tientallen kilobytes aan code binnen die niets doet. JavaScript is bovendien duurder dan andere bestanden, want de browser moet hem niet alleen downloaden maar ook uitvoeren, en op een middenklasse telefoon is dat traag.

Wat je eraan doet

• Werk je browser-doelgroep bij. In je Browserslist-configuratie staat vaak nog een verouderde regel. Zet hem op iets als “defaults” of “last 2 versions, not dead”. Alleen dat al haalt de meeste onnodige transpilatie eruit.
• Lever twee bundels. Met het module/nomodule-patroon serveer je moderne browsers een schone, kleine bundel en oude browsers een zwaardere. Iedereen krijgt alleen wat hij nodig heeft.
• Laad polyfills voorwaardelijk. Alleen inladen als de browser de functie daadwerkelijk mist, niet standaard voor iedereen.
• Kijk naar je plugins en libraries. Vooral in WordPress komt de ballast vaak niet uit je eigen code, maar uit een plugin die zijn eigen verouderde bundel meestuurt op elke pagina.

Wat het oplevert

Een voorbeeld uit de praktijk: een site laadt een JavaScript-bundel van 180 kB, waarvan zo’n 40 kB polyfills. Op een snelle laptop merk je daar niets van. Op een telefoon met een matige verbinding scheelt het al snel enkele tienden van een seconde in de Interaction to Next Paint en de laadtijd. Dat telt mee in de Core Web Vitals, en die zijn een van de signalen waar Google naar kijkt.

Waar het misgaat

Blind de polyfills uitzetten zonder te testen. Heb je bezoekers op oudere apparaten, dan krijgen die een kapotte site en dat zie je nergens in je statistieken terug, want ze kunnen niets meer klikken. Controleer eerst in je bezoekersdata welke browsers er echt binnenkomen, en stem je build daarop af.

« Back to Glossary Index