Deferowanie JS dla SEO

Deferowanie JS (ang. JavaScript Deferring) to technika optymalizacji stron internetowych polegająca na opóźnieniu wykonania skryptów JavaScript do momentu, aż przeglądarka zakończy pobieranie i parsowanie całego kodu HTML strony.

Najczęściej realizuje się ją poprzez dodanie atrybutu defer do tagu skryptu w kodzie źródłowym:

<script src="skrypt.js" defer></script>

Dzięki temu skrypty nie blokują renderowania treści (Render-Blocking Resources), a użytkownik oraz roboty wyszukiwarki (Googlebot) widzą zawartość strony znacznie szybciej.

Dlaczego domyślny JavaScript blokuje renderowanie strony?

Domyślnie, gdy przeglądarka czyta kod HTML i napotka standardowy znacznik <script src="skrypt.js">, natychmiast wstrzymuje budowanie strony:

1. Przerywa czytanie kodu HTML.

2. Pobiera plik JavaScript z serwera.

3. Wykonuje zawarty w nim kod.

4. Dopiero po zakończeniu tych czynności wraca do parsowania reszty pliku HTML.

Zjawisko to nazywane jest blokowaniem parsera (Parser-Blocking). Jeśli na stronie znajduje się kilka ciężkich skryptów (np. analityka, chat, widgety), użytkownik przez długie sekundy widzi jedynie pusty, biały ekran.

Różnica między defer a async

Oba atrybuty zapobiegają blokowaniu czytania kodu HTML podczas pobierania pliku, ale różnią się momentem wykonania kodu:

HTML Parsing:    ====================>
script (default):=== [Download & Exec] ===> (Blokuje HTML)
script async:    === [Download] ===> [Exec] ===> (Wykonuje od razu po pobraniu, blokuje HTML w trakcie wykonania)
script defer:    ====================> [Exec] (Pobiera w tle, wykonuje PO zakończeniu czytania HTML)

• defer (Opóźniony): Plik pobiera się w tle podczas czytania kodu HTML. Wykonuje się dopiero po wygenerowaniu całej struktury DOM, z zachowaniem kolejności umieszczenia skryptów w kodzie. Safe dla skryptów zależnych od struktury strony (np. biblioteki UI, skrypty manipulujące DOM).

• async (Asynchroniczny): Plik pobiera się w tle, ale wykonuje natychmiast po pobraniu, przerywając na chwilę czytanie HTML. Kolejność wykonania skryptów jest losowa. Stosowany głównie dla niezależnych skryptów zewnętrznych (np. Google Analytics, piksele śledzące).

Wpływ deferowania JS na SEO i Core Web Vitals

1. Drastyczna poprawa wskaźnika LCP (Largest Contentful Paint): Główny element strony (np. duży baner czy nagłówek H1) wyświetla się użytkownikowi natychmiast, ponieważ przeglądarka nie traci czasu na wykonywanie skryptów przed wyrenderowaniem widoku.

2. Eliminacja zasobów blokujących wyrenderowanie (Render-Blocking): To jedno z najczęstszych zaleceń pojawiających się w testach Google PageSpeed Insights.

3. Lepszy wskaźnik INP (Interaction to Next Paint): Przeniesienie ciężkich zadań związanych z kodem JS na sam koniec procesu ładowania zwalnia główny wątek przeglądarki (Main Thread) podczas najważniejszych pierwszych sekund wizyty użytkownika.

4. Efektywniejsza praca Googlebota: Robot wyszukiwarki dostaje pełny, czytelny kod HTML od razu przy pierwszym podejściu, bez konieczności oczekiwania na wykonanie zasobów blokujących.

Podobają Ci się nasze treści? Obserwuj nas w Google Discover Obserwuj