Zasoby blokuj膮ce renderowanie (render-blocking resources) to pliki CSS i JavaScript, kt贸re musz膮 zosta膰 w pe艂ni przetworzone przez przegl膮dark臋, zanim core web vitals ta zacznie wy艣wietla膰 stron臋. Problem ten jest jedn膮 z g艂贸wnych przyczyn wolnego First Contentful Paint (FCP) i Largest Contentful Paint (LCP), a Google PageSpeed Insights cz臋sto wskazuje je jako krytyczne "Mo偶liwo艣ci" optymalizacyjne. Eliminacja lub strategiczne zarz膮dzanie tymi zasobami to klucz do szybkiego 艂adowania wizualnego.
1. 馃攳 Jak Rozpozna膰 Zasoby Blokuj膮ce Renderowanie?
Zasoby blokuj膮ce renderowanie to zazwyczaj pliki 艂adowane synchronicznie w sekcji dokumentu HTML.
1.1. Diagnoza za pomoc膮 PSI
- **Raport PSI:** W sekcji "Mo偶liwo艣ci" PageSpeed Insights znajdziesz konkretne zalecenie: **"Wyeliminuj zasoby blokuj膮ce renderowanie"**. **Lighthouse/PSI:** Narz臋dzia te pokazuj膮 艣cie偶k臋 krytyczn膮 i identyfikuj膮 pliki CSS i JS, kt贸re op贸藕niaj膮 wy艣wietlanie tre艣ci.
2. 馃帹 Optymalizacja CSS: Krytyczny i Asynchroniczny
CSS musi zosta膰 za艂adowany, aby strona zosta艂a poprawnie wy艣wietlona, ale nie ca艂y kod jest potrzebny do pierwszego widoku.
2.1. Wdro偶enie Krytycznego CSS (Critical CSS)
- **Zasada:** Wytnij tylko ten kod CSS, kt贸ry jest absolutnie niezb臋dny do poprawnego wy艣wietlenia tre艣ci w pierwszym widoku (above the fold) i umie艣膰 go bezpo艣rednio w sekcji jako styl inline. **艁adowanie Reszty:** Pozosta艂y, wi臋kszy plik CSS za艂aduj **asynchronicznie** lub z atrybutem media="print", zmieniaj膮c go na media="all" za pomoc膮 JavaScriptu po za艂adowaniu strony. **Minifikacja:** Zmniejsz rozmiar wszystkich plik贸w CSS, usuwaj膮c zb臋dne bia艂e znaki i komentarze (Minifikacja).
3. 馃З Optymalizacja JavaScript: Asynchroniczne i Odraczane 艁adowanie
JavaScript jest cz臋sto najwi臋kszym winowajc膮 wysokiego TBT (Total Blocking Time) i op贸藕nionego FID, poniewa偶 blokuje g艂贸wny w膮tek przegl膮darki.
3.1. Atrybuty async i defer
- **async:** Dodaj atrybut async do tagu . Skrypt zostanie pobrany w tle, ale gdy b臋dzie gotowy, jego wykonywanie zatrzyma parsowanie HTML. Jest to dobre dla niezale偶nych, niekrytycznych skrypt贸w. **defer:** Dodaj atrybut defer. Skrypt zostanie pobrany w tle, ale jego wykonanie zostanie op贸藕nione do momentu ca艂kowitego sparsowania HTML. Jest to lepsze dla skrypt贸w, kt贸re musz膮 zachowa膰 kolejno艣膰 wykonywania i zale偶膮 od DOM (np. analityka, wid偶ety) . **Op贸藕nienie:** Przesu艅 wszystkie niekrytyczne skrypty (np. czat, analityka) na sam d贸艂 dokumentu (przed zamykaj膮cym ) lub 艂aduj je dopiero po interakcji u偶ytkownika.
Podsumowanie: Szybkie Malowanie
Eliminacja zasob贸w blokuj膮cych renderowanie jest niezb臋dna do osi膮gni臋cia niskiego FCP i LCP, co bezpo艣rednio wp艂ywa na og贸lny wynik Google PageSpeed Insights. Poprzez strategi臋 Critical CSS oraz asynchroniczne 艂adowanie JavaScriptu, mo偶esz znacznie przyspieszy膰 moment, w kt贸rym u偶ytkownik widzi i mo偶e zacz膮膰 korzysta膰 z Twojej strony, poprawiaj膮c jej wydajno艣膰 i pozycjonowanie.
Autor: Proboost
</> Optymalizacja od podszewki.
馃彚 Warszawa, IT Hub
馃摟 [email protected]
馃敡 Specjalizacja: Technical SEO