Critical CSS: kako da ubrzate prvi prikaz stranice
26. 7. 2026.
Kada posetilac otvori vašu stranicu, pregledač ne može da nacrta ni jedan piksel dok ne pročita CSS potreban za sadržaj koji se vidi bez skrolovanja. Taj deo stilova zove se kritični CSS (Critical CSS). Ako ceo stilski fajl od 120 ili 200 KB blokira prikaz, korisnik gleda u belinu sekundu ili dve duže nego što mora — a upravo to Google meri kroz LCP i First Contentful Paint.
Zašto CSS blokira prikaz
CSS je po definiciji „render-blocking" resurs. Pregledač mora da sastavi kompletan CSSOM (mapu svih stilova) pre nego što nacrta stranicu, jer inače ne zna da li neko pravilo pri dnu fajla menja izgled naslova na vrhu. Zato jedan veliki style.css koji se učitava iz spoljnog fajla znači: preuzmi fajl, pročitaj ga u celini, pa tek onda crtaj. Na sporijoj mobilnoj vezi to lako doda 300–800 ms do prvog prikaza.
Kako kritični CSS rešava problem
Ideja je jednostavna: izdvojite samo ona pravila koja su potrebna za „above the fold" deo (zaglavlje, hero sekcija, glavni naslov, dugmad) i ubacite ih direktno u <head> kao inline <style> blok. Tako pregledač ima sve što mu treba za prvi prikaz odmah, bez dodatnog mrežnog zahteva. Ostatak CSS-a učitavate asinhrono, tako da ne blokira crtanje:
- Inline kritični CSS ide u
<head>— obično 5 do 15 KB. - Pun stilski fajl učitavate sa
rel="preload"paonloadprebacite narel="stylesheet". - Kao rezervu za korisnike bez JavaScript-a dodate
<noscript>verziju.
Kako da ga izdvojite u praksi
Ne morate ručno da prepisujete pravila. Alati poput Critical (npm paket od Addy Osmani-ja), Penthouse, ili opcije u okviru keš plugina rade to automatski: učitaju stranicu u headless pregledaču, izmere šta je u vidnom polju na zadatoj rezoluciji i vrate samo ta pravila. Na WordPress-u, plugini kao WP Rocket, LiteSpeed Cache ili Autoptimize imaju opciju „Generate Critical CSS" ili „Load CSS Asynchronously" koja radi isti posao jednim klikom.
Važno: kritični CSS se razlikuje po tipu stranice. Naslovna, blog članak i stranica proizvoda nemaju isti „above the fold", pa dobar alat generiše poseban kritični CSS za svaki šablon. Ako koristite jedan isti za sve, rizikujete FOUC — kratak bljesak nestilizovanog sadržaja.
Koliko se zapravo dobija
Na tipičnom WordPress sajtu sa temom i par plugina, izdvajanje kritičnog CSS-a obično skrati LCP za 200–500 ms i podigne Lighthouse rezultat za 5–15 poena. Nije magija, ali je jedan od retkih zahvata koji direktno pomera metriku koju Google gleda. U kombinaciji sa brzim hostingom i CDN-om, efekat je još veći — jer sam HTML i inline stilovi stižu do korisnika za nekoliko desetina milisekundi.
Najčešće greške
Prva greška je predimenzionisan kritični CSS: ako u njega ubacite pola fajla, izgubili ste smisao. Druga je da zaboravite da regenerišete kritični CSS nakon promene teme ili dizajna — stari inline stilovi tada prave vizuelne greške. Treća je da ostatak CSS-a i dalje učitavate blokirajuće; proverite u DevTools → Network da glavni fajl više nema status „render-blocking".
Česta pitanja
Da li je kritični CSS isto što i minifikacija? Nije. Minifikacija samo izbacuje razmake i komentare. Kritični CSS menja kada i kako se stilovi učitavaju. Najbolje je koristiti oba.
Kvari li inline CSS keširanje? Inline blok se šalje sa HTML-om pa se ne kešira zasebno, ali je toliko mali da to nije problem. Veliki fajl i dalje ostaje keširan i deljen između stranica.
Ako želite brz sajt bez ručnog podešavanja, naši WordPress hosting paketi dolaze sa NVMe diskovima, keširanjem i besplatnim CDN-om, pa kritični CSS ima na čemu da zablista. Pogledajte i pakete i cene.