🚀 Kriitiline CSS veebisaidi kiirendamiseks: genereerimine, inlining ja automatiseerimine 2026. aastal

Q: Kas ma võin lihtsalt kõik sildid jaluseossa tõsta ja selle vaeva ära jätta?

Tehniliselt mitte. HTML-i spetsifikatsioon nõuab kasutamist ainult sektsioonis. Praktikas brauserid renderdavad lehti, kus on jaluses, kuid sa saad stiilimata sisu vilkumise (FOUC), kuni stiilid laadivad. See on vastuvõetav lihtsale visiitkaardisaidile, kuid mitte äriprojektile. Õige lähenemine: kriitiline CSS sektsiooni sisseehitatult, ülejäänu asünkroonne laadimine loadCSS või media="print" koos onload="this.media='all'" abil. Jaluseossa tõstmine on ajutine lahendus, mis toimib visuaalse hüppe hinnaga.

Sinu leht laeb 3 sekundit ja külastajad lahkuvad. Avad Google PageSpeed Insightsi ja seal on see punaselt: „Eliminate render-blocking CSS". Tuttav olukord? HTTP Archive 2025. aasta andmete kohaselt laeb keskmine leht 7 välist stiililehte ja CSS-i keskmine maht on ületanud 120 KB. Iga fail <head>-is on barjäär kasutaja ja sisu vahel.

Probleem pole „raske" CSS. Brauser ei kuva ühtegi pikslit enne, kui see on KÕIK stiilid alla laadinud ja parsitud. Isegi need, mis kujundavad jalust 4000. piksli juures. Lahendus on kriitiline CSS: tehnika, mis eraldab täielikust stiililehest ainult nähtava vaateala jaoks vajaliku ja manustab selle otse <head>-i. Ülejäänu laeb asünkroonselt ega blokeeri midagi.

Rakendasime kriitilise CSS-i kõigis techblogi projektides ja ehitasime välja töötava töövoo: alates käsitsi genereerimisest 30 sekundiga kuni täieliku automatiseerimiseni Gulp'i ja WordPressi pluginatega. Allpool on samm-sammuline juhend ilma ülearuse kohevuseta.

💡 Kiire ülevaade:

Mõista renderdamist blokeerivaid mehhanisme ja seda, miks brauser ootab CSS-i isegi siis, kui HTML on valmis
Vali õige tööriist: tasuta veebigeneraator 10 sekundiga, Penthouse npm-projektidele või WP Rocketi / Autoptimize'i kombinatsioon WordPressile
Seadista Gulp'i töövoog kriitilise CSS-i automaatseks uuesti genereerimiseks igal juurutamisel
Väldi levinud lõkse: FOUC, JS-sisu, meediapäringute probleemid

Mis on kriitiline CSS ja miks brauser aeglustub

Brauser ehitab kaks struktuuri: DOM-i HTML-ist ja CSSOM-i stiilidest. Kuni CSSOM pole valmis, renderdamine peatub. See ongi renderdamist blokeeriv CSS: leht jääb tühjaks, kuni kõik <head>-is olevad stiililehed laadivad.

Google PageSpeed Insights diagnoosib probleemi otse:

Teie lehel on 3 blokeerivat CSS-ressurssi. See põhjustab viivitust renderdamisel. Ühtegi „above the fold" sisu ei saa renderdada, ootamata järgmiste ressursside laadimist.

Mõiste „above the fold" pärineb ajalehtedest. Veebis tähendab see nähtavat ala enne kerimist: lauaarvutil umbes 600 px, sülearvutil 900 px, nutitelefonil 400 px. Enamik arendajaid sihib ohutuid väärtusi 1300 px laiust ja 900 px kõrgust.

Kriitiline CSS on minimaalne stiilide komplekt, mis on vajalik ainult selle ala renderdamiseks. Grid, navigatsioon, fondid, hero-sektsioon. Kõik muu lükatakse edasi ja laeb asünkroonselt: leht ilmub koheselt, samal ajal kui täiendavad stiilid laadivad taustal.

