Begriffe · Web-Performance 2026

PageSpeed-Glossar

Zentrale Begriffe rund um Web-Performance kompakt erklärt, alphabetisch sortiert.

AVIF

Modernes Bildformat (AV1-basiert), 30-50 % kleiner als WebP.

AVIF ist ein 2019 standardisiertes Bildformat, basierend auf dem AV1-Video-Codec. Bei gleicher visueller Qualität typisch 30-50 % kleiner als WebP und 50-80 % kleiner als JPG. Unterstützt seit 2022 in allen aktuellen Browsern. Erste Wahl für Foto-Inhalte im Web, mit picture-Element-Fallback für ältere Browser.

Verwandt: WebP,Bildoptimierung

Cache-Control

HTTP-Header der Cache-Verhalten von Browsern und CDNs steuert.

Wichtige Direktiven: public (CDNs dürfen cachen), max-age (Frische in Sekunden), immutable (nie revalidieren), stale-while-revalidate (stale Response sofort, im Hintergrund aktualisieren). Für hash-versionierte Assets typisch "public, max-age=31536000, immutable", für HTML "no-cache".

Verwandt: ETag,Service Worker

CDN (Content Delivery Network)

Server-Netzwerk das statische Inhalte nah am User ausliefert.

Ein CDN verteilt Webinhalte auf Edge-Servern weltweit. Statt jede Anfrage bis zum Origin-Server reisen zu lassen, antwortet ein Server in der Nähe des Users. Reduziert TTFB um 50-200 ms pro Asset und entlastet den Origin. Bekannte Anbieter: Cloudflare, Bunny CDN, Fastly, AWS CloudFront.

Verwandt: TTFB,Edge-Caching

CLS (Cumulative Layout Shift)

Core Web Vital, misst unerwartete Layout-Verschiebungen.

CLS summiert alle Layout-Shifts pro Session, je Shift impact fraction × distance fraction. Schwellwerte: ≤ 0,1 Good, 0,1-0,25 Needs Improvement, > 0,25 Poor. Häufigste Ursache: Bilder ohne width/height-Attribute. Lösung: aspect-ratio CSS oder explizite Dimensions setzen.

Verwandt: Core Web Vitals,LCP,INP

Code-Splitting

JavaScript-Bundle in Chunks zerlegen, die bei Bedarf nachgeladen werden.

Beim Code-Splitting wird das initial-geladene JS-Bundle klein gehalten, indem nicht-kritische Komponenten erst bei Bedarf via Dynamic Import nachgeladen werden. Funktioniert mit ES-Module-Imports: React.lazy(), import() Funktion. Reduziert initial-Parse-Zeit und beschleunigt LCP.

Verwandt: Tree-Shaking,Lazy-Loading

Core Web Vitals

Drei Web-Performance-Metriken die Google als Ranking-Signal nutzt.

LCP (Largest Contentful Paint), INP (Interaction to Next Paint) und CLS (Cumulative Layout Shift). Seit Juni 2021 offizielles Ranking-Signal. Google misst die Werte über CrUX (echte Nutzer-Daten der letzten 28 Tage). Eine URL gilt als "Good" wenn das 75. Perzentil aller Messungen unter dem Schwellwert liegt.

Verwandt: LCP,INP,CLS,CrUX

Critical CSS

CSS für den initial sichtbaren Bereich, inline im HTML eingebettet.

Critical CSS ist das Minimum an CSS, das zum Rendern des Above-the-Fold-Bereichs nötig ist. Wird inline in <style>-Tags im <head> eingebettet, der Rest wird per <link rel="preload"> asynchron nachgeladen. Verhindert dass das CSS-Bundle render-blocking wird. Tools: Critters, Penthouse, PurgeCSS.

Verwandt: Render-Blocking,LCP

CrUX (Chrome User Experience Report)

Googles Datensatz mit anonymisierten Real-User-Metriken.

CrUX sammelt anonymisierte Performance-Daten von Chrome-Nutzern weltweit (die das in den Settings erlaubt haben). Für Core Web Vitals werden die Werte des 75. Perzentils der letzten 28 Tage betrachtet. Verfügbar in der Google Search Console (PageSpeed Insights → Field-Data) und über die CrUX-BigQuery-Datenbank.

Verwandt: Core Web Vitals,Field-Data

defer

Script-Attribut: lade asynchron, führe nach HTML-Parsing aus.

Mit defer geladene Scripts blockieren das HTML-Parsing nicht und werden in dokumentenreihenfolge nach dem Parsing ausgeführt. Im Gegensatz zu async (das sofort ausführt sobald geladen). Für normale Site-Scripts ist defer der bessere Default.

