Bilder, Schriften und Skripte: das klassische Performance-Trio

Dieses Thema betrifft die Performance-Seite. Bilder als Traffic-Kanal – Alt-Text, Bildersuche, ImageObject-Schema – behandelt Bilder-SEO.

Bilder. next/image liefert Lazy Loading, AVIF/WebP und passende Größen – aber nur bei sauberer Konfiguration:

import Image from "next/image";

// LCP-Bild: priority, kein Lazy Loading
<Image
  src="/hero.jpg"
  alt="Team arbeitet an der Produkt-Roadmap"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority nur beim LCP-Bild (meist das Hero). Alles unterhalb des ersten Bildschirms bleibt Lazy.
• sizes muss zu Ihrem Layout passen – ohne es laden mobile Geräte Dateien in Desktop-Größe.
• alt beschreibt das Bild sowohl für Screenreader als auch für die Bildersuche. Ein leeres alt="" nur bei rein dekorativen Grafiken.

Schriften. next/font hostet Google Fonts selbst, spart die externe Anfrage und setzt font-display: swap automatisch:

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

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

Skripte. Jedes externe Skript konkurriert mit Ihrem Inhalt um den Hauptthread:

import Script from "next/script";

// Analytics: nachdem die Seite interaktiv geworden ist
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Chat-Widgets, Heatmaps: erst, wenn der Browser untätig ist
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Prüfen Sie, was Sie laden: Erstellen Sie einen Lighthouse-Trace und stellen Sie jedes Skript infrage, das für die Seite nicht entscheidend ist. Ein Tag Manager voller vergessener Pixel kann den Hauptthread erheblich belasten und den INP in die Höhe treiben.

Checkliste:

• Das Hero-Bild hat priority, ein korrektes sizes und einen sinnvollen alt
• Alle Schriften über next/font, kein externes Font-CSS
• Externe Skripte mit afterInteractive oder lazyOnload
• Bilder verursachen keine Layoutverschiebungen (width/height immer gesetzt)