Core Web Vitals 2026: LCP, INP, CLS i szybkość

W latach 90. czekaliśmy minutę na załadowanie zdjęcia. W 2010 akceptowaliśmy 3 sekundy. W 2026 roku, jeśli strona nie reaguje w 100 milisekund, użytkownik myśli, że jest zepsuta. Wydajność to nie "miły dodatek". To fundament przychodów.

Jeśli chcesz wdrożyć te wskazówki, zobacz nasz optymalizację szybkości lub audyt techniczny.

Ten artykuł to techniczny deep-dive w Core Web Vitals (CWV) w 2026 roku. Pokażemy, jak optymalizować nowoczesne aplikacje webowe (Next.js, Astro), by świeciły na zielono w PageSpeed Insights.

Spis treści

1. INP: Dlaczego Twoja strona "laguje"?
2. LCP: Jak ładować Hero Image w mgnieniu oka?
3. CLS: Stabilność wizualna to spokój ducha
4. Formaty nowej generacji: AVIF i JPEG XL
5. JavaScript: Wróg publiczny numer 1?
6. Narzędzia do audytu w 2026
7. FAQ

INP: Dlaczego Twoja strona "laguje"?

INP (Interaction to Next Paint) zastąpił First Input Delay (FID). FID mierzył tylko pierwszą interakcję. INP mierzy wszystkie i bierze pod uwagę najgorszy wynik.

Jak poprawić INP?

• Rozbijaj długie zadania (Long Tasks): Każde zadanie JS trwające >50ms blokuje główny wątek. Używaj `setTimeout`, `requestIdleCallback` lub `scheduler.yield()`.
• Unikaj ciężkich listenerów: Zdarzenia typu `scroll` czy `resize` potrafią zabić wydajność. Używaj `Passive Event Listeners` i `IntersectionObserver`.
• Mniej JS na starcie: Czy naprawdę potrzebujesz całego kodu czatu, zanim użytkownik go otworzy?

LCP: Jak ładować Hero Image w mgnieniu oka?

LCP (Largest Contentful Paint) mierzy czas wyświetlenia największego elementu w widocznym obszarze (najczęściej nagłówka lub głównego zdjęcia). Cel: < 2.5 sekundy.

CLS: Stabilność wizualna to spokój ducha

CLS (Cumulative Layout Shift) mierzy, jak bardzo strona "skacze" podczas ładowania. Nic tak nie denerwuje, jak kliknięcie w reklamę, która nagle wskoczyła w miejsce przycisku "Wstecz".

Zasada jest prosta: Rezerwuj miejsce. Każdy obrazek i wideo musi mieć atrybuty `width` i `height` lub zdefiniowany `aspect-ratio` w CSS. Dzięki temu przeglądarka wie, ile miejsca zostawić, zanim pobierze plik.

Formaty nowej generacji: AVIF i JPEG XL

JPG i PNG to przeżytek. WebP to standard, ale AVIF to przyszłość (już teraźniejszość).

Format	Rozmiar	Jakość
JPG	100% (Baza)	Średnia
WebP	~70%	Dobra
AVIF	~50%	Doskonała (HDR)

JavaScript: Wróg publiczny numer 1?

Nie sam JS jest zły, ale sposób jego dostarczania. W 2026 roku odchodzimy od monolitów SPA (Single Page Applications) ładowanych w całości po stronie klienta.

• SSR (Server Side Rendering): HTML generowany na serwerze = szybsze LCP.
• Island Architecture (np. Astro): Strona jest statycznym HTML-em, a JS ładuje się tylko w "wyspach" interaktywności (np. karuzela, formularz).
• Resumability (np. Qwik): Natychmiastowa interaktywność bez konieczności ponownego wykonywania kodu (Hydration).

Narzędzia do audytu w 2026

Lighthouse w Chrome DevTools to podstawa, ale warto sięgnąć głębiej:

• WebPageTest: Najbardziej szczegółowe raporty (grafy wodospadowe).
• CrUX Dashboard: Dane od prawdziwych użytkowników Chrome (RUM - Real User Monitoring). To na ich podstawie Google ocenia Twoją stronę, a nie na podstawie syntetycznego testu laboratoryjnego.
• DebugBear: Monitorowanie wydajności w czasie.

FAQ

---

Podsumowanie

Wydajność to nie magia. To inżynieria. Każdy kilobajt ma swoją cenę (w czasie ładowania i w emisji CO2). Tworząc szybkie strony, szanujesz czas swoich użytkowników i planetę.