Verwandt: async,Render-Blocking

ETag

HTTP-Header für konditionelle Requests (304 Not Modified).

Ein ETag ist eine eindeutige Kennung (typisch ein Hash) für eine Ressource. Bei Wiederbesuch sendet der Browser den ETag im If-None-Match-Header. Hat sich nichts geändert, antwortet der Server mit 304 (statt 200 + Body) - spart Bandbreite. Funktioniert mit Cache-Control no-cache zusammen.

Verwandt: Cache-Control,Konditioneller Request

FCP (First Contentful Paint)

Wann der erste Inhalt im Viewport sichtbar wird.

FCP misst die Zeit bis zum ersten Rendern irgendeines Textes, Bildes oder SVGs. Im Gegensatz zu LCP (das auf das größte Element wartet) ist FCP oft 200-500 ms früher. Schwellwert "Good": ≤ 1,8 s. Im Lighthouse-Score mit 10 % gewichtet.

Verwandt: LCP,Speed Index

fetchpriority

HTML-Attribut zum Setzen der Lade-Priorität von Ressourcen.

fetchpriority="high" markiert eine Ressource als kritisch (z.B. Hero-Bild für LCP), fetchpriority="low" für unwichtige. Browser passt seine Priorisierung an. Seit Chrome 102 (2022) breit unterstützt. Schwester-Konzept zu <link rel="preload">, eleganter weil direkt am Element.

Verwandt: Preload,LCP

font-display

CSS-Property die das Verhalten beim Webfont-Laden steuert.

Werte: auto, block, swap, fallback, optional. swap ist meist die beste Wahl: Text wird sofort mit System-Font angezeigt, der Webfont swappt rein sobald geladen. Verhindert "Flash of Invisible Text" (FOIT). Trade-off: leichtes Layout-Shift wenn Webfont andere Zeichen-Metriken hat.

Verwandt: FOIT,FOUT,CLS

HTTP/2 (h2)

Multiplexed-HTTP-Protokoll mit Header-Komprimierung.

Im Gegensatz zu HTTP/1.1 (eine Connection pro Asset) öffnet HTTP/2 eine Connection und multiplexed alle Requests darüber. Spart TCP-Handshakes und Latenz. Header werden komprimiert (HPACK). Wird inzwischen von allen modernen Hostern und CDNs unterstützt.

Verwandt: HTTP/3,TTFB

HTTP/3 (h3, QUIC)

UDP-basiertes HTTP, vermeidet TCP-Head-of-Line-Blocking.

HTTP/3 nutzt das UDP-basierte QUIC-Protokoll. Spart den TCP-Connect-Roundtrip (0-RTT bei Reconnects) und vermeidet TCP-Head-of-Line-Blocking. Bei guter Server-Unterstützung 50-100 ms schneller als HTTP/2. Cloudflare, Vercel, Netlify haben es standardmäßig aktiv.

Verwandt: HTTP/2,TTFB

INP (Interaction to Next Paint)

Core Web Vital, misst Verzögerung zwischen Eingabe und visueller Antwort.

Seit März 2024 ersetzt INP die alte Metrik FID. INP misst ALLE Interaktionen während der Session (nicht nur die erste), die Zeit von Input bis nächstem Paint (nicht nur bis Processing-Start), und reportet das 98. Perzentil. Schwellwert Good: ≤ 200 ms. Härter zu erreichen als FID.

Verwandt: Core Web Vitals,FID,TBT

IntersectionObserver

Browser-API zum Erkennen wenn Elemente in den Viewport scrollen.

Die IntersectionObserver-API ermöglicht effizientes Tracken wann Elemente im Viewport erscheinen oder verschwinden. Anwendungen: Lazy-Loading von Bildern (vor nativem loading="lazy" war das der Standard-Weg), Infinite-Scrolling, In-View-Animationen. Performant weil im Browser-internen Layout-Engine implementiert.

Verwandt: Lazy-Loading

Lazy-Loading

Inhalte erst laden wenn sie tatsächlich gebraucht werden.

Lazy-Loading verzögert das Laden von Bildern, iframes oder Komponenten bis sie in den Viewport scrollen. Nativ verfügbar mit loading="lazy" auf img/iframe (Chrome 76+, FF 75+, Safari 15.4+). Spart Bandbreite und beschleunigt LCP - aber NIE das LCP-Bild selbst lazy-loaden.

Verwandt: IntersectionObserver,fetchpriority

LCP (Largest Contentful Paint)

Core Web Vital, misst wann größtes sichtbares Element gerendert ist.

