Optimering af webydeevne og Lighthouse · Lektion

Ressourcer, der blokerer rendering

Identificér og afhjælp effekten af renderingsblokerende CSS og JavaScript på den indledende sideindlæsningstid.

Lektion 2 af 412 trin

Ressourcer, der blokerer rendering er en gratis Optimering af webydeevne og Lighthouse-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Optimering af webydeevne og Lighthouse, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.

Hvad blokerer din side?

Når en browser indlæser en webside, skal den behandle forskellige ressourcer som HTML, CSS og JavaScript. Nogle gange skal bestemte ressourcer behandles helt, før browseren kan begynde at vise indhold for brugeren.

Disse kaldes render-blokerende ressourcer. De forhindrer browseren i at rendere siden, indtil de er behandlet, hvilket forsinker 'First Contentful Paint'.

Hurtigt kig: Browser-rendering

For at vise en side gennemgår browseren en række trin, der kaldes den kritiske renderingssti. Vigtige trin omfatter:

Fortolkning af HTML: Opbygger Document Object Model (DOM).
Fortolkning af CSS: Opbygger CSS Object Model (CSSOM).
Kombination: Opretter rendertræet (DOM + CSSOM).
Layout: Beregner elementernes placeringer og størrelser.
Tegning: Tegner pixels på skærmen.

Både DOM og CSSOM er nødvendige, før rendertræet kan opbygges, hvilket gør CSS til en afgørende del af renderingen.

CSS: Renderingsblokeringen

Som standard blokerer eksterne CSS-filer renderingen. Det betyder, at browseren sætter renderingen på pause, indtil alle eksterne stilark, der er knyttet til <head> i din HTML, er hentet, fortolket og anvendt.

Det er afgørende, fordi browseren skal vide, hvordan elementerne skal se ud, før den kan tegne dem korrekt. Hvis CSS tager lang tid at indlæse, vil dine brugere se en tom skærm i længere tid.

Eksempel: Standardblokering med CSS

Se på denne enkle HTML. Browseren stopper med at fortolke HTML og venter på, at style.css bliver hentet og behandlet, før den kan rendere noget.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

Betinget CSS med `media`

Du kan gøre noget CSS ikke-blokerende for renderingen ved at bruge attributten media i dit <link>-tag. Det fortæller browseren, at et stilark kun gælder under bestemte betingelser (f.eks. til udskrivning eller bestemte skærmstørrelser).

Hvis betingelsen for media ikke matcher det aktuelle visningsmiljø, henter browseren stadig CSS'en, men den blokerer ikke den indledende rendering.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Indlejring af nødvendige typografier

En anden strategi til at mindske CSS, der blokerer renderingen, er at indlejre kritiske typografier. Det er de minimale CSS-regler, der er nødvendige for at rendere indholdet "over folden" (det, brugerne ser først).

Ved at placere disse typografier direkte i et <style>-tag i HTML'ens <head> behøver browseren ikke at sende en ekstra netværksanmodning, hvilket gør den indledende rendering hurtigere. Den resterende, ikke-kritiske CSS kan indlæses asynkront.

JavaScript stopper alt

Ligesom CSS kan JavaScript også blokere renderingen. Når browseren møder et traditionelt <script>-tag (uden attributterne async eller defer), sætter den fortolkningen af HTML på pause.

Derefter henter, fortolker og kører den JavaScript-filen. Først når scriptet er færdigkørt, genoptages fortolkningen af HTML. Det kan forsinke renderingen betydeligt.

Eksempel: Standardblokering med JavaScript

Her sætter browseren fortolkningen af HTML-dokumentet på pause, når den rammer script.js. Hvis script.js er stor eller langsom at indlæse, bliver <h1>- og <p>-elementerne ikke fortolket eller rendret, før scriptet er færdigt.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

`async` og `defer` til scripts

HTML tilbyder to attributter til <script>-tags, som forhindrer JavaScript i at blokere renderingen:

async: Henter scriptet parallelt med fortolkningen af HTML. Kører det, så snart det er hentet, muligvis før fortolkningen af HTML er færdig. Egnet til uafhængige scripts.
defer: Henter scriptet parallelt med fortolkningen af HTML. Kører det først, når fortolkningen af HTML er helt færdig, men før hændelsen DOMContentLoaded. Bevarer rækkefølgen af kørsel.

Kodeeksempel: Ikke-blokerende JavaScript

Ved at tilføje async eller defer kan browseren fortsætte med at fortolke HTML, mens scripts hentes. Det forbedrer den oplevede ydeevne.

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

Find blokeringen

Hvilke af følgende ressourcer betragtes normalt som renderingsblokerende som standard?

Besvar den i den interaktive lektion

Vigtigste pointer

Ressourcer, der blokerer renderingen, forsinker visningen af din webside. Både ekstern CSS og traditionelt JavaScript kan blokere browserens renderingsproces.

CSS: Brug attributten media til betinget indlæsning, og overvej at indlejre kritiske typografier.
JavaScript: Brug async til uafhængige scripts eller defer til scripts, der afhænger af DOM, så hentning kan foregå parallelt, og kørsel ikke blokerer.

Optimering af disse ressourcer er et vigtigt skridt mod bedre ydeevne på nettet!

Gratis at komme i gang

Lær Optimering af webydeevne og Lighthouse med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Ressourcer, der blokerer rendering” gratis?

Ja — hele teksten til “Ressourcer, der blokerer rendering” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Optimering af webydeevne og Lighthouse-kurset, skal du opgradere til CoddyKit PRO. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Ressourcer, der blokerer rendering”?

Identificér og afhjælp effekten af renderingsblokerende CSS og JavaScript på den indledende sideindlæsningstid. Du øver dig i Optimering af webydeevne og Lighthouse med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Optimering af webydeevne og Lighthouse?

Der kræves ingen tidligere erfaring. Optimering af webydeevne og Lighthouse på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Ressourcer, der blokerer rendering”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Optimering af webydeevne og Lighthouse-lektion?

Ja. Alle Optimering af webydeevne og Lighthouse-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Optimering af webydeevne og Lighthouse