JavaScript-placering: Head vs. Footer – Fordele og ulemper

Footer eller header JavaScript? Hvad betyder det for Core Web Vitals, og hvilken bør du bruge?

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

JavaScript-placering: Head vs. Footer – Fordele og ulemper

Når man udvikler websider, kan placeringen af JavaScript-kode have stor indflydelse på sidens ydeevne, indlæsningshastighed og user experience. Traditionelt har det været anbefalet at placere JavaScript i sidens <head>. Det er et sikkert valg, men er det det rigtige? I denne artikel vil vi undersøge forskellene mellem JavaScript i head og i footer af siden, og gennemgå fordele og ulemper ved hver tilgang samt de sammenhænge, hvor de er mest velegnede.

Baggrund: preload-scanneren

Preload-scanneren er en sekundær HTML-parser, der hurtigt scanner hele sidens HTML og henter kritiske ressourcer som billeder, CSS-filer, JavaScript-filer og andre aktiver, der er nødvendige for at siden kan rendere korrekt. Preload-scanneren henter normalt ressourcer i den rækkefølge, den opdager dem på siden. Det er her placeringen af JavaScript spiller ind – når JavaScript er placeret i footeren, opdages det senere og udløses til download efter ressourcerne over det.

JavaScript i Head: 

Placering af JavaScript-kode i <head>-sektionen af HTML-dokumentet har nogle fordele, især når det gælder kodeorganisering og adskillelse fra HTML-markeringen. Her er fordele og ulemper ved at bruge JavaScript i head:

Fordele:

  1. Kodeadskillelse: At holde JavaScript-kode i <head> giver en klar adskillelse mellem scriptlogikken og HTML-indholdet, hvilket gør kodebasen mere vedligeholdelig og læsbar.
  2. Tidlig download: JavaScript i head sættes i kø til download før alle ressourcerne i sidens body (som billeder, videoer og iframes)
  3. Tidligere eksekvering: Scripts, der sættes i kø til download, eksekveres normalt tidligere end scripts i footeren. Den præcise eksekveringstid afhænger af mange faktorer. Hvis du er interesseret, foreslår jeg, at du læser Defer vs Async JavaScript og hvordan dette påvirker Core Web Vitals

Ulemper:

  1. Render Blocking: Når JavaScript placeres i <head> (uden defer-attributten), kan det blokere renderingen af HTML-elementer, hvilket resulterer i en forsinkelse af sidens visning, indtil scripteksekveringen er fuldført.
  2. Langsommere sideindlæsning: På grund af den tidlige download konkurrerer det med andre vigtige ressourcer som Largest Contentful Paint-elementet.

Hvornår bør du placere JavaScript i head?

Vigtige scripts: Scripts, der er kritiske for rendering eller kritiske for sideoplevelsen, bør placeres i sidens head. For eksempel bør scripts, der håndterer din menu, din hovedslider eller din cookiemeddelelse, placeres i sidens head.

Feature Detection Scripts: I visse scenarier kan JavaScript-biblioteker som Modernizr, der bruges til feature detection, være nødvendige i <head> for at opdage browserens funktionaliteter tidligt i sidens livscyklus.

JavaScript i Footer: 

Placering af JavaScript-kode nederst på siden, lige før det afsluttende </body>-tag, er blevet en udbredt praksis. Dette sætter scriptet i kø til download efter de andre elementer i body som billeder og videoer. Dette forbedrer paint-hastigheden frem for funktionaliteten. Her er fordele og ulemper ved at bruge JavaScript i footeren:

