⚡ Kriittinen CSS: mitä se on, miten se luodaan ja nopeuta verkkosivustoasi
Sivusi latautuu 3 sekuntia, ja kävijät lähtevät. Avaat Google PageSpeed Insightsin, ja siinä se on punaisella: "Poista hahmonnuksen estävä CSS." Kuulostaako tutulta? HTTP Archiven vuoden 2025 datan mukaan mediaanisivu lataa 7 ulkoista tyylitiedostoa, ja CSS:n keskimääräinen koko on ylittänyt 120 kt. Jokainen <head>-osion tiedosto on este käyttäjän ja sisällön välillä.
Ongelma ei ole "raskas" CSS. Selain ei hahmonna yhtäkään pikseliä ennen kuin se on ladannut ja jäsentänyt KAIKKI tyylit. Myös ne, jotka muotoilevat alatunnistetta pikselillä 4000. Ratkaisu on kriittinen CSS: tekniikka, joka poimii koko tyylitiedostostasi vain sen, mitä näkyvässä näkymässä tarvitaan, ja upottaa sen suoraan <head>-osioon. Loput ladataan asynkronisesti eivätkä estä mitään.
Toteutimme kriittisen CSS:n kaikissa techblog-projekteissamme ja rakensimme toimivan työnkulun: manuaalisesta generoinnista 30 sekunnissa täyteen automaatioon Gulpin ja WordPress-lisäosien avulla. Alla on vaiheittainen opas ilman turhaa höttöä.
💡 Nopea yleiskatsaus:
- Ymmärrä hahmonnuksen estävä mekaniikka ja miksi selain odottaa CSS:ää, vaikka HTML on valmis
- Valitse oikea työkalu: ilmainen verkkogeneraattori 10 sekunnissa, Penthouse npm-projekteille tai WP Rocketin ja Autoptimizen yhdistelmä WordPressille
- Määritä Gulp-työnkulku kriittisen CSS:n automaattiseen uudelleengenerointiin jokaisen julkaisun yhteydessä
- Vältä yleiset sudenkuopat: FOUC, JS-sisältö, media query -ongelmat
Mitä kriittinen CSS on ja miksi selain hidastuu
Selain rakentaa kaksi rakennetta: DOMin HTML:stä ja CSSOMin tyyleistä. Ennen kuin CSSOM on valmis, hahmontaminen keskeytyy. Tämä on hahmonnuksen estävä CSS: sivu pysyy tyhjänä, kunnes kaikki <head>-osion tyylitiedostot on ladattu.
Google PageSpeed Insights diagnosoi ongelman suoraan:
Sivullasi on 3 hahmonnuksen estävää CSS-resurssia. Tämä aiheuttaa viiveen hahmonnuksessa. Mitään sisällön yläosassa näkyvää sisältöä ei voida hahmontaa ennen kuin seuraavat resurssit on ladattu.
Termi "above the fold" tulee sanomalehdistä. Verkossa se tarkoittaa näkyvää aluetta ennen vierittämistä: noin 600 px työpöydällä, 900 px kannettavilla, 400 px älypuhelimilla. Useimmat kehittäjät tähtäävät turvallisiin arvoihin 1300 px leveys ja 900 px korkeus.
Kriittinen CSS on vähimmäismäärä tyylejä, jotka tarvitaan juuri tuon alueen hahmontamiseen. Grid, navigaatio, fontit, hero-osio. Kaikki muu lykätään ja ladataan asynkronisesti: sivu tulee näkyviin välittömästi, kun lisätyylit latautuvat taustalla.
Luvut ovat merkittäviä. Googlen datan mukaan kriittisen CSS:n upottaminen pienentää First Contentful Paintia 0,5-1,2 sekuntia mobiililaitteilla. Verkkokaupalle tämä vaikuttaa suoraan konversioon: Portentin tutkimus osoitti, että sivustot, joiden FCP on alle 1 sekunti, konvertoivat 3 kertaa paremmin kuin sivustot, joiden FCP on 3 sekuntia.
Generointityökalut: ilmaisesta verkkotyökalusta kaupalliseen APIin
Kriittisen CSS:n generointi manuaalisesti on mahdotonta. Tarvitset työkalun, joka hahmontaa sivun headless-selaimessa ja poimii vain käytetyt tyylit. Tässä kolme toimivaa vaihtoehtoa.
Työkalu | Tyyppi | Hinta | Automaatio | Paras käyttötarkoitus |
|---|---|---|---|---|
Critical Path CSS Generator | Verkkotyökalu | Ilmainen | Ei | Yksittäiset sivut, aloittaminen |
Penthouse | npm-paketti | Ilmainen | Kyllä, Gulpilla/skripteillä | Kehittäjät, eräkäsittely |
criticalcss.com | SaaS | Alkaen $10/kk | Kyllä, API + WordPress | Tuotanto, suuret sivustot |
Critical Path CSS Generator: verkossa, 10 sekunnissa
Jonas Ohlssonin Critical Path CSS Generator on ilmainen työkalu, josta kannattaa aloittaa. Käyttöliittymä on yksinkertainen: liitä sivun URL, liitä KOKO CSS:si (jopa 200 kt minifioituna), napsauta painiketta, saat tyylit sivun yläosalle.
Plussat: ei kynnystä aloittaa. Ei tarvita Node.js:ää, npm:ää tai skriptejä. Miinukset: täysin manuaalista työtä. Käsittelet jokaisen sivun erikseen, ja kun tyylit muuttuvat, toistat kaiken. Toimii 5-sivuiselle sivustolle, mutta 50 sivua käy tuskalliseksi.
Generaattorin luoja lanseerasi myöhemmin kaupallisen criticalcss.com-palvelun, joka on saman idean kehittyneempi versio automaattisilla päivityksillä, kuvakaappausvalidoinnilla ja API:lla eräkäsittelyyn.
Penthouse: komentorivigeneraattori Gulpille
Penthouse (yli 2680 tähteä GitHubissa) on saman tekijän npm-paketti. Konepellin alla: Puppeteer ja headless Chromium. Se avaa sivun, määrittää käytetyt CSS:t tietylle näkymälle ja hylkää loput.
Asennus:
1 npm install --save-dev penthouse
Minimaalinen kutsu Node-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 });
Leveys 1300 ja korkeus 900 ovat empiirisesti turvallisia arvoja. Kriittistä näkymää leveämmät media queryt poistetaan oletuksena. Jos haluat säilyttää ne, käytä lippua keepLargerMediaQueries: true.
Tärkeä huomio: Penthouse toimii JavaScript pois päältä. Jos above the fold -sisältö tuotetaan JS-kehyksellä, HTML on ennen hydraatiota tyhjä, eikä Penthouse löydä tyylejä. Ratkaisu: palvelinpuolen renderöinti (SSR) tai forceInclude-parametri valitsimilla, jotka pakotetaan säilytettäviksi.
WP Rocket ja Autoptimize: kaksi WordPress-lisäosaa
Jos sivustosi pyörii WordPressillä, manuaalinen kriittisen CSS:n tuottaminen on turhaa vaivaa. Monta sivua, kertautuvia pohjia, muuttuvia tyylejä. Kaksi lisäosaa ratkaisee tehtävän kokonaan.
WP Rocket on maksullinen lisäosa (59 €/vuosi yhdelle sivustolle, 119 € kolmelle, 299 € 50:lle). Sisäänrakennettu "Remove Unused CSS" -vaihtoehto tuottaa automaattisesti kriittisen CSS:n jokaiselle sivulle, upottaa sen <head>-osioon ja lataa loput asynkronisesti. Kaksi valintaruutua, ja "Eliminate render-blocking resources" -suositus on ratkaistu. Bonuksena sisäänrakennettu Rocket Insights -keskus, joka hyödyntää GTmetrixiä, näyttää metriikat suoraan WordPressin hallintapaneelista.
Autoptimize on ilmainen lisäosa, jossa on "Inline and Defer CSS" -vaihtoehto. Perusversio tuottaa YHDEN kriittisen CSS-tiedoston koko sivustolle, mikä ei toimi käytännössä (eri sivut, eri above the fold -sisältö). Ratkaisu: integraatio criticalcss.com-palveluun (WordPress-paketti, alkaen 10 $/kk). Lisäosa pyytää kriittisen CSS:n automaattisesti API:n kautta, upottaa sen ja päivittää sen muutosten tapahtuessa.
Useimmille WordPress-käyttäjille WP Rocket tai Autoptimize + criticalcss.com -yhdistelmä ratkaisee ongelman kokonaan. Tämän artikkelin loppuosa on niille, jotka rakentavat räätälöityjä sivustoja.
Manuaalinen työnkulku: tuottaminen, lisääminen, todentaminen
Jos rakennat sivustoa ilman CMS:ää, prosessi jakautuu neljään vaiheeseen.
Vaihe 1. Kopioi KAIKKI CSS:si. Yhdistä kaikki sivuston tyylit YHTEEN tiedostoon. Jos kirjoitat Sassia, käännä se. Jos käytät kehystä kuten Bootstrap tai Tailwind, sisällytä sen CSS kokonaan. Älä arvaile, mitä "ei todennäköisesti tarvita"; generaattori selvittää sen.
Vaihe 2. Tuota kriittinen CSS online-generaattorilla tai Penthousella. Lopputulos on minifioitu tyylilohko, joka vastaa vain above the fold -alueesta.
Vaihe 3. Lisää kriittinen CSS <style>-tagin sisään <head>-osioon. Tämä on ratkaisevaa: sisäiset tyylit eivät luo ylimääräisiä HTTP-pyyntöjä ja selain käsittelee ne välittömästi. Lopputulos näyttää suunnilleen tältä:
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>
Vaihe 4. Siirrä ulkoiset CSS- ja JS-tiedostot <head>-osiosta sivun alaosaan, ennen sulkevaa </body>-tagia. Kyllä, <link rel="stylesheet"> footerissa on teknisesti speksin vastainen, mutta se toimii käytännössä kaikissa selaimissa ja ratkaisee estymisongelman. Vaihtoehto on Filament Groupin loadCSS asynkronista tyylien latausta varten ilman siirtoa footeriin.
Tarkista lopuksi Google PageSpeed Insightsilla. Katosiko "Poista hahmontamisen estävät resurssit" -suositus? Teit kaiken oikein.
Gulp + Penthouse: automaatio projekteihin ilman WordPressiä
Jokainen tyylimuutos vaatii kriittisen CSS:n uudelleengeneroinnin. Manuaalisesti tehtynä tämä on puuduttavan työlästä. Gulp automatisoi prosessin.
Tuotantotyönkulkumme:
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 });
criticalcss-pagelist.json-tiedosto, jossa on URL-osoitteet ja tulostiedostojen lista:
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 }
Kirjoitamme tulosteen PHP-tiedostoihin, jotka kääritään CSS:n ympärille ja lisätään include-komennolla vastaavan mallipohjan <head>-osioon. Sovita omaan pinoosi: kirjoita .css-tiedostoon, lisää palvelinpuolen includella, mikä ikinä toimiikaan.
Aja: gulp criticalcss, ja kaikki sivut käsitellään yhdellä kertaa. Kytke tehtävä CI/CD-putkeen julkaisun yhteydessä, niin kriittinen CSS pysyy ajan tasalla.
Ongelmia, joihin törmäät
Kriittinen CSS ei ole vailla teräviä kulmia. Tässä on mitä me havaitsimme käytännössä.
Tyylittelemättömän sisällön välähdys (FOUC). Kriittinen CSS ei kattanut jotakin elementtiä, ja käyttäjä näkee tyylien pomppauksen, kun täydet tyylit latautuvat. Syy: sisältö, joka on sijoitettu näkymän ulkopuolelle absolute- tai transform-määrityksellä, ja generaattori ei huomannut sitä. Korjaus: forceInclude-lippu ongelmallisen elementin valitsimella.
JavaScriptin tuottama sisältö. Lähes kaikki generaattorit (Penthouse, verkkotyökalu) toimivat JavaScript pois päältä. Jos laskeutumissivusi on rakennettu Reactilla, Vuella tai Angularilla ilman palvelinpuolen renderöintiä, HTML on tyhjä, eikä generaattorilla ole mitään analysoitavaa. Ainoa luotettava ratkaisu: ota SSR käyttöön sovelluskehyksen tasolla. Vaihtoehto on määrittää valitsimet manuaalisesti forceInclude-lipulla, mutta se on haurasta.
Media queryt. Oletuksena Penthouse poistaa säännöt, joiden min-width ylittää määritetyn näkymän leveyden. Jos et aseta keepLargerMediaQueries: true, työpöytätyylit katoavat ja sivusto hajoaa leveillä näytöillä. Tarkista tulokset aina todellisilla resoluutioilla.
Välimuistitus. Generoit kriittisen CSS:n, julkaiset, muutat ylätunnisteen tyyliä viikkoa myöhemmin, mutta vanha versio istuu yhä <head>-osiossa. Ilman CI/CD-automaatiota unohdat generoida uudelleen. Gulp-tehtävä julkaisun yhteydessä ratkaisee tämän täysin.
⁉️🤔 Usein kysytyt kysymykset
Onko kriittinen CSS pakollinen jokaiselle sivustolle?
Ei, ei jokaiselle sivustolle. Jos sivustollasi on yksi 20 kt:n CSS-tiedosto ja FCP on jo alle sekunnin, hyöty on mitätön. Mutta jos
<head>sisältää 3-4 tyylitiedostoa, yhteensä noin 100 kt, kriittinen CSS tuo mitattavaa parannusta. Yksinkertaiselle laskeutumissivulle verkkogeneraattori vie 10 minuuttia. WordPress-verkkokaupalle WP Rocket parilla valintaruudulla hoitaa sen. Tarkista PageSpeed Insights: jos "Poista renderöinnin estävät resurssit" on kärjessä, tee se.
Voinko vain siirtää kaikki <link>-tagit alatunnisteeseen ja skipata vaivan?
Teknisesti ei. HTML-spesifikaatio vaatii
<link rel="stylesheet">vain<head>-osioon. Käytännössä selaimet renderöivät sivuja, joissa<link>on alatunnisteessa, mutta saat tyylittelemättömän sisällön välähdyksen (FOUC), kunnes tyylit latautuvat. Hyväksyttävää yksinkertaiselle käyntikorttisivustolle, ei kaupalliselle projektille. Oikea lähestymistapa: kriittinen CSS upotettuna<head>-osioon, asynkroninen lataus lopulleloadCSS-kirjastolla taimedia="print"jaonload="this.media='all'"-kikalla. Alatunnisteeseen siirtäminen on kiertotapa, joka toimii visuaalisen pomppauksen kustannuksella.
Mikä muuttui HTTP/3:n ja Early Hints -mekanismin myötä?
HTTP/3 ja 103 Early Hints antavat selaimen aloittaa kriittisten resurssien lataamisen ennen täyden palvelinvastauksen vastaanottamista. Tämä vähentää viivettä, mutta ei poista renderöinnin estoa: tyylit täytyy yhä ladata ja jäsentää. Early Hints ja kriittinen CSS toimivat yhdessä, eivät toistensa sijasta: Early Hints nopeuttaa toimitusta, kriittinen CSS nopeuttaa ensimmäistä renderöintiä. Nämä kaksi tekniikkaa vahvistavat toisiaan.
Penthousea ei ole päivitetty 4 vuoteen. Onko se yhä relevantti?
Penthousen viimeisin julkaisu (v2.3.3) tuli ulos vuonna 2022, mutta paketti on yhä toimiva: se käyttää Puppeteeria ja Chromiumia, jotka ovat vakaita. Ydintoiminnallisuus (käytetyn CSS:n generointi tietylle näkymälle) ei vaadi tiheitä päivityksiä. Vaihtoehto on Addy Osmanin Critical (12 000+ tähteä), joka saa aktiivisemmin päivityksiä ja integroituu myös Gulpin/Gruntin kanssa.
Miten käsittelen dynaamisia sivuja, joissa sisältö riippuu käyttäjästä?
Sivuille, joissa on personointia (käyttäjän hallintapaneeli, ostoskori, ylläpitopaneeli), kriittinen CSS generoidaan ei tietylle käyttäjälle vaan yleiselle rakenteelle: ylätunniste, sivupalkki, ruudukko. Dynaaminen sisältö menee asynkroniseen osuuteen. Jos käyttäjäkohtaisen alkunäkymän lohkon tyylit ovat välttämättömät, lisää vastaavat valitsimet
forceInclude-lipulla. Generoi kriittinen CSS sivun yleisen rakenteen perusteella ja jätä personoidut lohkot asynkroniseen lataukseen, käyttäenforceInclude-lippua kriittisille elementeille.
Kannattaako kriittinen CSS toteuttaa projektissasi
Jos sivustosi lataa useamman kuin yhden CSS-tiedoston <head>-osiossa, kriittinen CSS tuo mitattavia nopeushyötyjä. Kolmen sivun laskeutumissivustolle verkkogeneraattori vie 10 minuuttia. WordPress-blogille tai -verkkokaupalle kaksi valintaruutua WP Rocketissa. Räätälöidylle projektille tunti Gulpin ja Penthousen pystyttämiseen maksaa itsensä takaisin jo ensimmäisellä julkaisulla.
Aloittamisen kynnys on matalampi kuin miltä näyttää. Ota ilmainen verkkogeneraattori, kopioi sivusi CSS, liitä se, ja 30 sekunnissa näet tulokset. Kun haluat automaation, palaa Gulp-työnkulkua käsittelevään osioon: se ratkaisee ongelman täysin. Latausnopeuden tuplaaminen parin tunnin työllä on diili, josta on vaikea kieltäytyä.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.