Ressurser som blokkerer gjengivelse

Silktide kontrollerer om det finnes stilark og skript som nettleseren må laste ned helt før den kan vise noe på siden. Hvert av dem får besøkende til å stirre litt lenger på en tom skjerm.

Som standard blokkerer et stilark eller et skript som refereres til nær toppen av en side, gjengivelsen: Nettleseren viser ikke noe før filen er lastet inn, fordi filen kan endre hvordan alt ser ut eller oppfører seg.

Hvorfor dette er viktig

De tomme øyeblikkene før en side vises for første gang, er når besøkende avgjør om de skal vente. Hver fil som blokkerer gjengivelsen, legger til en ekstra rundtur på nettverket i denne tomme tiden, og forsinkelsene summeres raskt på mobiltilkoblinger – en håndfull blokkerende filer kan holde en ellers rask side hvit i flere sekunder.

Det meste av denne blokkeringen er unødvendig. Vanligvis trengs bare en liten del av sidens for å tegne det første skjermbildet, og det meste av trenger ikke å kjøres før siden vises.

Slik løser du det

Last inn skript uten blokkering ved å legge til defer (eller async for uavhengige skript, for eksempel Analytics):

<!-- Problem: blokkerer gjengivelsen til skriptet er lastet ned og kjørt -->
<script src="app.js"></script>

<!-- Løst: lastes ned parallelt og kjøres etter at siden er analysert -->
<script src="app.js" defer></script>

Legg den lille mengden CSS som trengs for det første skjermbildet, direkte inn på siden, og last inn de fullstendige stilarkene uten blokkering.
Gi stilark som bare gjelder i bestemte situasjoner, et media-attributt (for eksempel media="print"), slik at de slutter å blokkere gjengivelsen alle andre steder.
Reduser det som kan blokkere: fjern ubrukte stiler og skript, og hold resten lite – se CSS-minimering og minimert JavaScript.

Slik tester Silktide dette

Last inn siden i en ekte nettleser, med enhetstype, tilkoblingshastighet og teststedet som er konfigurert for hastighetstestene dine.
Finn hvert stilark og skript som blokkerte sidens første gjengivelse.
Beregn hvor lenge hvert av dem forsinket gjengivelsen, og rapporter hver fil med den beregnede besparelsen.
Gi siden karakter basert på den totale tiden som kan spares: rundt 100 millisekunder gir lavere karakter, og 200 millisekunder eller mer gir karakteren dårlig.

Feilsøking

Må ikke CSS blokkere gjengivelsen?

Stilarket som styrer det første skjermbildet, må gjøre det – det er tilsiktet, slik at besøkende aldri ser innhold uten stiler. Løsningen er ikke å fjerne CSS, men å redusere det som blokkerer: legg den kritiske delen direkte inn på siden, og last resten inn på en måte som ikke blokkerer.

Den blokkerende filen er et tredjepartsskript

Tag-behandlingssystemer, skrifttyper og chatmoduler er hyppige syndere. De fleste fungerer riktig med defer eller async – sjekk leverandørens gjeldende instruksjoner for innebygging, som ofte allerede inkluderer dette.