Fordele:

  1. Hurtigere sideindlæsning: Ved at placere JavaScript i slutningen af siden indlæses HTML-indholdet først, og JavaScript eksekveres senere, hvilket resulterer i en hurtigere initial sideindlæsning.
  2. Undgå Single Points of Failure (SPOF'er): Ved at indlæse JavaScript sidst reduceres risikoen for at støde på SPOF'er, hvilket sikrer, at resten af sidens indhold er synligt, selv hvis JavaScript ikke indlæses eller eksekveres.

Ulemper:

  1. Sen eksekvering: JavaScript i footeren kan føre til forsinket eksekvering af visse scripts, hvilket påvirker funktionaliteter, der er afhængige af tidlig adgang til JavaScript.

Hvornår bør du placere JavaScript i footeren?

Mindre kritisk kode: For scripts, der ikke påvirker siderendering, eller funktionaliteter, der ikke er nødvendige umiddelbart ved sideindlæsning, kan placering i footeren føre til bedre samlet ydeevne.

Best practices og anbefalinger: 

I betragtning af de forskellige aspekter ved placering af JavaScript i head og footer, er her nogle best practices og anbefalinger:

  1. Render-kritiske scripts: Scripts, der påvirker sidens hovedindhold, bør indlæses renderblokerende i sidens head. Forsøg at undgå denne type scripts, da de kan have en enorm indvirkning på Core Web Vitals og pagespeed.

  2. Kritiske scripts: Scripts, der er vigtige for konvertering eller sideinteraktion, bør placeres asynced eller deferred i sidens head

  3. Normale scripts: Medmindre de påvirker layoutet eller kræver tidlig adgang, placér almindelige scripts i footeren for at forbedre sideindlæsningshastigheden.

  4. Nice-to-have scripts: Scripts, som du kunne undvære, hvis det var absolut nødvendigt, bør injiceres, når browseren er idle.

  5. Lyt til events. DOMContentLoaded eller load-eventet kan sikre, at JavaScript eksekveres ved eller efter disse timing-events uanset placeringen.

Beslutningen om at placere JavaScript i head eller footer af en webside bør baseres på websitets specifikke krav og funktionaliteterne i de involverede scripts. Placering af JavaScript i head tilbyder kodeadskillelse og fordele ved tidlig adgang, men kan føre til renderingsblokering og langsommere sideindlæsning. Omvendt giver JavaScript i footeren hurtigere sideindlæsningstider og minimerer SPOF-risici, men kan resultere i forsinket eksekvering for visse funktionaliteter. Som webudviklere er det vigtigt at forstå afvejningerne og træffe informerede beslutninger for at optimere user experience og den samlede ydeevne af websitet.

Eksempel 1: JavaScript i Head



    JavaScript in the Head Example
        <script src="script.js">


    Click Me

I dette eksempel er JavaScript-funktionen showMessage() placeret i <head>-sektionen af HTML-dokumentet. Funktionen kaldes, når der klikkes på knappen, og viser en alert. Dog vil body ikke blive parset, før filen 'script.js' er blevet indlæst og eksekveret.

Eksempel 2: JavaScript i Footer

I dette eksempel er den samme JavaScript-funktion showMessage() placeret nederst i <body>-sektionen, lige før det afsluttende </body>-tag. Placering af JavaScript i footeren gør det muligt for HTML-indholdet at indlæse først, og JavaScript-koden vil eksekvere, når der klikkes på knappen. Som resultat vises alerten uden nogen mærkbar forsinkelse, hvilket giver en bedre user experience, og dette script påvirkes ikke af filen 'script.js', da den vil blive downloadet i baggrunden.
Eksempel 3: Brug af event listeners


    Event listener Example
    


    



I dette eksempel bruges load event listener med callback-funktion til at sikre, at JavaScript-koden inde i funktionen kun eksekveres, efter at siden er fuldt indlæst, uanset om den er placeret i head eller footer. Denne tilgang sikrer, at koden ikke eksekveres, før alle elementer på siden er klar, hvilket giver en pålidelig og konsistent adfærd.
Disse eksempler demonstrerer forskellen i adfærd mellem JavaScript placeret i head og i footer. Placering af JavaScript i footeren kan føre til hurtigere sideindlæsning og en bedre user experience, især når man arbejder med større scripts eller funktionaliteter, der ikke kræver øjeblikkelig eksekvering. Dog kan visse scenarier, som feature detection eller brug af specifikke biblioteker, kræve, at JavaScript placeres i head. Overvej altid de specifikke krav til din webside og vælg den passende placering af JavaScript derefter.
 
 
 
 
 
 
 
 Performance is a Feature. 
 
 Treating speed as an afterthought fails. Build a performance culture with a dedicated 2-sprint optimization overhaul. 
 
  Initialize Project >>  
 
 
 
  •  2-Sprint Overhaul 
    •  
  •  Culture Building 
    •  
  •  Sustainable Speed 
    •  
 
 


 
 JavaScript-placering: Head vs. Footer – Fordele og ulemperCore Web Vitals JavaScript-placering: Head vs. Footer – Fordele og ulemper