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).
- Bierzemy tylko ten CSS, który jest potrzebny do wyświetlenia “góry strony” (tego co widać na ekranie bez przewijania).
- Wklejamy go inline w
<style>w nagłówku. - Resztę CSS (stopka, dolne sekcje) ładujemy asynchronicznie w tle.
Większość nowoczesnych wtyczek optymalizacyjnych generuje Critical CSS automatycznie.
Podsumowanie strategii
- JS: Wszystko z
defer(oprócz absolutnie kluczowych skryptów analityki/cookiet). - CSS: Critical CSS inline + reszta asynchronicznie.
- 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.
