Los de 'reduce unused JavaScript' lighthouse waarschuwing op

Wat is 'reduce unused JavaScript' lighthouse waarschuwing?

Wat is de reduce unused JavaScript waarschuwing in lighthouse? Lighthouse markeert scripts die meer dan 20kb aan ongebruikte bytes hebben.

De 'reduce unused JavaScript' waarschuwing heeft directe invloed op de lighthouse score.

Ongebruikte JavaScript is ook behoorlijk belangrijk voor het slagen voor de Core Web Vitals, aangezien ongebruikte JavaScript kosten met zich meebrengt!. Het kan concurreren om netwerkbronnen en de main thread blokkeren. Dit vertraagt de Core Web Vitals, met name de largest contentful paint (LCP) en de interaction to next paint (INP).

Wat veroorzaakt ongebruikte JavaScript?

Ongebruikte JavaScript kan een aantal redenen hebben. Ongebruikte JavaScript wordt meestal veroorzaakt door:

• Te veel  plugins in uw CMS.
• Dode code.
• Slechte codering.
• Onbeperkte tag manager toegang
• Onnodige imports
  
• Code die onmiddellijk werd geladen maar vlak voor gebruik geladen had kunnen worden.

Hoe beïnvloedt 'unused JavaScript' pagespeed

Ongebruikte JavaScript heeft directe invloed op de lighthouse statistieken. Het maakt het renderen van een webpagina onnodig ingewikkeld, waardoor het bijna onmogelijk is om die hoge lighthouse score te behalen. Uw browser zal meer werk moeten verzetten voordat de webpagina op het scherm kan worden weergegeven. 

Houd er echter rekening mee dat een lighthouse score geen Core Web Vitals score is. De Core Web Vitals worden gemeten met CrUX data.

Er zijn 2 problemen met ongebruikte JavaScript.

• Ten eerste moet die JavaScript worden gedownload. Deze scripts zullen concurreren om netwerkbronnen. Dit kan een enorme impact hebben op de largest contentful paint (LCP)
• Ten tweede zal de browser al die JavaScript moeten uitvoeren. Terwijl een browser die JavaScript uitvoerde, stopt hij in feite met alles wat hij doet en kan hij niet reageren op gebruikersinvoer of doorgaan met het parsen van de pagina. Dit heeft invloed op zowel de largest contentful paint (LCP) als de interaction to next paint (INP)

Hoe vindt u 'unused JavaScript'

Om 'unused JavaScript' te vinden kunt u de lighthouse audit lezen of de 'Chrome Coverage Tool' gebruiken om een volledige lijst van alle JavaScript bestanden en hun hoeveelheid ongebruikte bytes te krijgen.

Open de chrome dev tools met de ctrl-shift-i sneltoets. Gebruik vervolgens de ctr-shift-p sneltoets om het commandomenu te openen en typ 'coverage'. Selecteer 'Start instrumenting coverage and reload page'. Dit zal de pagina opnieuw laden en u de hoeveelheid ongebruikte bytes tonen voor alle bestanden die css of javascript code bevatten.

Hoe 'reduce unused JavaScript' op te lossen

Om de 'reduce unused JavaScript' waarschuwing op te lossen, moet u eerst de oorsprong ervan traceren. Lighthouse geeft u een indicatie van welke scripts een grote hoeveelheid ongebruikte bytes hebben. Er zijn 5 gebruikelijke verdachten:

1. Verwijder onnodige of triviale plugins. Als u een op plugins gebaseerd CMS zoals WordPress gebruikt, is verreweg de gemakkelijkste en meest effectieve methode om uw ongebruikte code op te schonen het verwijderen van plugins die u niet nodig heeft of die gemakkelijk kunnen worden vervangen door een eenvoudige codewijziging (bijvoorbeeld uw analytics plugin, chat plugin, social share plugin)
   
2. Verwijder dode code. Dode code is code die niet meer wordt gebruikt door de huidige website. Het neemt alleen maar ruimte en bandbreedte in beslag. Als u een website bezit, raad ik u aan om minstens twee keer per jaar een dode code marathon in te plannen waarbij u uw aangepaste scripts goed bekijkt en code verwijdert die niet meer nodig is.
   
3. Herschrijf slecht gecodeerde scripts.  Slecht gecodeerde scripts hebben vaak veel onnodige controles en if/else statements. Die controles worden misschien nooit gebruikt en bepaalde if/else voorwaarden zijn misschien niet nodig. Als u veel oudere scripts heeft of uw huidige JavaScript ontwikkelaar beter is dan de vorige, is het misschien een goed idee om oudere scripts opnieuw te bekijken.
   
4. Schoon uw tag manager op en beperk toegang. Tag manager is een veelvoorkomende bron van ongebruikte code, vooral wanneer minder technische afdelingen tags mogen toevoegen. Vaak vergeten ze hun ongebruikte tags te verwijderen en wordt de tag manager de belangrijkste bron van ongebruikte JavaScript.
5. Verwijder onnodige imports (NextJS, React, VUE etc). De meeste SPA omgevingen importeren te veel componenten / functies. Controleer uw imports dubbel en verwijder ongebruikte code. 
6. Lazy load routes of componenten  (NextJS, React, VUE etc). Het lazy loaden van componenten zal die componenten pas importeren zodra ze nodig zijn. Dit verwijdert onmiddellijk de 'lighthouse waarschuwing voor ongebruikte javascript' voor deze pagina's waar u ongebruikte code lazy load.
7. Stel het laden van niet-kritieke scripts uit. Soms heeft u een script nodig (bijvoorbeeld om een formulier te verzenden) maar heeft u het niet meteen nodig. En laten we eerlijk zijn, 98% van uw bezoekers zal zich toch niet aanmelden. Dus voor het grootste deel zijn deze scripts ongebruikt. Het zou logischer zijn om dit script te laden wanneer de bezoeker interageert met het formulier, en niet tijdens het laden van de pagina.

Workaround voor 'reduce unused JavaScript'

Soms is het niet mogelijk om alle waarschuwingen voor ongebruikte JavaScript op te lossen. In dat geval kunt u proberen de impact van deze ongebruikte bronnen te minimaliseren

- Laad alle javascript bronnen van uw hoofddomein (dit voorkomt een nieuwe netwerkverbinding)
- Preload belangrijkere bronnen zoals uw lettertypes en het LCP afbeeldingselement.
- Stel zoveel mogelijk JavaScript uit
- Plaats minder belangrijke JavaScript onderaan de pagina