Afbeeldingen, fonts en scripts: het klassieke prestatietrio

Dit onderwerp gaat over de prestatiekant. Afbeeldingen als verkeerskanaal (alt, afbeeldingenzoek, ImageObject-schema) komen aan bod in Image SEO.

Afbeeldingen. next/image geeft lazy loading, AVIF/WebP en juiste formaten, maar alleen bij een nette configuratie:

import Image from "next/image";

// LCP-afbeelding: priority, geen lazy loading
<Image
  src="/hero.jpg"
  alt="Team werkt aan een productroadmap"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority alleen op de LCP-afbeelding (meestal de hero). Alles onder de vouw blijft lazy.
• sizes moet bij je layout passen: zonder dat downloaden mobiele apparaten bestanden op desktopformaat.
• alt beschrijft de afbeelding voor zowel schermlezers als afbeeldingenzoek. Een lege alt="" alleen voor puur decoratieve beelden.

Fonts. next/font host Google Fonts zelf, haalt het externe verzoek weg en zet font-display: swap zelf:

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

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

Scripts. Elk extern script strijdt met je content om de hoofdthread:

import Script from "next/script";

// Analytics: nadat de pagina interactief is geworden
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Chatwidgets, heatmaps: pas als de browser inactief is
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Controleer wat je laadt: maak een trace in Lighthouse en zet vraagtekens bij elk script dat niet essentieel is voor de pagina. Een tag manager vol vergeten pixels kan de hoofdthread flink belasten en de INP verhogen.

Checklist:

• Hero-afbeelding heeft priority, een juiste sizes en een zinvolle alt
• Alle fonts via next/font, geen extern font-CSS
• Externe scripts op afterInteractive of lazyOnload
• Afbeeldingen veroorzaken geen layoutverschuivingen (width/height altijd ingesteld)