Løs 'reduce unused JavaScript' Lighthouse-advarslen

Hvad er 'reduce unused JavaScript' Lighthouse-advarslen?

Hvad er advarslen reduce unused JavaScript i Lighthouse? Lighthouse markerer scripts, der har mere end 20 kb ubrugte bytes.

Advarslen 'reduce unused JavaScript' påvirker direkte Lighthouse-scoren.

Ubrugt JavaScript er også ret vigtigt for at bestå Core Web Vitals, da ubrugt JavaScript har en pris! Det kan konkurrere om netværksressourcer og blokere hovedtråden. Dette vil forsinke Core Web Vitals, især Largest Contentful Paint (LCP) og Interaction to Next Paint (INP).

Hvad forårsager ubrugt JavaScript?

Ubrugt JavaScript kan have et vilkårligt antal årsager. Ubrugt JavaScript forårsages normalt af:

• For mange plugins i dit CMS.
• Død kode.
• Dårlig kodning.
• Ubegrænset adgang til tag manager
• Unødvendige imports
  
• Kode, der blev indlæst med det samme, men som kunne have været indlæst lige før brug.

Hvordan påvirker 'ubrugt JavaScript' pagespeed

Ubrugt JavaScript påvirker direkte Lighthouse-metrikker. Det gør rendering af en webside unødvendigt kompliceret, hvilket gør det næsten umuligt at få en høj Lighthouse-score. Din browser skal udføre mere arbejde, før websiden kan vises på skærmen. 

Husk dog, at en Lighthouse-score ikke er en Core Web Vitals-score. Core Web Vitals måles med CrUX-data.

Der er 2 problemer med ubrugt JavaScript.

• For det første skal det JavaScript downloades. Disse scripts vil konkurrere om netværksressourcer. Dette kan have en enorm indvirkning på Largest Contentful Paint (LCP)
• For det andet skal browseren eksekvere alt det JavaScript. Mens browseren eksekverer det JavaScript, stopper den stort set med at gøre alt andet og kan ikke reagere på brugerinput eller fortsætte med at parse siden. Dette vil påvirke både Largest Contentful Paint (LCP) samt Interaction to Next Paint (INP)

Sådan finder du 'ubrugt JavaScript'

For at finde 'ubrugt JavaScript' kan du læse Lighthouse-auditen eller bruge 'Chrome Coverage Tool' til at få en komplet liste over alle JavaScript-filer og deres mængde af ubrugte bytes.

Åbn Chrome dev tools med genvejen ctrl-shift-i. Brug derefter genvejen ctrl-shift-p for at åbne kommandomenuen og skriv 'coverage'. Vælg 'Start instrumenting coverage and reload page'. Dette vil genindlæse siden og vise dig mængden af ubrugte bytes for alle filer, der indeholder CSS eller JavaScript-kode.

Sådan løser du 'reduce unused JavaScript'

For at løse advarslen 'reduce unused JavaScript' skal du først spore dens oprindelse. Lighthouse vil give dig en indikation af, hvilke scripts der har en høj mængde ubrugte bytes. Der er 5 sædvanlige syndere:

1. Fjern unødvendige eller trivielle plugins. Hvis du bruger et plugin-baseret CMS som WordPress, er den nemmeste og mest effektive metode til at rydde op i din ubrugte kode at fjerne plugins, du ikke har brug for, eller som nemt kan erstattes med en simpel kodeændring (f.eks. dit analytics-plugin, chat-plugin, social share-plugin)
   
2. Fjern død kode. Død kode er kode, der ikke længere bruges af den nuværende hjemmeside. Den optager kun plads og båndbredde. Hvis du ejer en hjemmeside, foreslår jeg at planlægge en død kode-maraton mindst to gange om året, hvor du tager et godt kig på dine brugerdefinerede scripts og fjerner kode, der ikke længere er nødvendig.
   
3. Omskriv dårligt kodede scripts.  Dårligt kodede scripts har tendens til at have mange unødvendige kontroller og if/else-sætninger. Disse kontroller bliver måske aldrig brugt, og visse if/else-betingelser er måske ikke nødvendige. Hvis du har mange ældre scripts, eller din nuværende JavaScript-udvikler er bedre end den forrige, kan det være en god idé at genbesøge ældre scripts.
   
4. Ryd op i din tag manager og begræns adgangen. Tag manager er en almindelig kilde til ubrugt kode, især når mindre tekniske afdelinger har lov til at tilføje tags. Mange gange glemmer de at fjerne deres ubrugte tags, og tag manageren bliver hovedkilden til ubrugt JavaScript.
5. Fjern unødvendige imports (NextJS, React, VUE osv.). De fleste SPA-miljøer importerer for mange komponenter/funktioner. Dobbelttjek dine imports og fjern ubrugt kode. 
6. Lazy load ruter eller komponenter  (NextJS, React, VUE osv.). Lazy loading af komponenter vil kun importere disse komponenter, når de er nødvendige. Dette vil øjeblikkeligt fjerne 'Lighthouse-advarslen for ubrugt JavaScript' for de sider, hvor du lazy loader ubrugt kode.
7. Udskyd indlæsning af ikke-kritiske scripts. Nogle gange har du brug for et script (f.eks. til at indsende en formular), men du har ikke brug for det med det samme. Og lad os være ærlige, 98% af dine besøgende vil alligevel ikke tilmelde sig. Så for det meste er disse scripts ubrugte. Det ville give mere mening at indlæse dette script, når den besøgende interagerer med formularen, og ikke under sideindlæsningen.

Workaround for 'reduce unused JavaScript'

Nogle gange er det ikke muligt at løse alle advarsler om ubrugt JavaScript. I så fald kan du prøve at minimere virkningen af disse ubrugte ressourcer

- Indlæs alle JavaScript-ressourcer fra dit hoveddomæne (dette undgår en ny netværksforbindelse)
- Forudindlæs vigtigere ressourcer som dine skrifttyper og LCP-billedelementet.
- Udskyd så meget JavaScript som muligt
- Placer mindre vigtigt JavaScript i bunden af siden