Fixa varningen 'reduce unused JavaScript' i Lighthouse

Vad är varningen 'reduce unused JavaScript' i Lighthouse?

Vad är varningen reduce unused JavaScript i Lighthouse? Lighthouse flaggar skript som har mer än 20 kB oanvända bytes.

Varningen 'reduce unused JavaScript' påverkar direkt Lighthouse-poängen.

Oanvänd JavaScript är också mycket viktig för att klara Core Web Vitals eftersom oanvänd JavaScript kostar! Den kan konkurrera om nätverksresurser och blockera huvudtråden. Detta saktar ner Core Web Vitals, särskilt Largest Contentful Paint (LCP) och Interaction to Next Paint (INP).

Vad orsakar oanvänd JavaScript?

Oanvänd JavaScript kan ha många orsaker. Oanvänd JavaScript orsakas vanligtvis av:

• För många  plugins i ditt CMS.
• Oanvänd kod.
• Dålig kodning.
• Obegränsad åtkomst till tag manager
• Onödiga importer
  
• Kod som laddades omedelbart men som kunde ha laddats precis innan användning.

Hur påverkar 'unused JavaScript' sidans hastighet

Oanvänd JavaScript påverkar direkt Lighthouse-mätvärdena. Det gör renderingen av en webbsida onödigt komplicerad, vilket gör det nästan omöjligt att få en hög Lighthouse-poäng. Din webbläsare behöver göra mer arbete innan webbsidan kan visas på skärmen. 

Tänk dock på att en Lighthouse-poäng inte är en Core Web Vitals-poäng. Core Web Vitals mäts med CrUX-data.

Det finns 2 problem med oanvänd JavaScript.

• Först och främst måste den JavaScript laddas ner. Dessa skript kommer att konkurrera om nätverksresurser. Detta kan ha en enorm påverkan på Largest Contentful Paint (LCP)
• För det andra behöver webbläsaren exekvera all den JavaScript. Medan webbläsaren exekverar den JavaScript kommer den i princip att sluta göra allt annat och kan inte svara på användarinmatning eller fortsätta tolka sidan. Detta påverkar både Largest Contentful Paint (LCP) och Interaction to Next Paint (INP)

Hur man hittar 'unused JavaScript'

För att hitta 'unused JavaScript' kan du läsa Lighthouse-granskningen eller använda 'Chrome Coverage Tool' för att få en komplett lista över alla JavaScript-filer och deras mängd oanvända bytes.

Öppna Chrome DevTools med kortkommandot ctrl-shift-i. Använd sedan kortkommandot ctr-shift-p för att öppna kommandomenyn och skriv 'coverage'. Välj 'Start instrumenting coverage and reload page'. Detta laddar om sidan och visar dig mängden oanvända bytes för alla filer som innehåller CSS eller JavaScript-kod.

Hur man fixar 'reduce unused JavaScript'

För att fixa varningen 'reduce unused JavaScript' måste du först spåra dess ursprung. Lighthouse ger dig en indikation på vilka skript som har en hög mängd oanvända bytes. Det finns 5 vanliga orsaker:

1. Ta bort onödiga eller triviala plugins. Om du använder ett pluginbaserat CMS som WordPress är det överlägset enklaste och mest effektiva sättet att rensa upp oanvänd kod att ta bort plugins som du inte behöver eller som enkelt kan ersättas av en enkel kodändring (till exempel ditt analytics-plugin, chatt-plugin, sociala delnings-plugin)
   
2. Ta bort oanvänd kod. Oanvänd kod är kod som inte längre används av den nuvarande webbplatsen. Den tar bara upp utrymme och bandbredd. Om du äger en webbplats föreslår jag att du schemalägger en kodstädning minst två gånger om året där du tar en ordentlig titt på dina egna skript och tar bort kod som inte längre behövs.
   
3. Skriv om dåligt kodade skript.  Dåligt kodade skript tenderar att ha många onödiga kontroller och if/else-satser. Dessa kontroller kanske aldrig används och vissa if/else-villkor kanske inte behövs. Om du har många äldre skript eller om din nuvarande JavaScript-utvecklare är bättre än den förra kan det vara en bra idé att se över äldre skript.
   
4. Rensa upp din tag manager och begränsa åtkomsten. Tag manager är en vanlig källa till oanvänd kod, särskilt när mindre tekniska avdelningar tillåts lägga till taggar. Många gånger glömmer de att ta bort sina oanvända taggar och tag managern blir huvudkällan till oanvänd JavaScript.
5. Ta bort onödiga importer (NextJS, React, VUE etc). De flesta SPA-miljöer importerar för många komponenter/funktioner. Dubbelkolla dina importer och ta bort oanvänd kod. 
6. Lazy load routes eller komponenter  (NextJS, React, VUE etc). Lazy loading av komponenter importerar bara dessa komponenter när de behövs. Detta tar omedelbart bort Lighthouse-varningen för oanvänd JavaScript för de sidor där du lazy loadar oanvänd kod.
7. Skjut upp laddningen av icke-kritiska skript. Ibland behöver du ett skript (till exempel för att skicka ett formulär) men du behöver det inte direkt. Och, låt oss vara ärliga, 98% av dina besökare kommer inte att registrera sig ändå. Så för det mesta är dessa skript oanvända. Det skulle vara mer meningsfullt att ladda detta skript när besökaren interagerar med formuläret, och inte under sidladdningen.

Lösning för 'reduce unused JavaScript'

Ibland är det inte möjligt att fixa alla varningar för oanvänd JavaScript. I så fall kan du försöka minimera effekten av dessa oanvända resurser

- Ladda alla JavaScript-resurser från din huvuddomän (detta undviker en ny nätverksanslutning)
- Förladda viktigare resurser som dina typsnitt och LCP-bildelementet.
- Skjut upp så mycket JavaScript som du kan
- Placera mindre viktig JavaScript längst ner på sidan