Numbrid on märkimisväärsed. Google'i andmetel vähendab kriitilise CSS-i manustamine First Contentful Paint'i mobiilseadmetes 0,5-1,2 sekundit. E-kaubanduse puhul mõjutab see otseselt konversiooni: Portenti uuring näitas, et saidid, mille FCP on alla 1 sekundi, konverteerivad 3 korda paremini kui saidid, mille FCP on 3 sekundit.

Genereerimise tööriistad: tasuta veebist kuni ärilise API-ni

Kriitilise CSS-i käsitsi genereerimine on võimatu. Vajad tööriista, mis renderdab lehe peata brauseris ja eraldab ainult kasutatud stiilid. Siin on kolm toimivat varianti.

Tööriist	Tüüp	Hind	Automatiseerimine	Parim kasutus
Critical Path CSS Generator	Veebipõhine	Tasuta	Ei	Üksikud lehed, alustamiseks
Penthouse	npm-pakett	Tasuta	Jah, Gulp'i/skriptide kaudu	Arendajad, pakktöötlus
criticalcss.com	SaaS	Alates $10/kuus	Jah, API + WordPress	Tootmiskeskkond, suured saidid

Critical Path CSS Generator: veebis, 10 sekundiga

Jonas Ohlssoni Critical Path CSS Generator on tasuta tööriist, millest tasub alustada. Liides on lihtne: kleebi lehe URL, kleebi oma TÄIELIK CSS (isegi 200 KB minifitseeritult), vajuta nuppu ja saad stiilid „above-the-fold" ala jaoks.

Plussid: null barjääri alustamiseks. Pole vaja Node.js-i, npm-i ega skripte. Miinused: puhtalt käsitsi töö. Töötled iga lehte eraldi ja kui stiilid muutuvad, kordad kõike. Toimib 5-lehelise saidi puhul, kuid 50 lehekülge muutub piinarikkaks.

Generaatori looja käivitas hiljem ärilise criticalcss.com teenuse, mis on sama idee edasiarendus automaatsete uuenduste, ekraanipildi valideerimise ja API-ga pakktöötluseks.

Penthouse: käsurea generaator Gulp'i jaoks

Penthouse (2680+ tähte GitHubis) on sama autori npm-pakett. Kapoti all: Puppeteer ja peata Chromium. See avab lehe, tuvastab antud vaateava jaoks kasutatava CSS-i ja viskab ülejäänu minema.

Paigaldamine:

1 npm install --save-dev penthouse

Minimaalne väljakutse Node'i skriptist:

1 const penthouse = require('penthouse');
2 const fs = require('fs');
3  
4 penthouse({
5   url: 'https://example.com',
6   cssString: fs.readFileSync('./style.css', 'utf8'),
7   width: 1300,
8   height: 900
9 }).then(criticalCss => {
10   fs.writeFileSync('./critical.css', criticalCss);
11 });

Laius 1300 ja kõrgus 900 on empiiriliselt ohutud väärtused. Meediapäringud, mis on kriitilisest vaateavast laiemad, eemaldatakse vaikimisi. Nende säilitamiseks kasuta lippu keepLargerMediaQueries: true.

Oluline märkus: Penthouse töötab JavaScript keelatuna. Kui „above the fold" sisu genereerib JS-raamistik, on HTML enne hüdratsiooni tühi ja Penthouse ei leia ühtegi stiili. Lahendus: serveripoolne renderdamine (SSR) või parameeter forceInclude koos selektoritega, mida jõuga säilitada.

WP Rocket ja Autoptimize: kaks WordPressi pluginat

Kui su sait töötab WordPressil, on käsitsi kriitilise CSS-i genereerimine tarbetu vaev. Palju lehti, palju malle, muutuvad stiilid. Kaks pluginat lahendavad ülesande täielikult.

WP Rocket on tasuline plugin (59 €/aastas 1 saidi kohta, 119 € 3 saidi eest, 299 € 50 saidi eest). Sisseehitatud valik „Remove Unused CSS" genereerib automaatselt iga lehe jaoks kriitilise CSS-i, manustab selle <head>-i ja laeb ülejäänu asünkroonselt. Kaks linnukest ja soovitus „Eliminate render-blocking resources" on lahendatud. Boonus: sisseehitatud Rocket Insightsi keskus, mida veab GTmetrix, kuvab mõõdikud otse WordPressi administraatoriliideses.

