Kritisk CSS-generator
En gratis browser-widget til en avanceret kritisk CSS-generator og optimering over skillelinjen .
Optimering over skillelinjen
Introduktion
Critical CSS-generatoren gør det muligt at løse Googles Core Web Vitals for at fjerne ubrugt CSS- straf, udelukkende på basis af minimum CSS. Det gør det muligt at opnå et pixel perfekt resultat .
Det bedste kritiske CSS-resultat opnås i en rigtig browser.
Browser-widgetten udføres på den side, hvor kritisk CSS skal udtrækkes og har derfor fuld native adgang til det originale CSS-miljø.
Du kan vælge de stylesheets eller inline stylesheet-elementer, som du vil udtrække kritisk CSS fra. Dette er praktisk til at skabe kritisk CSS, der kan deles mellem sider.
Browser-widgetten har også en funktion til at fjerne kritisk CSS fra stylesheets.
Værktøjet er spionfrit. Ingen Google Analytics eller sporing. Sikker at bruge og kan bruges lokalt gennem en Service Worker-cache.
Browser-widgetten giver et eksempel på mere avanceret kritisk CSS-software, der kan bruges gennem en Chrome-browser i Google Cloud. Se vores professionelle optimeringsplugin for mere information.
Installere
For at installere widgetten
til favoritlinjen eller kopiere og indsætte koden nedenfor.x.pagespeed.pro
til at bevare indstillinger på tværs af domæner og bruge widgetten offline eller på localhost
.Funktioner
Avanceret kritisk CSS-generator
- Specialudviklet baseret på PostCSS , en af de bedste CSS-parsere.
- Understøtter flere visningsporte (desktop + mobil) til responsiv kritisk CSS .
- Dukkefører som browserkontrol, herunder klik, musehændelser (hover, flyt osv.), rulning, udførelse af brugerdefineret javascript-kode og meget mere.
- Rå ikke-optimeret rent kritisk CSS-output.
Optimering over skillelinjen
- Sammenlign kritisk CSS med den originale CSS.
- Tilpasbare pixelmålelinealer.
Avancerede optimeringsværktøjer
- Ubrugt CSS-fjerner til at fjerne kritisk CSS fra stylesheets.
- Professionel CSS-komprimering (minify) og optimeringssoftware.
- Ødelagt CSS reparation. Et værktøj til at rette forkert udformet CSS.
- Autopræfikser. Et værktøj til at anvende browserpræfikser til CSS.
- CSS statistik og analyser.
- CSS forskønne.
- Avanceret CSS fnug.
- Dublet CSS-fjerner.
- Avanceret CSS-editor forbundet til CSS lint med optimeringstip.
Sådan bruges
Trin 1: start browser-widgetten på en side
Naviger til den side, som du vil udtrække kritisk CSS for, og start browser-widgetten. Klik her for installationsvejledning.
Trin 2: generer kritisk CSS
Den kritiske CSS-generator kan tilgås via fanen Værktøjer i overskriften.
Konfigurer JSON ved hjælp af mulighederne i dokumentationen .
Trin 3: optimer resultatet
Outputtet fra den kritiske CSS-generator er råt og kræver yderligere optimering såsom komprimering.
Knappen Optimer i redigeringsmenuen gør det muligt at anvende avanceret kodeoptimering og komprimering.
Dokumentation
Kritisk CSS-generator
Den kritiske CSS-generator accepterer følgende muligheder.
Eksempel Kritisk CSS-generatorkonfiguration
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [
"/\#C/",
"/\.chattxt/"
],
"propertiesToKeep": [],
"propertiesToRemove": [
"/(.*)transition(.*)/i",
"cursor",
"pointer-events",
"/(-webkit-)?tap-highlight-color/i",
"/(.*)user-select/i"
],
"pseudoSelectorsToKeep": [
"::before",
"::after",
"::first-letter",
"::first-line",
":before",
":after",
":first-letter",
":first-line",
":visited",
"/:nth-child.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"maxEmbeddedBase64Length": 1000,
"strictParser": false,
"ui_actions": [
{
"viewport": "360x640",
"notes": "Indstil viewport til CSS-opdagelse over skillelinjen."
},
{
"wait": 1000,
"notes": "Vent i 1000ms for at gøre det muligt for viewporten at gengive."
},
{
"run": true,
"notes": "Kør kritisk CSS-generator (CSS-beregning over skillelinjen)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Affyr nyt MouseEvent på et.nav-menu DOM-element."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Udfør et script, i dette tilfælde luk menuen, før du fortsætter med næste visningsport."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
UI-handlinger af Critical CSS-generatoren
Den kritiske CSS-generator giver Puppeteer-lignende browserkontrol. Parameteren ui_actions
accepterer et array med UI-handlingsobjekter, der definerer UI-tilstandsændringer i kronologisk rækkefølge.
run
Kør den kritiske CSS-generator i den aktuelle UI-tilstand. Denne handling skal gentages, hver gang UI-tilstanden har ændret sig for at opdage ny CSS-kode over skillelinjen.
{
"run": true
}
wait
Vent et antal millisekunder, før du fortsætter med den næste handling.
{
"wait": 1000
}
viewport
Indstil visningsportens størrelse.
{
"viewport": "1300x900"
}
scroll
Rul gennem visningsporten. Indstillingen accepterer en numerisk værdi (pixel fra toppen), en procentstreng ( 50%
) eller en matrix med [x,y]
-positioner i pixels.
{
"scroll": 400
}
event
Udløs en browserhændelse ( new Event()
) på en valgfri DOM-vælger.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Udløs en musehændelse ( new MouseEvent()
) på en valgfri DOM-vælger. Handlingen accepterer en mouseEventInit
-parameter med MouseEvent-indstillinger , som inkluderer muligheden for at indstille x,y-koordinaterne. Når mouseEventInit
er udeladt, er standardindstillingerne {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Evaluer javascript-kode. Denne handling gør det muligt at udføre javascript-kode på en side, f.eks. for at lukke popups, før der foretages yderligere UI-tilstandsændringer.
{
"script": "Popups.close();"
}
fn
Udfør en javascript-funktion. Denne handling gør det muligt at udføre en forudkonfigureret javascript-funktion. Den ekstra mulighed "promise":true
gør det muligt at forvente et løfte og vente på, at løftet løses, før du fortsætter med den næste handling.
{
"fn": "action_to_perform",
"promise": true
}
notes
Hvert handlingsobjekt accepterer en notes
, der kan bruges til at tilføje beskrivende tekst.
{
"script": "add_to_cart();",
"notes": "beskrivelse af UI-handling til personlig brug"
}
Eksempel UI-handlinger config
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Indstil viewport til CSS-opdagelse over skillelinjen."
},
{
"wait": 1000,
"notes": "Vent i 1000ms for at gøre det muligt for viewporten at gengive."
},
{
"run": true,
"notes": "Kør kritisk CSS-generator (CSS-beregning over skillelinjen)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Affyr nyt MouseEvent på et.nav-menu DOM-element."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Udfør et script, i dette tilfælde luk menuen, før du fortsætter med næste visningsport."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Ubrugt CSS-fjerner
Den ubrugte CSS-fjerner bruger den samme software som den kritiske CSS-udtrækker og accepterer næsten de samme konfigurationsmuligheder, inklusive Puppeteer-lignende browserkontrol gennem UI-handlinger. Værktøjet gør det også muligt at udtrække ubrugt CSS.
Eksempel på konfiguration af ubrugt CSS-fjerner
{
"atRulesToKeep": [
"charset",
"keyframes",
"import",
"namespace",
"page"
],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"pseudoSelectorsToKeep": [
"/:.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"strictParser": false,
"ui_actions": [
{
run: true
}
]
}
Dublet CSS-fjerner
Duplikat-CSS-fjerneren gør det muligt at sammenligne to stylesheets og fjerne eller udtrække den duplikerede CSS.
Eksempel på konfiguration af dublet CSS-fjerner
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
Det andet inputfelt accepterer stylesheet-indeksnummeret. Du kan finde indekset for et stylesheet på stylesheet-oversigten på fanen Indstillinger.
Du kan uploade et stylesheet eller sammenligne stylesheets fra eksterne URL(er) ved at oprette et nyt stylesheet. Du kan derefter importere URL'er eller uploade stylesheets og bruge indekset fra det nye stylesheet i duplikat-CSS-fjerneren.
Når du er konfigureret, skal du trykke på knappen for at starte duplikat-CSS-fjerneren. En CSS-kommentar vil vise grundlæggende statistik for den resulterende reducerede CSS.