Ladezeit optimieren mit modernen Techniken: Core Web Vitals 2026

Was bringt eine schnellere Website in Zahlen?

Cloudflare beziffert den Effekt mit rund sieben Prozent weniger Conversions je 100 Millisekunden zusätzlicher Ladezeit. Google maß 2016 auf Mobilgeräten, dass 53 Prozent der Besuche abgebrochen werden, sobald eine Seite länger als drei Sekunden braucht. Beide Werte sind Branchendurchschnitte und ersetzen keine eigene Messung.

Die Belege dazu: Cloudflare zum Conversion-Effekt und Think with Google zur Abbruchrate, erhoben 2016. Das Alter der Google-Messung sollten Sie mitdenken: Geräte und Netze sind seitdem schneller geworden, die Erwartungshaltung der Nutzer aber ebenfalls.

Wir halten diese Prozentzahlen für zu glatt, um daraus einen Business Case zu rechnen. Die Richtung stimmt trotzdem, und sie ist seit Jahren stabil: bei jedem Shop und jedem Formular, das wir gemessen haben, korrelierte die Abbruchrate mit der Zeit bis zur ersten Interaktionsmöglichkeit. Interessant ist weniger der Mittelwert als die Frage, welche Seitentypen bei Ihnen am schlechtsten abschneiden. Oft sind das Kategorieseiten mit vielen Bildern und die Landingpages aus bezahltem Traffic, also genau die Seiten, die Geld kosten.

Dazu kommt die Suchmaschine. Google zählt die Core Web Vitals zu den Signalen der Seitenerfahrung, dokumentiert auf web.dev. Wer langsamer ist als der direkte Wettbewerber, verliert doppelt: an der Position und an den Besuchern, die trotzdem klicken.

Welche Grenzwerte gelten 2026 für die Core Web Vitals?

Drei Kennzahlen entscheiden. LCP misst, wann das größte sichtbare Element steht, Grenzwert 2,5 Sekunden. INP misst die Reaktionszeit auf Eingaben und hat 2024 den alten FID abgelöst, Grenzwert 200 Millisekunden. CLS misst das Springen des Layouts, Grenzwert 0,1. Bewertet wird am 75. Perzentil.

Das 75. Perzentil ist der Teil, den viele überlesen. Nicht Ihr Durchschnittsbesucher entscheidet, sondern das langsamste Viertel: ältere Android-Geräte, Mobilfunk im Zug, ein Büro mit überlastetem Uplink. Auf einem MacBook im Firmen-WLAN sieht jede Seite gut aus.

Zwei Datenquellen sollten Sie auseinanderhalten. Labordaten kommen aus der Lighthouse-Simulation und sind reproduzierbar, aber künstlich. Felddaten kommen aus dem Chrome User Experience Report und zeigen echte Besucher, reagieren dafür mit Verzögerung von einigen Wochen. Für die Bewertung durch Google zählen die Felddaten.

Welche Maßnahme bringt am meisten pro Stunde Aufwand?

Bilder. Sie machen auf typischen Unternehmensseiten den größten Teil der übertragenen Bytes aus und sind meist auch das LCP-Element. Moderne Formate, korrekte Priorisierung und feste Abmessungen im Markup lösen in wenigen Stunden mehr als jede Umstellung des Frameworks. Alles Weitere in diesem Artikel kommt danach.

Google gibt für WebP 25 bis 34 Prozent kleinere Dateien gegenüber JPEG bei vergleichbarem SSIM-Index an und 26 Prozent gegenüber PNG (Quelle: developers.google.com/speed/webp). AVIF komprimiert bei weichen Verläufen noch stärker, der Vorsprung hängt aber deutlich vom Bildinhalt ab. Bei Screenshots mit viel Text schrumpft er auf fast nichts zusammen. Die Unterstützungswerte stammen von caniuse.com/webp und caniuse.com/avif, abgerufen am 14.08.2026.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Produktionshalle" width="1200" height="630">
</picture>

Diese Umwandlung sollten Sie nicht von Hand machen. Next.js und Astro erzeugen die Varianten beim Build und liefern passendesrcset-Attribute mit. Wichtig bleibt, dass width und height im Markup stehen: ohne sie kennt der Browser das Seitenverhältnis nicht und das Layout springt, sobald das Bild eintrifft.

Lazy Loading und Priorisierung

Natives Lazy Loading kostet ein Attribut und spart auf langen Seiten viel Bandbreite. Der häufigste Fehler dabei ist, es pauschal auf alle Bilder zu setzen.

<img src="produkt.webp" alt="Sensormodul" loading="lazy" width="400" height="300">

<!-- LCP-Element: nie lazy, stattdessen vorziehen -->
<img src="hero.webp" alt="Montage" fetchpriority="high" width="1200" height="630">