Autoptimize on tasuta plugin valikuga „Inline and Defer CSS". Põhiversioon genereerib kogu saidi jaoks ÜHE kriitilise CSS-faili, mis praktikas ei tööta (erinevad lehed, erinev „above the fold" sisu). Lahendus: integratsioon criticalcss.com teenusega (WordPressi plaan, alates 10 $/kuus). Plugin küsib automaatselt API kaudu kriitilist CSS-i, manustab selle ja uuendab muudatuste korral.

Enamiku WordPressi kasutajate jaoks lahendab WP Rocketi või Autoptimize + criticalcss.com kombinatsioon probleemi täielikult. Ülejäänud artikkel on neile, kes ehitavad kohandatud saite.

Arendaja töökohal koodiredaktori ja pehme stuudiovalgustusega

Käsitsi töövoog: genereerimine, sisestamine, kontrollimine

Kui ehitad saiti ilma CMS-ita, mahub protsess nelja sammu sisse.

1. samm. Kopeeri KOGU oma CSS. Kombineeri kõik saidi stiilid ÜHTE faili. Kui kirjutad Sassi, kompileeri see. Kui kasutad raamistikku nagu Bootstrap või Tailwind, kaasa selle CSS täielikult. Ära arva, mida „tõenäoliselt vaja ei lähe"; generaator selgitab selle ise välja.

2. samm. Genereeri kriitiline CSS veebigeneraatori või Penthouse'i abil. Väljund on minifitseeritud stiiliplokk, mis vastutab ainult „above the fold" osa eest.

3. samm. Sisesta kriitiline CSS <style> sildi sisse <head>-is. See on ülioluline: manustatud stiilid ei tekita täiendavaid HTTP-päringuid ja brauser töötleb neid kohe. Tulemus näeb välja umbes selline:

1 <!DOCTYPE html>
2 <html lang="ru">
3 <head>
4     <meta charset="UTF-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6     <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style>
7     <title>Page Title</title>
8 </head>

4. samm: vii välised CSS- ja JS-failid <head>-ist lehe lõppu, enne </body> sulgevat märgendit. Jah, <link rel="stylesheet"> jaluses on spetsifikatsiooni järgi tehniliselt vigane, kuid praktikas töötab see kõigis brauserites ja lahendab blokeerimisprobleemi. Alternatiiv on Filament Groupi loadCSS asünkroonseks stiililaadimiseks ilma faili lehe lõppu tõstmata.

Lõpuks kontrolli tulemust Google PageSpeed Insightsi abil. Kas soovitus „Kõrvalda renderdamist blokeerivad ressursid" kadus? Siis tegid kõik õigesti.

Gulp + Penthouse: automatiseerimine projektidele, kus pole WordPressi

Iga stiilimuudatus nõuab kriitilise CSS-i uuesti genereerimist. Käsitsi tehes on see meeletult tüütu. Gulp automatiseerib selle protsessi.

Meie tootmise töövoog:

1 // gulpfile.js
2 const gulp = require('gulp');
3 const penthouse = require('penthouse');
4 const fs = require('fs');
5 const urlList = require('./criticalcss-pagelist.json');
6  
7 gulp.task('criticalcss', function () {
8   urlList.urls.forEach(function (item) {
9     penthouse({
10       url: item.link,
11       css: './css/style.min.css',
12       width: 1300,
13       height: 900,
14       keepLargerMediaQueries: false,
15       renderWaitTime: 100,
16       timeout: 30000
17     }).then(function (criticalCss) {
18       fs.writeFileSync(item.output, criticalCss);
19       console.log('✓ Critical CSS generated: ' + item.link);
20     }).catch(function (err) {
21       console.error('✗ Error for ' + item.link + ': ' + err.message);
22     });
23   });
24 });

Fail criticalcss-pagelist.json koos URL-ide ja väljundfailide loendiga:

1 {
2   "urls": [
3     { "link": "https://example.com", "output": "./critical/home.php" },
4     { "link": "https://example.com/about", "output": "./critical/about.php" },
5     { "link": "https://example.com/contact", "output": "./critical/contact.php" }
6   ]
7 }

