Jak usunąć blokadę renderowania (Render-Blocking) CSS i JS?
PL

Jak usunąć blokadę renderowania (Render-Blocking) CSS i JS?

5.00 /5 - (25 głosów )
Spis treści

Gdy przeglądarka ładuje Twoją stronę, czyta kod HTML linijka po linijce. Gdy napotyka na <script src="wielki-plik.js"> lub <link rel="stylesheet">, zatrzymuje wszystko inne, pobiera ten plik i go wykonuje.

Dopiero potem rysuje resztę strony. To właśnie jest “Blokowanie Renderowania” (Render-Blocking).

W 2026 roku, gdy liczy się Core Web Vitals (a zwłaszcza LCP - Largest Contentful Paint), musisz to naprawić.

1. JavaScript: Async i Defer

Stara szkoła mówiła: “wrzuć skrypty do stopki (wp_footer)”. Nowa szkoła mówi: “używaj atrybutów”.

  • <script async>: Pobiera w tle, wykonuje natychmiast po pobraniu (ryzykowne dla zależności, np. jQuery).
  • <script defer>: Pobiera w tle, wykonuje dopiero po załadowaniu HTML (bezpieczne, zachowuje kolejność).

Jak dodać defer w WordPress? Wtyczki cache’ujące (WP Rocket, Autoptimize, LiteSpeed Cache) mają opcję “Defer JS” (Opóźnij ładowanie JS). Włącz to.

To zazwyczaj rozwiązuje 90% problemów z JS.

2. CSS: Critical CSS

Z CSS jest trudniej. Nie możesz go “opóźnić”, bo strona przez chwilę będzie wyglądać jak “surowy tekst” (nieostylowana - efekt FOUC).

Rozwiązaniem jest Critical CSS (Krytyczny CSS).

  1. Bierzemy tylko ten CSS, który jest potrzebny do wyświetlenia “góry strony” (tego co widać na ekranie bez przewijania).
  2. Wklejamy go inline w <style> w nagłówku.
  3. Resztę CSS (stopka, dolne sekcje) ładujemy asynchronicznie w tle.

Większość nowoczesnych wtyczek optymalizacyjnych generuje Critical CSS automatycznie.

Podsumowanie strategii

  1. JS: Wszystko z defer (oprócz absolutnie kluczowych skryptów analityki/cookiet).
  2. CSS: Critical CSS inline + reszta asynchronicznie.
  3. Fonty: Użyj font-display: swap.

Dzięki temu użytkownik widzi treść natychmiast, a ciężkie skrypty galeri czy map ładują się w tle.