Wie machen Sie Seitenwechsel praktisch verzögerungsfrei?

Mit der Speculation Rules API. Ein JSON-Block im HTML sagt dem Browser, welche Folgeseiten er im Hintergrund vollständig rendern darf. Klickt der Besucher, ist die Seite bereits fertig. Chrome und Edge unterstützen das ab Version 109, Firefox nicht, Safari nur hinter einem Flag.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/de/leistungen/*" }, "eagerness": "moderate" }
  ]
}
</script>

Die Chrome-Dokumentation beschreibt Prerendering ausdrücklich als Hinweis und Progressive Enhancement, nicht als Garantie: der Browser darf ablehnen, etwa bei knappem Speicher oder aktivem Energiesparen (Quelle: developer.chrome.com). Genau deshalb ist die Technik risikoarm: Browser ohne Unterstützung laden einfach normal.

Ein Vorbehalt gehört dazu. Eine vorgerenderte Seite führt ihre Skripte aus, bevor jemand sie angesehen hat. Wenn beim Laden Zähler hochlaufen, Einmal-Token verbraucht werden oder ein Warenkorb angelegt wird, verfälschen Sie sich damit die eigenen Daten. Prüfen Sie diese Nebenwirkungen, bevor Sie breite Regeln ausrollen, und beschränken Sie die Muster auf Seiten ohne Seiteneffekte.

View Transitions

Für den optischen Teil sorgt die View Transitions API. Sie legt einen Übergang zwischen zwei Zuständen, in CSS beschrieben, ohne JavaScript:

@view-transition {
  navigation: auto;
}

::view-transition-old(root) { animation: fade-out 0.2s ease-out; }
::view-transition-new(root) { animation: fade-in 0.2s ease-in; }

Die Unterstützung ist ungleich verteilt: Chromium-Browser führen hier, Safari und Firefox sind später gefolgt, und dokumentübergreifende Übergänge stehen nicht überall zur Verfügung. Den tagesaktuellen Stand zeigt MDN. Behandeln Sie den Effekt als Zugabe, die auf älteren Browsern schlicht ausbleibt.

Was tun Sie mit Tag Manager, Consent-Tool und Pixeln?

Auf Marketingseiten sind Fremdskripte fast immer der teuerste Posten auf dem Hauptthread und der Hauptgrund für schlechte INP-Werte. Drei Wege stehen offen: verzögert laden, in einen Web Worker auslagern oder ersatzlos streichen. Die dritte Option wird zu selten geprüft.

Partytown verschiebt Fremdskripte in einen Web Worker und stellt window und document dort als Proxy bereit. Die Skripte glauben, auf dem Hauptthread zu laufen, blockieren das Rendering aber nicht mehr.

<script type="text/partytown">
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

Für den deutschen Markt kommt ein Punkt hinzu, den internationale Performance-Artikel gern auslassen. Weil Marketing-Skripte hier erst nach der Einwilligung geladen werden dürfen, steht das Consent-Tool selbst am Anfang jeder ersten Sitzung. Es ist damit häufig der teuerste Fremdanbieter auf der Seite und liegt im kritischen Pfad, bevor überhaupt ein Pixel feuert. Messen Sie Ihr Consent-Tool getrennt, bevor Sie an den Pixeln dahinter optimieren.

Warum sind Schriften so oft das versteckte Problem?

Weil ihr Effekt doppelt wirkt. Eine falsch konfigurierte Schrift erzeugt entweder unsichtbaren Text während des Ladens oder einen sichtbaren Sprung beim Wechsel von der Ersatzschrift. Das erste kostet LCP, das zweite CLS. Beides fällt in Tests auf schnellen Geräten kaum auf.

1. WOFF2 als einziges Format ausliefern, es ist das kleinste und wird praktisch überall unterstützt.
2. font-display: swap setzen, damit der Text sofort mit der Ersatzschrift erscheint.
3. Subsetting auf die tatsächlich benötigten Zeichen, für deutschsprachige Seiten also Latin inklusive Umlauten und ß.
4. Selbst hosten statt Google Fonts einzubinden. Das spart eine DNS-Auflösung samt TLS-Handshake, und die IP-Adresse Ihrer Besucher geht nicht an einen fremden Server.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}

/* Ersatzschrift auf die Metriken der Zielschrift ziehen, gegen CLS */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
}

Der zweite Block ist die Maßnahme, die am häufigsten fehlt. Wenn Ersatz- und Zielschrift unterschiedlich breit laufen, verschiebt der Wechsel das gesamte Layout. Mit size-adjust und den Override-Eigenschaften gleichen Sie die Metriken an, und der Sprung verschwindet. Eine Variable Font hilft zusätzlich: eine Datei von rund 100 KB deckt alle Schnitte ab, vier einzelne Gewichte liegen eher bei 200 KB.

