Resurser som blockerar rendering

Silktide kontrollerar om det finns stilmallar och skript som webbläsaren måste ladda ned helt innan den kan visa något på sidan. Var och en av dem får besökarna att stirra på en tom skärm lite längre.

Som standard blockerar en stilmall eller ett skript som refereras till nära sidans början renderingen: webbläsaren visar inget förrän filen har kommit fram, eftersom filen kan ändra hur allt ser ut eller fungerar.

Varför det här är viktigt

De tomma ögonblicken innan en sida visas första gången är när besökarna bestämmer sig för om de ska vänta. Varje fil som blockerar rendering lägger till en nätverksrundtur under den tomma tiden, och fördröjningarna ackumuleras snabbt i mobila nätverk – en handfull blockerande filer kan hålla en sida som annars är snabb vit i flera sekunder.

Det mesta av den här blockeringen är onödigt. Vanligtvis behövs bara en liten del av en sidas för att rita den första skärmen, och det mesta av behöver inte köras innan sidan visas.

Så åtgärdar du det

Ladda skript utan att blockera genom att lägga till defer (eller async för fristående skript, till exempel analysverktyg):

<!-- Problem: blockerar rendering tills filen har laddats ned och körts -->
<script src="app.js"></script>

<!-- Åtgärdat: laddas ned parallellt och körs efter att sidan har tolkats -->
<script src="app.js" defer></script>

Infoga den lilla mängd CSS som behövs för den första skärmen direkt på sidan, och ladda de fullständiga stilmallarna utan att blockera.
Lägg till attributet media på stilmallar som bara gäller i vissa situationer (till exempel media="print"), så att de slutar blockera rendering i alla andra situationer.
Minska mängden som kan blockera: ta bort oanvända stilar och skript och håll resten små – se CSS-minifiering och Minifierad JavaScript.

Så testar Silktide detta

Ladda sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Identifiera varje stilmall och skript som blockerade sidans första rendering.
Uppskatta hur länge varje fil fördröjde renderingen och rapportera varje fil med den uppskattade besparingen.
Bedöm sidan utifrån den totala tiden som skulle kunna sparas: omkring 100 millisekunder ger ett sämre resultat, och 200 millisekunder eller mer bedöms som dåligt.

Felsökning

Måste inte CSS blockera rendering?

Det gör stilmallen som styr den första skärmen – det är avsiktligt, så att besökarna aldrig ser ostylat innehåll. Lösningen är inte att ta bort CSS, utan att minska det som blockerar: infoga den kritiska delen och ladda resten på ett sätt som inte blockerar.

Den blockerande filen är ett skript från en tredje part

Tagghanterare, teckensnitt och chattwidgetar är vanliga orsaker. Det mesta fungerar korrekt med defer eller async – kontrollera leverantörens aktuella instruktioner för inbäddning, som ofta redan innehåller detta.