Isolera reglerna som används överst

Frontendutvecklare isolerar den CSS som behövs först när den synliga delen av en sida måste visas snabbare.

Isolera reglerna som används överst. Dina uppgifter stannar lokalt medan resultatet är lätt att kontrollera och återanvända.

Så använder du

Klistra in HTML-koden för den del av sidan som syns högst upp.
Lägg till en avgränsningsrad gjord av två bindestreck.
Klistra in det fullständiga formatmallen som används av den sidan under avgränsningen.
Kör extraheringen för att få de regler som behövs för den första renderingen.

Exempel

En frontendutvecklare finjusterar en startsida där sidhuvudet och menyn måste visas snabbt. De klistrar in sidhuvudets HTML, lägger till de två bindestrecken och inkluderar sedan hela formatmallen. Resultatet hjälper till att förbereda ett kritiskt CSS-block före ytterligare optimering. De testar sedan resultatet på en kopia för att upptäcka saknade regler.

Indata

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

Gränser och format

Verktyget hämtar inte en sida från en URL; du måste själv ange HTML och CSS.
Stilar som läggs till av JavaScript eller komplexa pseudoelement kan saknas.
Testa de extraherade reglerna i en webbläsare innan du distribuerar dem.
En mycket stor sida kan kräva ett mindre, mer medvetet urval.
Kommentarer och oanvända regler kan göra resultatet tyngre.

Var bearbetningen sker

HTML och CSS som du klistrar in stannar i din webbläsare. Regelutvinning sker på din enhet, och ingenting skickas iväg från sidan. Resultatet sparas inte efter att du lämnar sidan.

Vanliga frågor

Vilken HTML ska jag ange?

Ange markeringen för det användare ser innan de scrollar, till exempel sidhuvud, navigering och första innehållsblocket. Kritisk CSS beror på den första vyn. Ett bredare utdrag ger vanligtvis mindre fokuserade regler.

Varför saknas vissa regler?

Verktyget läser HTML och CSS som du klistrar in, men det kör inte sidans JavaScript. Klasser som läggs till senare eller stilar som beräknas av webbläsaren kan saknas. Lägg till dem manuellt om den första renderingen behöver dem.

Kan jag publicera den extraherade CSS:en direkt?

Testa den på en kopia först. Kontrollera att den initiala layouten förblir intakt och att teckensnitt fortfarande är tillgängliga. Kritisk CSS kompletterar vanligtvis huvudformatmallen snarare än att ersätta den i alla situationer.