Bringt ein CDN am Edge ein Datenschutzproblem?

Für statische Dateien ist die Antwort einfach: Bilder, Schriften und CSS gehören auf ein CDN, das ist der billigste Geschwindigkeitsgewinn überhaupt. Sobald dynamische Inhalte mit Personenbezug am Edge verarbeitet werden, wird es zu einer Organisations- und Vertragsfrage, nicht mehr nur zu einer technischen.

Wie ernst das im deutschen Markt genommen wird, zeigt der Bitkom Cloud Report 2026 (603 Unternehmen ab 20 Beschäftigten, repräsentativ): Für 98 Prozent zählt die Herkunft des Cloud-Anbieters, 91 Prozent würden einen deutschen Anbieter bevorzugen, während heute 71 Prozent US-Angebote nutzen. 37 Prozent würden für eine ausschließlich deutsche Datenverarbeitung Nachteile in Kauf nehmen, im Vorjahr waren es 27 Prozent (Quelle: bitkom.org, 17.06.2026).

Praktisch trennen wir deshalb nach Ressourcentyp. Statische Assets laufen über das CDN, ohne dass daran etwas hängt. Für serverseitige Logik legen wir die Region fest, schließen einen Auftragsverarbeitungsvertrag ab und dokumentieren die Unterauftragnehmer. Diese Website läuft selbst auf Cloudflare Workers. Welche Konstellation für Ihr Unternehmen zulässig ist, entscheidet Ihre Rechtsabteilung, nicht Ihr Dienstleister.

Was kostet die Arbeit an der Ladezeit?

Wir verkaufen Performance nicht als eigenes Paket, sie steckt in Projekten und in der Wartung. Als Orientierung: Der Medianstundensatz eines IT-Freelancers in der DACH-Region liegt bei 95 EUR (Freelancer-Kompass 2026), zwei Tage gezielte Arbeit an Bildern, Schriften und Fremdskripten kommen damit auf rund 1.520 EUR.

Für einen Neubau statt einer Reparatur: Eine Broschüren-Website liegt bei uns bei etwa 830 bis 2.200 EUR, eine Unternehmenswebsite bei etwa 2.200 bis 4.100 EUR. Grundlage sind die Preise aus unserer Preisliste in Forint (300.000 bis 800.000 Ft beziehungsweise 800.000 bis 1.500.000 Ft), umgerechnet zum MNB-Mittelkurs vom 14.08.2026 von 1 EUR = 363,28 Ft. Die Umrechnung ist unverbindlich und ändert sich mit dem Kurs; verbindlich wird der EUR-Betrag im Angebot. Zahlen und Leistungsumfang stehen unter Website-Kosten 2026.

Wenn Sie erst wissen wollen, wo Sie stehen: Der kostenlose SEO-Audit enthält die Core-Web-Vitals-Messung Ihrer wichtigsten Seitentypen und eine nach Aufwand sortierte Maßnahmenliste.

Der Medianstundensatz stammt von freelancermap (Freelancer-Kompass 2026, veröffentlicht am 02.07.2026), die Projektpreise aus unserer öffentlichen Preisliste.

In welcher Reihenfolge arbeiten Sie die Punkte ab?

Nach Wirkung pro Aufwand, nicht nach technischer Eleganz. Die ersten drei Positionen der folgenden Liste decken bei den meisten Unternehmensseiten den Großteil der Verbesserung ab. Die unteren Positionen lohnen sich erst, wenn die oberen wirklich erledigt sind.

1. Bilder: moderne Formate, Lazy Loading unterhalb der Falz, fetchpriority auf dem LCP-Element, Abmessungen im Markup.
2. Schriften: WOFF2, font-display: swap, Subset, Selbsthosting, Metrik-Angleichung der Ersatzschrift.
3. Fremdskripte: Bestandsaufnahme, Streichliste, dann erst Web Worker. Das Consent-Tool zuerst messen.
4. Resource Hints: preconnect für fremde Domains, preload ausschließlich für die kritische Schrift und das Hero-Bild.
5. Speculation Rules und View Transitions: wenige Zeilen, spürbarer Effekt bei der Navigation.
6. CDN und Edge, sofern die Datenschutzfrage geklärt ist.
7. Critical CSS und Code-Splitting: wirksam, aber wartungsintensiv und deshalb zuletzt.

Ladezeit verfällt zwischen zwei Releases, das ist der eigentliche Punkt. Wie eine laufende Betreuung dafür aussieht, steht unter Website-Wartung. Wie die gleichen Kennzahlen in der Sichtbarkeit bei KI-Suchsystemen wirken, behandelt der Beitrag zur Optimierung für KI-Suchmaschinen. Wenn Sie die Umsetzung abgeben möchten, sehen Sie sich unsere Webentwicklung an oder fordern Sie direkt ein Angebot an.

Häufige Fragen