SEOMaster
JavaScript (JS)
Język interaktywności w przeglądarce.
JavaScript w 30 sekund
- 01 · Zrozum: JavaScript (JS) to język, który ożywia stronę w przeglądarce: obsługuje kliknięcia, pobiera dane, animuje, zmienia treść bez przeładowania.
- 02 · Sprawdź: Sprawdź w Network wagę i liczbę skryptów.
- 03 · Unikaj: Kluczowa treść i linki tylko w JS
Co to jest JavaScript?
JavaScript (JS) to język, który ożywia stronę w przeglądarce: obsługuje kliknięcia, pobiera dane, animuje, zmienia treść bez przeładowania. To trzeci filar frontendu — obok HTML (struktura) i CSS (wygląd).
Jego siłą jest interaktywność, ale i pułapką: nadmiar JavaScriptu spowalnia stronę (TTI, INP), a treść składana wyłącznie przez JS bywa trudniejsza do zaindeksowania.
Dlaczego to ważne dla SEO
JavaScript daje stronie życie, ale jego nadmiar to częsta przyczyna wolnego działania i problemów z indeksacją treści zależnej od JS.
Jak to sprawdzić
Sprawdź w Network wagę i liczbę skryptów. Porównaj surowy HTML z renderowanym, by zobaczyć, ile treści zależy od JS. Lighthouse wskazuje ciężki JS.
Częste błędy
- Kluczowa treść i linki tylko w JS
- Ogromne, niepodzielone pakiety skryptów
- Skrypty firm trzecich obciążające wątek główny
Przykład
document.querySelector('.btn').addEventListener('click', …)
Najczęstsze pytania
Co przeglądarka uznaje za długie zadanie?
Zadanie wykonywane na głównym wątku dłużej niż 50 ms jest oznaczane jako long task. Część ponad pierwsze 50 ms to czas blokowania, w którym interakcja może czekać na swoją kolej.
Czy podział kodu na kilka funkcji automatycznie rozbija zadanie?
Nie. Jeśli funkcje są wywołane synchronicznie jedna po drugiej, nadal wykonują się w jednym zadaniu aż do zakończenia. Trzeba świadomie oddać sterowanie między porcjami albo przenieść obliczenia poza główny wątek.
Kiedy użyć Web Workera?
Gdy kosztowna praca obliczeniowa nie potrzebuje bezpośredniego dostępu do DOM-u: parsowanie dużych danych, kompresja, sortowanie czy obliczenia. Worker nie naprawi ciężkich zmian layoutu, bo DOM nadal należy do głównego wątku.
Poradniki na ten temat
- Jak poprawić Core Web Vitals — LCP, INP i CLS po kolei — Trzy metryki, trzy zupełnie różne przyczyny. Ten poradnik idzie od zmian, które zajmują kwadrans i dają najwięcej, do przebudów, w które warto wchodzić dopiero na końcu.