Jak zrobić 90–100/100 Lighthouse w Next.js (bez psucia designu)

31 grudnia 20256 min czytaniaURL: /pl/blog/lighthouse-100-nextjs
Autor: 7kar7son7Developer

Największe dźwignie: LCP, JS, fonty, obrazy i cache. Kolejność działań ma znaczenie.

next.jsperformanceseo

TL;DR

  • lighthouse 100 next.js
  • Dla stron wizytówek i landingów, które chcą lepszego SEO i konwersji.

Dla kogo to jest

  • Dla stron wizytówek i landingów, które chcą lepszego SEO i konwersji.

Fraza (SEO)

  • lighthouse 100 next.js

LCP: hero

  • Preload krytycznych zasobów
  • fetchpriority=high na LCP
  • Brak lazy na LCP

Ucięcie JS

  • Lazy load ciężkich komponentów
  • Wyłączenie scroll-animacji
  • Mniej zewnętrznych skryptów

Fonty i obrazy

  • display=swap
  • WebP/AVIF
  • Dobre cache-control

Chcesz wdrożenie u siebie?

O autorze

Developer w DevStudio.it. Skupiam się na performance, SEO i stabilnych wdrożeniach.

Przydatne linki (polecamy)

Jeśli chcesz przejść od wiedzy do wdrożenia — tu masz skróty do naszych rozwiązań, hostingu i realizacji.

Chcesz wdrożenie pod SEO i konwersję?

Zróbmy to szybko: zakres + wycena + terminy.

Wyceń projekt