Next.js i React — Core Web Vitals 90+ i szybkie SEO
Next.js generuje strony statycznie lub serwerowo, osiągając 90+ w Core Web Vitals. Tłumaczę dlaczego to ma znaczenie dla SEO i co realnie zmienia dla użytkownika.
Klasyczne strony kontra Next.js — o co w tym chodzi
Przez lata standardem było serwowanie HTML generowanego przez serwer przy każdym żądaniu — PHP, WordPress, klasyczne CMS-y. Dziś mamy lepsze narzędzia. Next.js, zbudowany na Reakcie, zmienia fundamentalnie sposób w jaki strony są generowane i dostarczane do przeglądarki. Efektem jest strona ładująca się subiektywnie i mierzalnie szybciej, co Google nagradza wyższymi pozycjami.
SSG i SSR — dwie strategie generowania stron
SSG (Static Site Generation) generuje gotowe pliki HTML w czasie budowania projektu. Serwer nie robi wtedy nic poza dostarczeniem gotowego pliku — to jak serwowanie pizzy z lodówki zamiast pieczenia jej na zamówienie. SSR (Server-Side Rendering) generuje HTML przy każdym żądaniu, ale robi to błyskawicznie i umożliwia personalizację treści. Next.js obsługuje oba tryby i pozwala mieszać je na poziomie poszczególnych stron.
- SSG: blog, landing page, portfolio, strona firmowa — treści rzadko się zmieniają, czas odpowiedzi poniżej 50ms
- SSR: sklep z cenami na żywo, panel użytkownika, strony wymagające autoryzacji i danych w czasie rzeczywistym
- ISR (Incremental Static Regeneration): hybryda — statyczna strona z automatycznym odświeżaniem co X minut
- API Routes: pełny backend wbudowany w projekt Next.js bez konieczności osobnego serwera Node.js
Core Web Vitals — co Google naprawdę mierzy
Od maja 2021 Google oficjalnie włączyło Core Web Vitals do algorytmu rankingowego. To trzy metryki mierzące realne doświadczenie użytkownika — nie teoretyczną wydajność serwera, ale to co odczuwa człowiek przeglądający stronę na telefonie przy słabym połączeniu 4G na przystanku autobusowym.
- LCP (Largest Contentful Paint) — czas do wyrenderowania największego elementu na stronie, cel: poniżej 2,5 sekundy
- INP (Interaction to Next Paint) — responsywność na kliknięcia i interakcje użytkownika, cel: poniżej 200 ms
- CLS (Cumulative Layout Shift) — stabilność layoutu podczas ładowania, elementy nie mogą 'skakać', cel: poniżej 0,1
- TTFB (Time to First Byte) — czas odpowiedzi serwera; Next.js na Vercelu osiąga to w kilkadziesiąt milisekund z Edge Network
Moje wyniki w PageSpeed Insights
Na własnej stronie NIEWART.PL osiągam regularnie 95+ w Google PageSpeed zarówno na desktopie jak i mobile. To nie magia — to konsekwencja przemyślanych decyzji: obrazy w formacie WebP i AVIF, lazy loading, statyczne generowanie stron, CDN Vercel Edge Network i brak zbędnych bibliotek JavaScript ładowanych bez potrzeby. Z WordPressem, nawet dobrze zoptymalizowanym, rzadko przekraczam 85 punktów.
Co szybka strona daje realnie dla SEO
Szybkość to jeden z czynników rankingowych, ale nie jedyny. Natomiast efekt pośredni jest potężny: niższy bounce rate — ludzie nie wychodzą po 3 sekundach ładowania, wyższy CTR w wynikach, więcej zaindeksowanych podstron przez Googlebot, który ma ograniczony budżet crawlowania. Next.js wymusza też dobre praktyki — code splitting, prefetching kolejnych stron, optymalizacja fontów przez next/font bez layout shift.
Jeśli planujesz poważną inwestycję w SEO i zależy Ci na pozycjach w organicznych wynikach, wybór technologii strony to pierwszy krok, który powinieneś dobrze przemyśleć. Next.js nie gwarantuje pierwszej pozycji w Google, ale usuwa techniczne bariery, które mogą Cię tam nigdy nie dopuścić — niezależnie od jakości treści.