Kirjutame väljundi PHP-failidesse, mis mähivad CSS-i ja lisatakse include abil vastava malli <head> sektsiooni. Kohanda oma tehnoloogiapinu järgi: kirjuta .css faili, lisa serveripoolse kaasamisega, mis iganes toimib.

Käivita: gulp criticalcss ja kõik lehed töödeldakse ühe korraga. Haagi see ülesanne CI/CD-sse juurutamisel ja kriitiline CSS püsib ajakohane.

Probleemid, millega sa kokku puutud

Kriitilisel CSS-il on omad teravad nurgad. Siin on, mida me praktikas tabasime.

Stiilimata sisu vilkumine (FOUC). Kriitiline CSS ei katnud mõnda elementi ja kasutaja näeb stiilihüpet, kui täielikud stiilid laadivad. Põhjus: sisu, mis on paigutatud vaateaknast väljapoole, kasutades absolute või transform atribuute, ja generaator jättis selle märkamata. Lahendus: forceInclude lipp koos probleemse elemendi selektoriga.

JS-i loodud sisu. Peaaegu kõik generaatorid (Penthouse, veebitööriist) töötavad JavaScripti keelatud olekus. Kui sinu maandumisleht on ehitatud Reacti, Vue või Angulariga ilma serveripoolse renderdamiseta, on HTML tühi ja generaatoril pole midagi analüüsida. Ainus usaldusväärne lahendus: luba SSR raamistiku tasemel. Alternatiiv on selektorite käsitsi määramine forceInclude abil, kuid see on habras.

Meediapäringud. Vaikimisi eemaldab Penthouse reeglid, mille min-width ületab määratud vaateakna suurust. Kui sa ei määra keepLargerMediaQueries: true, lähevad töölaua stiilid kaotsi ja sait laguneb laiadel ekraanidel. Kontrolli tulemusi alati tegelike resolutsioonide juures.

Vahemällu salvestamine. Sa genereerisid kriitilise CSS-i, juurutasid selle, muutsid nädal hiljem päise stiili, kuid vana versioon istub endiselt <head> sektsioonis. Ilma CI/CD automatiseerimiseta unustad sa uuesti genereerida. Gulp'i ülesanne juurutamisel lahendab selle täielikult.

⁉️🤔 Korduma kippuvad küsimused

Kas kriitiline CSS on kohustuslik igale saidile?

Ei, mitte igale saidile. Kui sinu saidil on üks 20 KB suurune CSS-fail ja FCP on juba alla sekundi, on kasu tühine. Aga kui <head> sisaldab 3-4 stiililehte kogumahuga umbes 100 KB, annab kriitiline CSS mõõdetavat paranemist. Lihtsa maandumislehe jaoks võtab veebigeneraator 10 minutit. WordPressi poe jaoks teeb WP Rocket paari linnukesega selle ära. Kontrolli PageSpeed Insightsi: kui "Eemalda renderdamist blokeerivad ressursid" on tipus, siis tee see ära.

Kas ma võin lihtsalt kõik <link> sildid jaluseossa tõsta ja selle vaeva ära jätta?

Tehniliselt mitte. HTML-i spetsifikatsioon nõuab <link rel="stylesheet"> kasutamist ainult <head> sektsioonis. Praktikas brauserid renderdavad lehti, kus <link> on jaluses, kuid sa saad stiilimata sisu vilkumise (FOUC), kuni stiilid laadivad. See on vastuvõetav lihtsale visiitkaardisaidile, kuid mitte äriprojektile. Õige lähenemine: kriitiline CSS <head> sektsiooni sisseehitatult, ülejäänu asünkroonne laadimine loadCSS või media="print" koos onload="this.media='all'" abil. Jaluseossa tõstmine on ajutine lahendus, mis toimib visuaalse hüppe hinnaga.

Mis muutus HTTP/3 ja Early Hintsi puhul?

HTTP/3 ja 103 Early Hints võimaldavad brauseril alustada kriitiliste ressursside laadimist enne täieliku serverivastuse saamist. See vähendab latentsust, kuid ei kõrvalda renderdamise blokeerimist: stiilid peavad ikkagi alla laadima ja parsima. Early Hints ja kriitiline CSS töötavad koos, mitte teineteise asemel: Early Hints kiirendab kohaletoimetamist, kriitiline CSS kiirendab esimest renderdamist. Need kaks tehnikat tugevdavad teineteist.