LCP markiert den Zeitpunkt, an dem das größte Inhaltselement im Viewport gerendert ist - meist Hero-Bild, Hero-Video oder Hauptüberschrift. Schwellwerte: ≤ 2,5 s Good, 2,5-4,0 s Needs Improvement, > 4,0 s Poor. Wichtigste UX-Metrik weil sie "Seite ist nutzbar"-Wahrnehmung repräsentiert.

Verwandt: Core Web Vitals,FCP,TTFB

Lighthouse

Googles Open-Source Audit-Tool für Web-Performance, SEO, A11y.

Lighthouse ist in Chrome DevTools integriert und misst Performance, Accessibility, SEO, Best Practices und PWA-Konformität. Bewertet auf einer Skala von 0-100. Performance-Score setzt sich zusammen aus LCP (25 %), TBT (30 %), CLS (25 %), FCP (10 %), Speed Index (10 %). Lab-Test - nicht zu verwechseln mit CrUX Field-Data.

Verwandt: CrUX,PageSpeed Insights

Preload

Resource-Hint der den Browser anweist eine Ressource frühzeitig zu laden.

Verwandt: fetchpriority,Prefetch,Preconnect

Service Worker

Skript das im Hintergrund Network-Requests abfangen kann.

Ein Service Worker registriert sich beim Browser und kann fetch-Requests interceptieren. Ermöglicht Offline-First-Apps, aggressive Caching-Strategien, Background-Sync und Push-Notifications. Mächtig, aber Update-Strategien (skipWaiting, clientsClaim) müssen sauber durchdacht sein, sonst zeigt der User veraltete Versionen.

Verwandt: PWA,Caching-Strategie

srcset

img-Attribut für Responsive Images mit mehreren Bildgrößen.

srcset listet mehrere Bild-Varianten mit Breiten-Deskriptoren auf, das sizes-Attribut sagt dem Browser welche Größe der Image-Slot hat. Browser wählt die passende Variante. Auf Mobile lädt damit oft die 400px-Version statt 1600px, spart bis zu 80 % Bandbreite.

Verwandt: Responsive Images,picture-Element

TBT (Total Blocking Time)

Lab-Metrik: Summe aller Hauptthread-Blockaden > 50 ms.

TBT misst wie lange der Hauptthread durch lange Tasks blockiert ist. Nur Anteile > 50 ms zählen (Tasks dadrunter sind unkritisch). Lab-Variante von INP - aber TBT wird in Lighthouse gemessen, INP im Field. Score-Gewichtung in Lighthouse 12: 30 % - die wichtigste Einzelmetrik.

Verwandt: INP,Long Task

Tree-Shaking

Bundle-Optimierung die ungenutzten Code automatisch entfernt.

Tree-Shaking eliminiert tote Code-Pfade während des Bundlings. Funktioniert nur mit ES-Modulen und named exports. import { debounce } from "lodash-es" → nur debounce wird gebundled, nicht ganz lodash. CommonJS-Libraries (require) verhindern Tree-Shaking. Effekt: oft 30-70 % kleinere Bundles bei sauberer Anwendung.

Verwandt: Code-Splitting,Bundle-Größe

TTFB (Time to First Byte)

Zeit bis das erste Response-Byte vom Server eintrifft.

TTFB ist die Untergrenze für alle Loading-Metriken: LCP kann nie schneller sein als TTFB. Setzt sich zusammen aus DNS + Connect + TLS + Server-Verarbeitung. Schwellwert Good: ≤ 600 ms. Hebel: statisches Pre-Rendering, CDN, HTTP/2 oder /3, Database-Caching.

Verwandt: LCP,CDN

web-vitals (Library)

JS-Library zum Messen der Core Web Vitals im Real User Monitoring.

web-vitals (von Google maintained) bietet Funktionen onLCP, onINP, onCLS, onFCP, onTTFB die in JS-Apps eingebaut werden können, um die Metriken pro User-Session zu messen und an ein eigenes Analytics zu senden. Damit hat man Field-Daten, ohne auf CrUX-Aggregation warten zu müssen.

Verwandt: CrUX,Real User Monitoring

WebP

Bildformat von Google, ~30-40 % kleiner als JPG.

WebP wurde 2010 eingeführt, ist seit Safari 14 (2020) in allen Browsern unterstützt. Liefert ~30-40 % Größenersparnis gegenüber JPG bei gleicher visueller Qualität. Wurde 2024 weitgehend von AVIF überholt, bleibt aber als Fallback relevant für ältere iOS-Versionen.

Verwandt: AVIF,Bildoptimierung