Obrazki, fonty i skrypty: klasyczne trio wydajności

Ten temat dotyczy strony wydajnościowej. Obrazy jako kanał ruchu — alt, wyszukiwarka grafiki, schema ImageObject — opisane są w Image SEO.

Obrazki. next/image daje lazy loading, AVIF/WebP i poprawne rozmiary — ale tylko przy uczciwej konfiguracji:

import Image from "next/image";

// Obrazek LCP: priority, bez lazy loadingu
<Image
  src="/hero.jpg"
  alt="Zespół pracujący nad roadmapą produktu"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority tylko na obrazku LCP (zwykle hero). Wszystko poniżej pierwszego ekranu zostaje lazy.
• sizes musi odpowiadać twojemu layoutowi — bez niego urządzenia mobilne pobierają pliki w rozmiarze desktopowym.
• alt opisuje obrazek zarówno dla czytników ekranu, jak i wyszukiwarki obrazów. Pusty alt="" tylko dla czysto dekoracyjnych grafik.

Fonty. next/font self-hostuje Google Fonts, eliminuje zewnętrzne żądanie i sam ustawia font-display: swap:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin", "latin-ext"], display: "swap" });

Skrypty. Każdy zewnętrzny skrypt konkuruje z twoją treścią o główny wątek:

import Script from "next/script";

// Analityka: po tym, jak strona stanie się interaktywna
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Widżety czatu, heatmapy: dopiero gdy przeglądarka jest bezczynna
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Audytuj, co ładujesz: zrób trace w Lighthouse i zakwestionuj każdy skrypt, który nie jest kluczowy dla strony. Tag manager pełen zapomnianych pikseli to najczęstszy zabójca INP, jakiego widzimy w audytach.

Checklista:

• Obrazek hero ma priority, poprawny sizes i sensowny alt
• Wszystkie fonty przez next/font, zero zewnętrznego font-CSS
• Skrypty zewnętrzne na afterInteractive lub lazyOnload
• Obrazki nie powodują przesunięć layoutu (width/height zawsze ustawione)