--- title: "LCP" title_en: "Largest Contentful Paint" description: "LCP (Largest Contentful Paint) ist eine der drei Core Web Vitals. Die Metrik misst die Zeit, bis das größte sichtbare Element im Viewport gerendert ist; gut sind höchstens 2,5 Sekunden." description_en: "LCP (Largest Contentful Paint) is one of the three Core Web Vitals. It measures the time until the largest visible element in the viewport has rendered; good is 2.5 seconds or less." summary_en: "LCP (Largest Contentful Paint) is one of the three Core Web Vitals. It measures the time until the largest visible element in the viewport has rendered; good is 2.5 seconds or less." direct_answer_en: "LCP measures how long it takes until the largest image or text block in the viewport is rendered. Google rates 2.5 seconds or less as good and over 4 seconds as poor, judged at the 75th percentile of real visits." url: "https://modern-stack.de/glossar/lcp" type: "glossary" kind: "glossary" language: de-DE updated_at: "2026-10-06T18:00:00+00:00" --- # LCP ## English Abstract LCP (Largest Contentful Paint) is one of the three Core Web Vitals. It measures the time until the largest visible element in the viewport has rendered; good is 2.5 seconds or less. ## Quick Answer (EN) LCP measures how long it takes until the largest image or text block in the viewport is rendered. Google rates 2.5 seconds or less as good and over 4 seconds as poor, judged at the 75th percentile of real visits. ## Key Takeaways (EN) - LCP targets the largest visible element, usually a hero image or headline block. - Good is at most 2.5 s, poor is above 4.0 s, measured at the 75th percentile. - Four phases decide it — server response, resource discovery, download, render. ## English Summary Largest Contentful Paint reports when the biggest image, video poster or text block in the initial viewport finishes rendering. It is a Core Web Vital and reflects perceived loading speed. Thresholds are 2.5 seconds (good) and 4.0 seconds (poor) at the 75th percentile of field data. Typical fixes are a faster server response, a preloaded and correctly sized hero image without lazy loading, and less render-blocking CSS and JavaScript. Modern Stack ships server-rendered HTML to keep LCP low. ## Quick Answer **LCP:** Der Largest Contentful Paint gibt an, wie viele Sekunden vergehen, bis der größte sichtbare Inhalt im ersten Bildschirm fertig gezeichnet ist — meist ein Hero-Bild oder eine große Überschrift. Bis 2,5 Sekunden ist der Wert gut, über 4,0 Sekunden schlecht. Du senkst ihn mit schneller Serverantwort, richtig dimensionierten Bildern und weniger blockierendem Code. > Zitierfähigkeit entsteht, wenn Definition, Struktur und klare nächste Schritte zusammenkommen. > Steve Baka ## Key Takeaways - LCP bewertet die gefühlte Ladegeschwindigkeit: Wann sieht der Besucher den Hauptinhalt? - Grenzwerte: gut ≤ 2,5 s, schlecht > 4,0 s — gemessen am 75. Perzentil echter Besuche. - Vier Phasen entscheiden: Serverantwort, Entdecken, Herunterladen und Rendern des Elements. - Teil der [Core Web Vitals](/glossar/core-web-vitals) neben [INP](/glossar/inp) und [CLS](/glossar/cls). ## Was ist der Largest Contentful Paint? LCP ist eine Messgröße aus den Core Web Vitals von Google. Sie erfasst den Zeitpunkt, zu dem das größte Element im sichtbaren Bereich der Seite gerendert wurde. Als Kandidaten zählen Bilder, das Vorschaubild eines Videos, Hintergrundbilder, die per CSS geladen werden, und Textblöcke auf Blockebene. Während die Seite lädt, kann sich der Kandidat ändern: Erst erscheint eine Überschrift, dann ein größeres Bild. Der endgültige Wert ist der letzte gemeldete Kandidat vor der ersten Nutzereingabe. Anders als technische Kennzahlen wie die Serverzeit beantwortet LCP eine Nutzerfrage: „Ist da, was ich sehen wollte?“ Deshalb steht die Metrik für Wahrnehmung, nicht für Rechenzeit. Wichtig ist außerdem, dass Google nach dem 75. Perzentil bewertet. Wenn drei von vier Besuchen schnell sind, der vierte aber nicht, zählt der langsamere Wert — mobile Verbindungen im Funkloch eingeschlossen. ## Aus welchen Phasen besteht der LCP? Die Optimierungsanleitung von web.dev teilt die Zeit in vier Abschnitte, die sich addieren: 1. **Time to First Byte:** Wie lange braucht der Server für das HTML? Hier wirken Hosting, Caching und [CDN](/glossar/cdn). 2. **Ladeverzögerung der Ressource:** Wann erfährt der Browser überhaupt vom Hero-Bild? Steht es nur im CSS oder wird es per Skript nachgeladen, entsteht eine Lücke. 3. **Ladedauer der Ressource:** Wie groß ist die Datei? Ein 2-MB-JPEG kostet Sekunden, ein passend skaliertes AVIF Millisekunden. 4. **Render-Verzögerung:** Blockieren Stylesheets, Skripte oder Webfonts das Zeichnen, obwohl die Datei längst da ist? Wer nur „die Seite komprimiert“, trifft oft die falsche Phase. Messe zuerst, wo die Zeit steckt, und beseitige dann den größten Anteil. ## Welche Maßnahmen senken den LCP? - **Bild priorisieren:** Das LCP-Bild nicht lazy laden, sondern im HTML früh referenzieren und mit `fetchpriority="high"` markieren. - **Formate und Größen:** Moderne Formate, passende `srcset`-Breiten, keine Desktop-Grafik auf dem Handy. - **Server und Caching:** Fertig gerendertes HTML per [SSG](/glossar/ssg) oder [SSR](/glossar/ssr) am Edge ausliefern. - **Blocker entfernen:** Kritisches CSS inline, Skripte mit `defer`, Webfonts mit `font-display` und Preload. - **DOM verschlanken:** Tief verschachtelte [Pagebuilder](/glossar/pagebuilder)-Strukturen verzögern das Rendern, weil der Browser mehr Knoten verarbeiten muss. ## LCP bei Modern Stack: Wie wir ihn senken Bei Modernisierungen messen wir LCP vor und nach dem Umbau mit Labor- und Felddaten. Typische Ausgangslage ist ein WordPress-Auftritt mit Pagebuilder und Slider, dessen LCP deutlich über 2,5 Sekunden liegt. Auf [Next.js](/glossar/nextjs) mit [Vercel](/glossar/vercel) liefern wir schlankes, vorgerendertes HTML, definieren das Hero-Bild gezielt als priorisierte Ressource und verzichten auf Slider-Skripte. Der gleiche Aufbau hilft Crawlern und KI-Systemen, weil der Inhalt ohne Skriptausführung im Dokument steht. Mehr zum Vorgehen: [Core Web Vitals & Modernisierung](/themen/core-web-vitals-modernisierung). ## Welche Fehler treten häufig auf? Ein Slider als erstes Element, dessen erstes Bild erst per JavaScript nachgeladen wird. Ein Hero-Video, das als größtes Element ein riesiges Poster lädt. Lazy Loading ausgerechnet auf dem wichtigsten Bild. Und die Annahme, ein CDN allein löse das Problem — es beschleunigt Auslieferung, nicht aufgeblähtes Markup. ## Verwandte Themen - [Core Web Vitals](/glossar/core-web-vitals) - [INP](/glossar/inp) - [CLS](/glossar/cls) - [SSR](/glossar/ssr) - [Core Web Vitals & Modernisierung](/themen/core-web-vitals-modernisierung) - [CDN](/glossar/cdn) ## Quellen - [web.dev — Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) — Google web.dev; Offizielle Definition, Grenzwerte und Messmethode. - [web.dev — Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp) — Google web.dev; Zerlegt LCP in vier Teilphasen mit konkreten Optimierungen. - [Core Web Vitals & Modernisierung](https://modern-stack.de/themen/core-web-vitals-modernisierung) — Modern Stack; Praxis, wie wir Performance bei Modernisierungen messen und verbessern. ## FAQ ### Welcher LCP-Wert ist gut? Bis 2,5 Sekunden gilt als gut, zwischen 2,5 und 4,0 Sekunden als verbesserungswürdig, darüber als schlecht. Bewertet wird das 75. Perzentil echter Besuche, getrennt nach Mobil und Desktop. ### Welches Element zählt als LCP? Das größte sichtbare Bild, Video-Vorschaubild, Hintergrundbild per CSS oder der größte Textblock im ersten Bildschirm. Welches das ist, zeigen Chrome DevTools und PageSpeed Insights. ### Ist ein guter LCP eine Ranking-Garantie? Nein. Die Core Web Vitals sind ein Signal unter vielen. Ein schlechter LCP kostet aber Besucher, bevor Inhalte überhaupt gelesen werden, und verschlechtert damit Anfragen. ## Related - [Core Web Vitals](https://modern-stack.de/glossar/core-web-vitals) - [Core Web Vitals & Modernisierung](https://modern-stack.de/themen/core-web-vitals-modernisierung) - [INP](https://modern-stack.de/glossar/inp) - [CDN](https://modern-stack.de/glossar/cdn) - [CLS](https://modern-stack.de/glossar/cls) - [SSR](https://modern-stack.de/glossar/ssr) ## Inline Entity Mentions - [[entity:core-web-vitals]] → https://modern-stack.de/themen/core-web-vitals - [[entity:inp]] → https://modern-stack.de/themen/inp - [[entity:cls]] → https://modern-stack.de/themen/cls - [[entity:cdn]] → https://modern-stack.de/themen/cdn - [[entity:ssg]] → https://modern-stack.de/themen/ssg - [[entity:ssr]] → https://modern-stack.de/themen/ssr - [[entity:pagebuilder]] → https://modern-stack.de/themen/pagebuilder - [[entity:nextjs]] → https://modern-stack.de/themen/nextjs - [[entity:vercel]] → https://modern-stack.de/themen/vercel - [[entity:core-web-vitals-modernisierung]] → https://modern-stack.de/themen/core-web-vitals-modernisierung ## Strukturierte Daten ```json { "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "@id": "https://modern-stack.de/#website", "url": "https://modern-stack.de", "name": "Modern Stack", "description": "Wir modernisieren bestehende Unternehmenswebseiten — schneller, klarer und besser lesbar für Suche und KI. Inhalte bleiben. Ab 500 €.", "publisher": { "@id": "https://modern-stack.de/#organization" }, "inLanguage": "de-DE" }, { "@type": [ "Organization", "ProfessionalService" ], "@id": "https://modern-stack.de/#organization", "name": "Modern Stack", "legalName": "Modern Stack", "url": "https://modern-stack.de", "logo": "https://modern-stack.de/brand/logo.png", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://www.google.com/search?kgmid=/g/11p1mc1kq_&q=Modern+Stack", "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de" ], "foundingLocation": { "@type": "Place", "name": "Bad Schönborn, Deutschland" }, "address": { "@type": "PostalAddress", "streetAddress": "Glöckelsberg 13/2", "postalCode": "76669", "addressLocality": "Bad Schönborn", "addressRegion": "Baden-Württemberg", "addressCountry": "DE" }, "geo": { "@type": "GeoCoordinates", "latitude": 49.22167, "longitude": 8.65734 }, "areaServed": [ { "@type": "Place", "name": "Bad Schönborn", "url": "https://modern-stack.de/regionen/bad-schoenborn" }, { "@type": "Place", "name": "Mingolsheim", "alternateName": "Bad Mingolsheim", "url": "https://modern-stack.de/regionen/mingolsheim" }, { "@type": "Place", "name": "Langenbrücken", "alternateName": "Bad Langenbrücken", "url": "https://modern-stack.de/regionen/langenbruecken" }, { "@type": "Country", "name": "DE" }, { "@type": "Country", "name": "AT" }, { "@type": "Country", "name": "CH" } ], "knowsAbout": [ "Webseite-Modernisierung", "WordPress-Migration", "Generative Engine Optimization", "Lokale Sichtbarkeit Bad Schönborn" ], "founder": { "@id": "https://modern-stack.de/#person" } }, { "@type": "Person", "@id": "https://modern-stack.de/#person", "name": "Steve Baka", "jobTitle": "Gründer, Modern Stack", "url": "https://stevebaka.de", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de", "https://geo-seo-aio.de" ], "worksFor": { "@id": "https://modern-stack.de/#organization" }, "knowsAbout": [ "Webseite-Modernisierung", "Generative Engine Optimization", "AI Search", "WordPress Migration", "Knowledge Graph", "Lokale Sichtbarkeit D-A-CH" ] }, { "@type": "WebPage", "@id": "https://modern-stack.de/glossar/lcp#webpage", "url": "https://modern-stack.de/glossar/lcp", "name": "LCP — Glossar | Modern Stack", "description": "LCP erklärt: Was Largest Contentful Paint misst, welche Grenzwerte gelten, welche vier Phasen entscheiden und wie du die Ladezeit senkst.", "isPartOf": { "@id": "https://modern-stack.de/#website" }, "about": { "@id": "https://modern-stack.de/glossar/lcp#main" }, "breadcrumb": { "@id": "https://modern-stack.de/glossar/lcp#breadcrumb" }, "dateModified": "2026-10-06T18:00:00+00:00", "inLanguage": "de-DE" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/lcp#main", "name": "LCP — Glossar", "headline": "LCP — Glossar", "alternateName": "LCP", "description": "LCP (Largest Contentful Paint) ist eine der drei Core Web Vitals. Die Metrik misst die Zeit, bis das größte sichtbare Element im Viewport gerendert ist; gut sind höchstens 2,5 Sekunden.", "abstract": [ { "@value": "LCP (Largest Contentful Paint) ist eine der drei Core Web Vitals. Die Metrik misst die Zeit, bis das größte sichtbare Element im Viewport gerendert ist; gut sind höchstens 2,5 Sekunden.", "@language": "de" }, { "@value": "LCP (Largest Contentful Paint) is one of the three Core Web Vitals. It measures the time until the largest visible element in the viewport has rendered; good is 2.5 seconds or less.", "@language": "en" } ], "url": "https://modern-stack.de/glossar/lcp", "inLanguage": [ "de-DE", "en" ], "datePublished": "2026-08-31T18:00:00+00:00", "dateModified": "2026-10-06T18:00:00+00:00", "author": { "@id": "https://modern-stack.de/#person" }, "publisher": { "@id": "https://modern-stack.de/#organization" }, "mainEntityOfPage": { "@id": "https://modern-stack.de/glossar/lcp#webpage" }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".gb-direct-answer", ".gb-faq-answer" ] }, "encoding": { "@type": "MediaObject", "encodingFormat": "text/markdown", "name": "English direct answer", "text": "LCP measures how long it takes until the largest image or text block in the viewport is rendered. Google rates 2.5 seconds or less as good and over 4 seconds as poor, judged at the 75th percentile of real visits." }, "citation": [ "https://web.dev/articles/lcp", "https://web.dev/articles/optimize-lcp", "https://modern-stack.de/themen/core-web-vitals-modernisierung" ], "mentions": [ { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/core-web-vitals#main", "name": "Core Web Vitals", "alternateName": "Core Web Vitals", "url": "https://modern-stack.de/glossar/core-web-vitals" }, { "@type": "Article", "@id": "https://modern-stack.de/themen/core-web-vitals-modernisierung#main", "name": "Core Web Vitals & Modernisierung", "alternateName": "Core Web Vitals and modernization", "url": "https://modern-stack.de/themen/core-web-vitals-modernisierung" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/inp#main", "name": "INP", "alternateName": "Interaction to Next Paint", "url": "https://modern-stack.de/glossar/inp" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/cdn#main", "name": "CDN", "alternateName": "Content Delivery Network", "url": "https://modern-stack.de/glossar/cdn" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/cls#main", "name": "CLS", "alternateName": "Cumulative Layout Shift", "url": "https://modern-stack.de/glossar/cls" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/ssr#main", "name": "SSR", "alternateName": "Server-Side Rendering", "url": "https://modern-stack.de/glossar/ssr" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/ssg#main", "name": "SSG", "alternateName": "Static Site Generation", "url": "https://modern-stack.de/glossar/ssg" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/pagebuilder#main", "name": "Pagebuilder", "alternateName": "Page builder", "url": "https://modern-stack.de/glossar/pagebuilder" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/nextjs#main", "name": "Next.js", "alternateName": "Next.js", "url": "https://modern-stack.de/glossar/nextjs" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/vercel#main", "name": "Vercel", "alternateName": "Vercel", "url": "https://modern-stack.de/glossar/vercel" } ], "inDefinedTermSet": "https://modern-stack.de/glossar" }, { "@type": "BreadcrumbList", "@id": "https://modern-stack.de/glossar/lcp#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Startseite", "item": "https://modern-stack.de/" }, { "@type": "ListItem", "position": 2, "name": "Glossar", "item": "https://modern-stack.de/glossar" }, { "@type": "ListItem", "position": 3, "name": "LCP", "item": "https://modern-stack.de/glossar/lcp" } ] }, { "@type": "FAQPage", "@id": "https://modern-stack.de/glossar/lcp#faq", "mainEntity": [ { "@type": "Question", "name": "Welcher LCP-Wert ist gut?", "acceptedAnswer": { "@type": "Answer", "text": "Bis 2,5 Sekunden gilt als gut, zwischen 2,5 und 4,0 Sekunden als verbesserungswürdig, darüber als schlecht. Bewertet wird das 75. Perzentil echter Besuche, getrennt nach Mobil und Desktop." } }, { "@type": "Question", "name": "Welches Element zählt als LCP?", "acceptedAnswer": { "@type": "Answer", "text": "Das größte sichtbare Bild, Video-Vorschaubild, Hintergrundbild per CSS oder der größte Textblock im ersten Bildschirm. Welches das ist, zeigen Chrome DevTools und PageSpeed Insights." } }, { "@type": "Question", "name": "Ist ein guter LCP eine Ranking-Garantie?", "acceptedAnswer": { "@type": "Answer", "text": "Nein. Die Core Web Vitals sind ein Signal unter vielen. Ein schlechter LCP kostet aber Besucher, bevor Inhalte überhaupt gelesen werden, und verschlechtert damit Anfragen." } } ] } ] } ```