Fiks advarselen «reduce unused JavaScript» i Lighthouse

Hva er advarselen 'reduce unused JavaScript' i Lighthouse?

Hva er advarselen reduce unused JavaScript i Lighthouse? Lighthouse flagger skript som har mer enn 20 kb med ubrukte bytes.

Advarselen 'reduce unused JavaScript' påvirker Lighthouse-poengsummen direkte.

Ubrukt JavaScript er også svært viktig for å bestå Core Web Vitals siden ubrukt JavaScript har en kostnad! Det kan konkurrere om nettverksressurser og blokkere hovedtråden. Dette vil bremse Core Web Vitals, spesielt Largest Contentful Paint (LCP) og Interaction to Next Paint (INP).

Hva forårsaker ubrukt JavaScript?

Ubrukt JavaScript kan ha mange årsaker. Ubrukt JavaScript skyldes vanligvis:

• For mange  plugins i CMS-et ditt.
• Død kode.
• Dårlig koding.
• Ubegrenset tilgang til tag manager
• Unødvendige imports
  
• Kode som ble lastet inn umiddelbart, men som kunne vært lastet rett før bruk.

Hvordan påvirker 'ubrukt JavaScript' pagespeed

Ubrukt JavaScript påvirker Lighthouse-metrikkene direkte. Det gjør rendering av en nettside unødvendig komplisert, noe som gjør det nesten umulig å oppnå en høy Lighthouse-poengsum. Nettleseren din må gjøre mer arbeid før nettsiden kan vises på skjermen. 

Husk imidlertid at en Lighthouse-poengsum ikke er en Core Web Vitals-poengsum. Core Web Vitals måles med CrUX-data.

Det er 2 problemer med ubrukt JavaScript.

• For det første må JavaScript-en lastes ned. Disse skriptene vil konkurrere om nettverksressurser. Dette kan ha stor innvirkning på Largest Contentful Paint (LCP)
• For det andre må nettleseren kjøre all den JavaScript-en. Mens nettleseren kjører JavaScript vil den i utgangspunktet slutte å gjøre alt annet og kan ikke svare på brukerinteraksjoner eller fortsette å tolke siden. Dette vil påvirke både Largest Contentful Paint (LCP) og Interaction to Next Paint (INP)

Hvordan finne 'ubrukt JavaScript'

For å finne 'ubrukt JavaScript' kan du lese Lighthouse-rapporten eller bruke 'Chrome Coverage Tool' for å få en komplett liste over alle JavaScript-filer og mengden ubrukte bytes.

Åpne Chrome DevTools med snarveien ctrl-shift-i. Bruk deretter snarveien ctrl-shift-p for å åpne kommandomenyen og skriv 'coverage'. Velg 'Start instrumenting coverage and reload page'. Dette vil laste siden på nytt og vise deg mengden ubrukte bytes for alle filer som inneholder CSS- eller JavaScript-kode.

Hvordan fikse 'reduce unused JavaScript'

For å fikse advarselen 'reduce unused JavaScript' må du først spore opp kilden. Lighthouse vil gi deg en indikasjon på hvilke skript som har en høy andel ubrukte bytes. Det er 5 vanlige årsaker:

1. Fjern unødvendige eller trivielle plugins. Hvis du bruker et plugin-basert CMS som WordPress, er den enkleste og mest effektive metoden for å rydde opp i ubrukt kode å fjerne plugins du ikke trenger eller som enkelt kan erstattes med en enkel kodeendring (for eksempel analytics-pluginen din, chat-plugin, sosial deling-plugin)
   
2. Fjern død kode. Død kode er kode som ikke lenger brukes av den nåværende nettsiden. Den tar bare opp plass og båndbredde. Hvis du eier en nettside, anbefaler jeg å planlegge en opprydding av død kode minst to ganger i året der du tar en grundig gjennomgang av dine egne skript og fjerner kode som ikke lenger trengs.
   
3. Skriv om dårlig kodede skript.  Dårlig kodede skript har en tendens til å ha mange unødvendige sjekker og if/else-setninger. Disse sjekkene blir kanskje aldri brukt, og visse if/else-betingelser er kanskje ikke nødvendige. Hvis du har mange eldre skript eller din nåværende JavaScript-utvikler er bedre enn den forrige, kan det være lurt å gå gjennom eldre skript på nytt.
   
4. Rydd opp i tag manageren din og begrens tilgangen. Tag manager er en vanlig kilde til ubrukt kode, spesielt når mindre tekniske avdelinger har tillatelse til å legge til tagger. Mange ganger glemmer de å fjerne ubrukte tagger, og tag manageren blir hovedkilden til ubrukt JavaScript.
5. Fjern unødvendige imports (NextJS, React, VUE osv). De fleste SPA-miljøer importerer for mange komponenter/funksjoner. Dobbeltsjekk importene dine og fjern ubrukt kode. 
6. Lazy load ruter eller komponenter  (NextJS, React, VUE osv). Lazy loading av komponenter vil kun importere disse komponentene når de trengs. Dette vil umiddelbart fjerne Lighthouse-advarselen for ubrukt JavaScript for sidene der du lazy loader ubrukt kode.
7. Utsett lasting av ikke-kritiske skript. Noen ganger trenger du et skript (for eksempel for å sende inn et skjema), men du trenger det ikke med en gang. Og, la oss være ærlige, 98 % av besøkende vil uansett ikke registrere seg. Så for det meste er disse skriptene ubrukte. Det ville vært mer fornuftig å laste dette skriptet når besøkende interagerer med skjemaet, og ikke under sideinnlastingen.

Midlertidig løsning for 'reduce unused JavaScript'

Noen ganger er det ikke mulig å fikse alle advarslene for ubrukt JavaScript. I så fall kan du prøve å minimere påvirkningen av disse ubrukte ressursene

- Last alle JavaScript-ressursene fra hoveddomenet ditt (dette unngår en ny nettverkstilkobling)
- Forhåndslast viktigere ressurser som skrifttyper og LCP-bildeelementet.
- Utsett så mye JavaScript som mulig
- Plasser mindre viktig JavaScript nederst på siden