Renderingsblokerende ressourcer

Silktide tjekker for typografiark og scripts, som browseren skal downloade helt, før den kan vise noget på din side. Hver enkelt af dem får besøgende til at stirre på en tom skærm lidt længere.

Som standard blokerer et typografiark eller et script, der refereres til nær toppen af en side, gengivelsen: Browseren viser ikke noget, før filen er ankommet, fordi filen kan ændre, hvordan alt ser ud eller opfører sig.

Hvorfor det er vigtigt

De tomme øjeblikke, før en side vises første gang, er der, hvor besøgende beslutter, om de vil vente. Hver renderingsblokerende fil føjer en netværksrundtur til denne tomme ventetid, og forsinkelserne hober sig hurtigt op på mobilforbindelser – en håndfuld blokerende filer kan holde en ellers hurtig side hvid i sekunder.

Det meste af denne blokering er unødvendig. Typisk er kun en lille del af en sides nødvendig for at tegne den første skærm, og det meste behøver ikke at køre, før siden vises.

Sådan løser du det

Indlæs scripts uden blokering ved at tilføje defer (eller async for uafhængige scripts såsom Analytics):

<!-- Problem: blokerer gengivelsen, indtil det er downloadet og kørt -->
<script src="app.js"></script>

<!-- Løst: downloader parallelt, kører efter siden er fortolket -->
<script src="app.js" defer></script>

Indsæt den lille mængde CSS, der er nødvendig for den første skærm, direkte på siden, og indlæs de fulde typografiark uden blokering.
Giv typografiark, der kun gælder i bestemte situationer, en media-attribut (f.eks. media="print"), så de ikke længere blokerer gengivelsen alle andre steder.
Reducer det, der skal blokeres af: Fjern ubrugte typografier og scripts, og hold resten småt – se CSS-minificering og Minimeret JavaScript.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser med den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
Identificer hvert typografiark og script, der blokerede sidens første gengivelse.
Estimér den tid, hver enkelt holdt gengivelsen tilbage, og rapportér hver fil med dens estimerede besparelse.
Bedøm siden ud fra den samlede tid, der kunne spares: Omkring 100 millisekunder giver en lavere bedømmelse, og 200 millisekunder eller mere bedømmes som dårligt.

Fejlfinding

Skal CSS ikke blokere gengivelsen?

Det typografiark, der styrer den første skærm, skal – det er med vilje, så besøgende aldrig ser indhold uden formatering. Løsningen er ikke at fjerne CSS, men at reducere det, der blokerer: Indsæt den kritiske del direkte, og indlæs resten på en ikke-blokerende måde.

Den blokerende fil er et tredjepartsscript

Tagadministratorer, skrifttyper og chatwidgets er hyppige syndere. De fleste fungerer korrekt med defer eller async – tjek udbyderens aktuelle indlejringsvejledning, som ofte allerede omfatter det.