Render-blocking resursi — kako da prestanu da koče sajt

Kada pregledač učitava stranicu, na neke fajlove mora da sačeka pre nego što išta prikaže. To su render-blocking resursi — najčešće CSS i JavaScript u zaglavlju stranice. Dok se ne preuzmu i obrade, posetilac gleda beli ekran. Zato PageSpeed Insights redovno prijavljuje "Eliminate render-blocking resources" kao jednu od glavnih stavki za popravku.

Zašto CSS i JS blokiraju prikaz

CSS je po prirodi blokirajući: pregledač neće iscrtati sadržaj dok ne zna kako izgleda, jer ne želi da vam prikaže nestilizovanu stranicu pa da naglo skoči. JavaScript u zaglavlju bez atributa je još gori — zaustavlja parsiranje HTML-a dok se skripta ne preuzme i izvrši. Nekoliko takvih fajlova lako dodaje sekundu ili više na prvi prikaz.

Kako da rešite JavaScript

• Dodajte defer na skripte. Skripta se tada preuzima paralelno, a izvršava tek kada je HTML gotov — idealno za većinu skripti.
• Koristite async za nezavisne skripte. Analitika i slični fajlovi koji ne zavise od ostatka mogu da idu async.
• Uklonite skripte koje vam ne trebaju. Svaki suvišan plugin dodaje svoj JavaScript. Manje je brže.
• Odložite skripte trećih strana. Chat widgeti, mape i društvene mreže neka se učitaju posle glavnog sadržaja.

Kako da rešite CSS

• Ubacite kritični CSS inline. Izdvojite stilove potrebne za ono iznad pregiba i stavite ih direktno u HTML da se prikaz počne odmah.
• Ostatak CSS-a učitajte odloženo. Nekritične stilove možete učitati asinhrono da ne blokiraju prvi prikaz.
• Uklonite neiskorišćen CSS. Teme i page builderi često učitavaju ogromne CSS fajlove od kojih koristite deo.

Praktičan pristup za WordPress

Ručno diranje koda nije neophodno — keš pluginovi kao WP Rocket, LiteSpeed Cache ili W3 Total Cache imaju opcije za odlaganje JavaScripta i generisanje kritičnog CSS-a jednim klikom. Uključite ih postepeno i posle svake promene proverite da sajt izgleda ispravno, jer previše agresivno odlaganje ume da pokvari interaktivne elemente.

Gde hosting pomaže

Optimizacija resursa smanjuje broj i veličinu blokirajućih fajlova, ali oni se i dalje moraju preuzeti. Brz server i CDN znače da se ti fajlovi isporuče za milisekunde umesto stotine milisekundi. Na kvalitetnom WordPress hostingu sa NVMe diskovima i besplatnim CDN-om, čak i neoptimizovan sajt startuje bolje. Pogledajte naše pakete kao osnovu, a zatim primenite defer i kritični CSS za dodatni skok.

Česta pitanja

Koja je razlika između defer i async? Defer čuva redosled i izvršava skripte posle HTML-a; async izvršava čim se skripta preuzme, bez garancije redosleda. Za većinu skripti defer je sigurniji.

Da li kritični CSS može da pokvari sajt? Ako je pogrešno izdvojen, može doći do kratkog bljeska nestilizovanog sadržaja. Zato uvek testirajte posle uključivanja.