Izolează regulile folosite în partea de sus

Dezvoltatorii front-end izolează astfel CSS-ul inițial când partea vizibilă a paginii trebuie să apară mai repede.

Izolează regulile folosite în partea de sus. Rezultatul rămâne în browser, gata de verificat și adaptat fără cont sau trimiterea datelor introduse.

Cum se folosește

Lipește HTML-ul pentru partea de sus vizibilă a paginii.
Adaugă o linie de separare formată din două cratime.
Lipește foaia de stil completă folosită de acea pagină sub separator.
Rulează extragerea pentru a obține regulile necesare primei randări.

Exemplu

Un dezvoltator front-end ajustează o pagină principală unde antetul și meniul trebuie să apară rapid. Lipește HTML-ul antetului, adaugă cele două cratime, apoi include foaia de stil completă. Rezultatul ajută la pregătirea unui bloc CSS critic înainte de optimizări suplimentare. Apoi testează rezultatul pe o copie pentru a depista regulile lipsă.

Date de intrare

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

Limite și formate

Instrumentul nu preia o pagină de la un URL; trebuie să furnizezi HTML-ul și CSS-ul.
Stilurile adăugate de JavaScript sau pseudoelementele complexe pot lipsi.
Testează regulile extrase într-un browser înainte de a le implementa.
O pagină foarte mare poate necesita o selecție mai mică și mai deliberată.
Comentariile și regulile neutilizate pot îngreuna rezultatul.

Unde are loc procesarea

HTML-ul și CSS-ul pe care le lipești rămân în browserul tău. Extragerea regulilor are loc pe dispozitivul tău și nimic nu este trimis din pagină. Rezultatul nu este păstrat după ce pleci.

Întrebări frecvente

Ce HTML ar trebui să furnizez?

Furnizează marcajul pentru ceea ce văd utilizatorii înainte de derulare, cum ar fi antetul, navigarea și primul bloc de conținut. CSS-ul critic depinde de acea zonă vizibilă inițială. O extragere mai amplă produce de obicei reguli mai puțin concentrate.

De ce lipsesc unele reguli?

Instrumentul citește HTML-ul și CSS-ul pe care le lipești, dar nu rulează JavaScriptul paginii. Clasele adăugate ulterior sau stilurile calculate de browser pot lipsi. Adaugă-le manual dacă prima randare are nevoie de ele.

Pot publica CSS-ul extras direct?

Testează-l mai întâi pe o copie. Verifică dacă aspectul inițial rămâne intact și dacă fonturile rămân disponibile. CSS-ul critic completează de obicei foaia de stil principală, mai degrabă decât să o înlocuiască în orice situație.