Bronnen die rendering blokkeren

Silktide voert controles uit op stylesheets en scripts die de browser volledig moet downloaden voordat er iets op je pagina kan worden weergegeven. Elk van deze bestanden zorgt ervoor dat bezoekers iets langer naar een leeg scherm staren.

Standaard blokkeert een stylesheet of script waarnaar bovenaan een pagina wordt verwezen de rendering: de browser geeft niets weer totdat het bestand is aangekomen, omdat het bestand mogelijk bepaalt hoe alles eruitziet of werkt.

Waarom dit belangrijk is

De lege momenten voordat een pagina voor het eerst verschijnt, zijn de momenten waarop bezoekers beslissen of ze blijven wachten. Elk bestand dat rendering blokkeert, voegt een extra heen-en-terugreis over het netwerk toe aan die lege tijd, en de vertragingen lopen snel op bij mobiele verbindingen: een handvol blokkerende bestanden kan een verder snelle pagina secondenlang wit houden.

Het grootste deel van die blokkering is onnodig. Meestal is slechts een klein deel van de van een pagina nodig om het eerste scherm te tekenen, en hoeft de meeste niet te worden uitgevoerd voordat de pagina verschijnt.

Zo los je het op

Laad scripts zonder blokkering door defer toe te voegen (of async voor onafhankelijke scripts zoals Analytics):

<!-- Probleem: blokkeert rendering totdat het script is gedownload en uitgevoerd -->
<script src="app.js"></script>

<!-- Opgelost: wordt parallel gedownload en uitgevoerd nadat de pagina is geparseerd -->
<script src="app.js" defer></script>

Plaats de kleine hoeveelheid CSS die nodig is voor het eerste scherm rechtstreeks in de pagina en laad de volledige stylesheets zonder blokkering.
Geef stylesheets die alleen in bepaalde situaties van toepassing zijn een kenmerk media (zoals media="print"), zodat ze rendering overal elders niet blokkeren.
Verminder wat er geblokkeerd kan worden: verwijder ongebruikte styles en scripts en houd de rest klein. Zie CSS-minificatie en Geminificeerde JavaScript.

Zo test Silktide dit

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
Identificeer elke stylesheet en elk script dat de eerste paint van de pagina blokkeerde.
Schat in hoeveel tijd elk bestand de rendering vertraagde en rapporteer elk bestand met de geschatte besparing.
Beoordeel de pagina op basis van de totale tijd die kan worden bespaard: ongeveer 100 milliseconden leidt tot een lagere beoordeling en 200 milliseconden of meer wordt als slecht beoordeeld.

Problemen oplossen

Moet CSS rendering niet blokkeren?

De stylesheet die het eerste scherm aanstuurt doet dat inderdaad. Dat is bewust zo, zodat bezoekers nooit ongestileerde content zien. De oplossing is niet om CSS te verwijderen, maar om wat blokkeert kleiner te maken: plaats het kritieke deel inline en laad de rest op een niet-blokkerende manier.

Het blokkerende bestand is een script van derden

Tagmanagers, lettertypen en chatwidgets zijn vaak de boosdoeners. De meeste werken correct met defer of async. Controleer de actuele embedinstructies van de aanbieder; daar staat dit vaak al in.