Critical CSS-extractor: stijlen boven de vouw inline zetten | We.Inc
Plak uw HTML en CSS, kies een schermformaat en houd alleen de regels over die opmaken wat zichtbaar is vóór het scrollen. Kopieer een inline stijlblok plus het preload-patroon.
Critical CSS-extractor
Critical CSS is de kleine set regels die nodig is om te tekenen wat een bezoeker ziet voordat hij scrolt. Plak hier de HTML en het stylesheet van een pagina, kies een schermformaat, en deze tool zet de pagina op in een vast kader, houdt de regels over die bij zichtbare elementen horen, en geeft u een inline stijlblok plus een uitgestelde stylesheet-link.
Wat de extractor bewaart
Soort regel
Bewaard als
Waarom
Stijlregel
De selector past op een element waarvan de bovenrand binnen de gekozen hoogte valt
Dat element wordt bij de eerste weergave getekend
html, body, :root, *
Altijd
Basislettertypen, kleuren en custom properties beïnvloeden alles wat zichtbaar is
@media-blok
Bewaard met alleen de passende regels erin
Andere schermformaten krijgen nog steeds de juiste eerste weergave
@font-face
Altijd (kan worden uitgezet)
Zichtbare tekst heeft een gedeclareerd lettertype nodig
@keyframes
De naam wordt gebruikt door een bewaarde regel
Animaties op zichtbare elementen blijven werken
Browsers wachten op elk stylesheet in de head voordat ze iets tekenen. Door de paar regels die het eerste scherm nodig heeft inline te zetten en het volledige bestand daarna zonder blokkeren te laden, verschijnt de pagina sneller. Deze tool maakt die selectie voor u uit code die u plakt. Hij draait in uw browser en haalt nooit een URL op, dus plak de uiteindelijke HTML en CSS van de pagina in plaats van een link.
Plak de HTML van de pagina (de inhoud van de body is genoeg) en de CSS uit het stylesheet.
Kies een vooraf ingesteld schermformaat of typ een breedte en vouwhoogte in pixels.
De tool rendert uw HTML in een afgeschermd kader op dat formaat met scripts uit, en controleert daarna elke selector tegen de elementen op het scherm.
Kopieer het inline stijlblok voor de head en de preload-link die daarna het volledige stylesheet laadt. De statistieken tonen hoeveel regels zijn bewaard en hoe groot het resultaat is.
Voer het uit op een telefoonformaat en een desktopformaat en voeg de twee resultaten samen, want de vouw ligt op elk ervan op een andere plek.
Interactieve toestanden zoals :hover en :focus worden op het element zelf gematcht, dus een zichtbare knop houdt zijn hover-regel. Verwijder ze met de hand als u het kleinste resultaat wilt.
Inhoud die JavaScript na het laden toevoegt, staat niet in de geplakte HTML, dus de stijlen daarvan worden niet gevonden. Plak de HTML zoals die eruitziet na het renderen als uw pagina zichzelf in de browser opbouwt.
Houd het inline blok klein. web.dev raadt aan de inhoud boven de vouw binnen ongeveer 14 KB gecomprimeerd te houden, zodat die in de eerste round trips kan aankomen.
Voer de extractie opnieuw uit zodra de bovenkant van de pagina verandert. Verouderde critical CSS veroorzaakt een flits van ongestijlde inhoud bij het eerste laden.
Veelgestelde vragen
Is dit hetzelfde als de pakketten Critical of Penthouse?
Het volgt hetzelfde idee op een eenvoudigere manier. Die commandoregeltools sturen een echte headless browser aan op uw gebouwde pagina's. Deze pagina gebruikt uw eigen browser en geplakte code, dus beschouw het resultaat als een goede benadering en test de pagina daarna.
Waarom heeft de preload-link onload nodig?
rel=preload met as=style downloadt het stylesheet zonder het toe te passen. De onload-handler zet rel om naar stylesheet zodra het bestand binnen is, waardoor het wordt toegepast zonder de eerste weergave te blokkeren. De noscript-kopie dekt bezoekers met uitgeschakelde scripts af.
Is inline CSS slecht voor caching?
Inline regels worden met elke HTML-pagina opnieuw verstuurd, en daarom moet het blok klein blijven. Het volledige stylesheet blijft een apart bestand, dus dat wordt na het eerste bezoek gewoon gecachet.
Kan de tool mijn live site lezen?
Nee. Een statische pagina in uw browser kan de code van een andere site niet laden, dus er wordt niets opgehaald. Open uw pagina, bekijk de broncode en het stylesheet, en plak beide hier. Niets wat u plakt wordt geüpload.
Wat als mijn CSS een framework zoals Tailwind gebruikt?
Plak het gecompileerde CSS-bestand dat uw build oplevert, niet de bron met @tailwind- of @import-regels. De extractor werkt met afgeronde regels, en utility classes in uw HTML worden gematcht zoals elke andere selector.
Waar de vouw echt ligt
Er is niet één vouw. Een telefoon in staande stand toont misschien 650 pixels hoogte, terwijl een laptop er 800 toont en een groot scherm meer. Kies de formaten die uw bezoekers het meest gebruiken, en houd wat marge onder de lijn aan, want mensen beginnen vaak meteen te scrollen.
De extractor telt een element als zichtbaar wanneer de bovenrand boven de gekozen hoogte ligt. Een hoge hero die op het scherm begint en eronder eindigt, wordt bewaard, en dat is precies wat u wilt.
De uitvoer in uw pagina zetten
Plaats het inline stijlblok in de head, vóór al het andere dat rendert. Vervang uw normale stylesheet-link door het preload-patroon, zodat de rest van de CSS laadt zonder de eerste weergave op te houden.
Controleer het resultaat met een vertraagd netwerk in de ontwikkelaarstools van uw browser. Als er iets verspringt of van stijl verandert zodra het volledige bestand binnen is, is een regel voor een zichtbaar element gemist; voeg die toe aan het inline blok.
Het laadpatroon dat de tool schrijft
Critical regels inline, en de rest laden zonder te blokkeren
Dit is het patroon dat op web.dev wordt beschreven. Het stijlblok bevat de geëxtraheerde regels; de preload-link haalt het volledige bestand op en past het toe bij onload, en de noscript-regel is de terugvaloptie.
Bekende beperkingen van een extractor in de browser
Wat u met de hand moet controleren
Situatie
Wat er gebeurt
Wat u doet
Stijlen toegevoegd door scripts
Niet gezien, scripts draaien niet in het kader
Plak de gerenderde HTML in plaats van het template
Afbeeldingen zonder width en height
Kunnen tot nul hoogte inklappen en latere inhoud omhoog trekken
Voeg width- en height-attributen toe aan afbeeldingen
Weblettertypen
Niet gedownload, dus tekst kan anders afbreken
Houd marge aan onder uw vouwhoogte
Selectors die de browser afwijst
Door de browser verwijderd vóór de controle
Herstel de syntaxis; de statistieken tonen hoeveel regels zijn gelezen
Zeer lange pagina's
Alleen het eerste scherm wordt bewaard, zoals bedoeld
Voer het opnieuw uit op elk schermformaat dat voor u telt
Critical CSS extraheren
De tool laadt met een voorbeeldpagina van een bakkerij, zodat u het resultaat ziet voordat u uw eigen code plakt.