Isoleer de regels die bovenaan worden gebruikt

Front-endontwikkelaars isoleren hiermee de eerst benodigde CSS wanneer het zichtbare deel van een pagina sneller moet verschijnen.

Isoleer de regels die bovenaan worden gebruikt. De uitvoer blijft op je apparaat en is direct klaar om te kopiëren of aan te passen.

Hoe te gebruiken

Plak de HTML voor het deel van de pagina dat bovenaan zichtbaar is.
Voeg een scheidingsregel van twee streepjes toe.
Plak onder de scheidingsregel de volledige stylesheet die die pagina gebruikt.
Voer de extractie uit om de regels te krijgen die nodig zijn voor de eerste weergave.

Voorbeeld

Een front-endontwikkelaar optimaliseert een homepage waarvan de header en het menu snel moeten verschijnen. Hij plakt de HTML van de header, voegt de twee streepjes toe en neemt vervolgens de volledige stylesheet op. De uitvoer helpt om een kritiek CSS-blok voor te bereiden vóór verdere optimalisatie. Daarna test hij het resultaat op een kopie om ontbrekende regels op te sporen.

Invoer

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Limieten en formaten

Het hulpmiddel haalt geen pagina van een URL op; je moet zelf HTML en CSS aanleveren.
Stijlen die door JavaScript of complexe pseudoelementen zijn toegevoegd, kunnen ontbreken.
Test de geëxtraheerde regels in een browser voordat je ze inzet.
Een zeer grote pagina kan een kleinere, gerichtere selectie nodig hebben.
Opmerkingen en ongebruikte regels kunnen de uitvoer zwaarder maken.

Waar de verwerking gebeurt

De HTML en CSS die je plakt, blijven in je browser. De regelextractie gebeurt op je apparaat en er wordt niets vanaf de pagina verzonden. Het resultaat wordt niet bewaard nadat je weggaat.

Veelgestelde vragen

Welke HTML moet ik aanleveren?

Lever de markup voor wat gebruikers zien voordat ze scrollen, zoals de header, navigatie en het eerste contentblok. Kritieke CSS hangt af van die eerste viewport. Een bredere extractie levert meestal minder gerichte regels op.

Waarom ontbreken sommige regels?

Het hulpmiddel leest de HTML en CSS die je plakt, maar voert de JavaScript van de pagina niet uit. Klassen die later worden toegevoegd of stijlen die door de browser worden berekend, kunnen ontbreken. Voeg ze handmatig toe als de eerste weergave ze nodig heeft.

Kan ik de geëxtraheerde CSS direct publiceren?

Test het eerst op een kopie. Controleer of de eerste lay-out intact blijft en of lettertypen beschikbaar blijven. Kritieke CSS vult meestal de hoofdstylesheet aan in plaats van deze in elke situatie te vervangen.