Penthouse'i pole 4 aastat uuendatud. Kas see on endiselt asjakohane?

Penthouse'i viimane väljalase (v2.3.3) tuli välja 2022. aastal, kuid pakett on endiselt toimiv: see töötab Puppeteeri ja Chromiumi peal, mis on stabiilsed. Põhifunktsionaalsus (antud vaateakna jaoks kasutatava CSS-i genereerimine) ei vaja sagedasi uuendusi. Alternatiiv on Addy Osmani Critical (12 000+ tähte), mis saab aktiivsemaid uuendusi ja integreerub samuti Gulp/Gruntiga.

Kuidas käsitleda dünaamilisi lehti, kus sisu sõltub kasutajast?

Isikustatud lehtede puhul (kasutaja töölaud, ostukorv, administraatori paneel) genereeritakse kriitiline CSS mitte konkreetse kasutaja, vaid üldise struktuuri jaoks: päis, külgriba, ruudustik. Dünaamiline sisu läheb asünkroonsesse ossa. Kui kasutajapõhise esmapildis oleva ploki stiilid on hädavajalikud, lisa vastavad selektorid forceInclude abil. Genereeri kriitiline CSS lehe üldise struktuuri põhjal ja jäta isikustatud plokid asünkroonseks laadimiseks, kasutades forceInclude kriitiliste elementide jaoks.

Kas peaksid oma projektis kriitilist CSS-i rakendama

Kui sinu sait laadib <head> sektsioonis rohkem kui ühe CSS-faili, annab kriitiline CSS mõõdetavat kiiruse kasvu. Kolmelehelise maandumislehe jaoks võtab veebigeneraator 10 minutit. WordPressi blogi või poe jaoks piisab kahest linnukesest WP Rocketis. Kohandatud projekti jaoks tasub Gulp'i ja Penthouse'i seadistamisele kulutatud tund end ära juba esimesel juurutamisel.

Sisenemisbarjäär on madalam, kui tundub. Võta tasuta veebigeneraator, kopeeri oma lehe CSS, kleebi see sisse ja 30 sekundi pärast näed tulemusi. Kui soovid automatiseerimist, tule tagasi Gulp'i töövoo sektsiooni juurde: see lahendab probleemi täielikult. Laadimiskiiruse kahekordistamine paari töötunni eest on tehing, millest on raske keelduda.

1	const penthouse = require('penthouse');
2	const fs = require('fs');
3
4	penthouse({
5	url: 'https://example.com',
6	cssString: fs.readFileSync('./style.css', 'utf8'),
7	width: 1300,
8	height: 900
9	}).then(criticalCss => {
10	fs.writeFileSync('./critical.css', criticalCss);
11	});

1	<!DOCTYPE html>
2	<html lang="ru">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<style>@charset "UTF-8";,::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style>
7	<title>Page Title</title>
8	</head>

1	// gulpfile.js
2	const gulp = require('gulp');
3	const penthouse = require('penthouse');
4	const fs = require('fs');
5	const urlList = require('./criticalcss-pagelist.json');
6
7	gulp.task('criticalcss', function () {
8	urlList.urls.forEach(function (item) {
9	penthouse({
10	url: item.link,
11	css: './css/style.min.css',
12	width: 1300,
13	height: 900,
14	keepLargerMediaQueries: false,
15	renderWaitTime: 100,
16	timeout: 30000
17	}).then(function (criticalCss) {
18	fs.writeFileSync(item.output, criticalCss);
19	console.log('✓ Critical CSS generated: ' + item.link);
20	}).catch(function (err) {
21	console.error('✗ Error for ' + item.link + ': ' + err.message);
22	});
23	});
24	});

1	{
2	"urls": [
3	{ "link": "https://example.com", "output": "./critical/home.php" },
4	{ "link": "https://example.com/about", "output": "./critical/about.php" },
5	{ "link": "https://example.com/contact", "output": "./critical/contact.php" }
6	]
7	}

Kõik WordPressist, veebiarendusest — ja mitte ainult

⚡ Kriitiline CSS: mis see on, kuidas seda genereerida ja oma veebisaiti kiirendada