Optymalizacja

Zasoby blokujące renderowanie - co to jest i jak naprawić

Skrypty i style, które przeglądarka musi załadować przed pokazaniem strony - główna przyczyna wolnego startu.

Aktualizacja:
Krótka odpowiedź

Zasoby blokujące renderowanie (render-blocking resources) to pliki CSS i JavaScript, które przeglądarka musi pobrać, sparsować i wykonać przed pokazaniem czegokolwiek użytkownikowi. Im więcej ich jest, tym dłużej trwa biały ekran. Bezpośrednio wpływają na metryki FCP i LCP, a tym samym na ranking strony w Google.

Kluczowe fakty
Typowi winowajcy CSS w head, skrypty bez async/defer
Główny wpływ na metryki FCP, LCP
Lighthouse opcja optymalizacji „Eliminate render-blocking resources"
Typowy zysk po naprawie 0,3-2,0 s na LCP

Co to są render-blocking resources?

Zasoby blokujące renderowanie (render-blocking resources) to pliki CSS i JavaScript, które przeglądarka musi pobrać, sparsować i wykonać przed pokazaniem czegokolwiek użytkownikowi. Im więcej ich jest i im większe są - tym dłużej trwa biały ekran.

Co blokuje renderowanie?

  • Wszystkie pliki <link rel="stylesheet"> w sekcji head (bez media="print")
  • Skrypty <script src="..."> bez atrybutu async ani defer
  • Czcionki webowe wczytywane bez optymalizacji (czasem)

Jak to naprawić?

  1. Krytyczny CSS wstaw inline w <style> w head (tylko to, co jest widoczne na pierwszym ekranie)
  2. Resztę CSS wczytaj async: <link rel="stylesheet" href="..." media="print" onload="this.media='all'">
  3. Dla skryptów: async dla niezależnych (np. analytics), defer dla zależnych od DOM
  4. Skrypty marketingowe (GTM, piksele) wczytaj po pierwszym renderowaniu albo po interakcji
  5. Czcionki: font-display: swap + preload kluczowych

Najczęstsze pytania

Czy każdy plik CSS w head blokuje renderowanie?
Tak, domyślnie każdy <link rel="stylesheet"> w head blokuje renderowanie do momentu pełnego pobrania i sparsowania pliku. Wyjątek: jeśli ma media="print" albo nieskończenie precyzyjny media query, który nigdy nie pasuje - wtedy przeglądarka pobierze go w tle, nie blokując renderowania.
Czym różni się defer od async?
Defer: skrypt wykonuje się DOPIERO po sparsowaniu HTML, ale w kolejności wystąpienia. Idealny dla skryptów zależnych od DOM. Async: skrypt wykonuje się jak tylko zostanie pobrany - może być przed DOMContentLoaded, w dowolnej kolejności. Idealny dla niezależnych skryptów typu analytics.
Czy preload pomaga z render-blocking?
Pośrednio - <link rel="preload"> mówi przeglądarce „pobierz to wcześnie, mam dla ciebie ważny zasób". Sam preload nie usuwa blokowania, ale skraca czas, w którym blokujący zasób jest pobierany - co zmniejsza czas białego ekranu.
Powiązane pojęcia
LCP (Largest Contentful Paint)FCP (First Contentful Paint)Nieużywany JavaScript - co to jest i jak go wyciąćNieużywane reguły CSS - co to jest i jak je wyciąć

Sprawdź swoją stronę

Wpisz adres swojej strony, w 30 sekund zobaczysz konkretną listę problemów do naprawy - wraz z wpływem na sprzedaż, SEO i koszty reklam.

Zacznij test →