LCP optimieren: So wird Ihr Hauptinhalt schneller sichtbar

Wenn Patientinnen und Patienten eine Praxiswebsite öffnen, entscheidet sich in den ersten Sekunden, ob sie bleiben oder abspringen. Largest Contentful Paint (LCP) misst genau diesen Moment: Wann wird der wichtigste sichtbare Inhalt gerendert? Für Praxiswebsites ist das häufig das Hero-Bild, der Praxisname als große Überschrift oder ein Vertrauenselement wie ein Zertifikats-Badge.

Google definiert „gut“ als LCP unter 2,5 Sekunden am 75. Perzentil der Nutzer. Alles darüber kostet nicht nur Geduld, sondern messbar Conversions und Rankings. Dieser Artikel zeigt konkrete Maßnahmen, um LCP gezielt zu verbessern.

Das LCP-Element identifizieren

Bevor Sie optimieren, müssen Sie wissen, welches Element LCP ist. Das variiert je nach Seite und Viewport. Auf der Startseite einer Zahnarztpraxis kann es das Teamfoto sein. Auf einer Leistungsseite die H1-Überschrift. Auf einem Blogartikel ein eingebettetes Bild.

PageSpeed Insights zeigt das LCP-Element im Diagnosebericht. Chrome DevTools unter Performance → Experience → Largest Contentful Paint liefert die Element-Auswahl in Echtzeit. Lighthouse listet das Element im Audit-Bericht auf.

Typische LCP-Kandidaten: img-Elemente, Elemente mit CSS-Hintergrundbildern, block-level-Textelemente (h1, p), video-Elemente mit Poster-Image. SVG-Icons und kleine Logos sind selten LCP-Elemente — es sei denn, sie dominieren den Viewport.

Sobald das Element bekannt ist, lassen sich alle folgenden Maßnahmen gezielt darauf anwenden, statt pauschal „alles schneller“ zu machen.

Bilder: Der häufigste LCP-Engpass

Auf den meisten Praxiswebsites ist ein Bild das LCP-Element. Unoptimierte Praxis- oder Behandlungsfotos in JPEG mit mehreren Megabyte sind der häufigste Engpass.

Formatwahl: WebP spart 25 bis 35 Prozent gegenüber JPEG bei gleicher Qualität. AVIF spart weitere 20 Prozent, hat aber noch nicht überall volle Browserunterstützung. Ein Picture-Element mit WebP/AVIF und JPEG-Fallback ist der sichere Standard.

Größe: Das Bild muss nicht breiter sein als der maximale Darstellungsbereich. Ein Hero-Bild, das auf Mobile 400 Pixel breit dargestellt wird, braucht kein 4000-Pixel-Original. Responsive srcset mit mehreren Auflösungen (400w, 800w, 1200w) stellt sicher, dass jedes Gerät die passende Dateigröße lädt.

Priorisierung: Das LCP-Bild darf nicht lazy-loaded werden. Stattdessen fetchpriority=“high” setzen und per link rel=“preload” im Head vorladen. Alle anderen Below-the-fold-Bilder weiterhin lazy laden.

Abmessungen: width und height explizit setzen oder aspect-ratio per CSS definieren. Das verhindert Layout-Shifts und hilft dem Browser, Platz zu reservieren, bevor das Bild geladen ist.

Serverantwortzeit und Time to First Byte

LCP beginnt nicht mit dem Bilddownload, sondern mit dem ersten Byte vom Server. Time to First Byte (TTFB) sollte unter 800 Millisekunden liegen. Jede Millisekunde Serververzögerung addiert sich direkt auf den LCP-Wert.

Hebel für besseren TTFB: Statische Seitengenerierung statt dynamischem Rendering bei jedem Request. Ein CDN, das HTML aus Edge-Locations ausliefert. Schlankes Hosting ohne überladene Shared-Server-Umgebungen. HTTP/2 oder HTTP/3 für parallele Ressourcenübertragung.

WordPress-Praxiswebsites mit vielen Plugins und ohne Caching liegen häufig bei TTFB über 1,5 Sekunden — allein das macht einen guten LCP-Wert unmöglich, egal wie gut die Bilder optimiert sind. Ein Wechsel zu statisch generierten Seiten mit CDN-Auslieferung reduziert TTFB oft auf unter 200 Millisekunden.

Render-Blocking-Ressourcen eliminieren

Der Browser kann das LCP-Element nicht rendern, solange render-blockierende Ressourcen den Main Thread blockieren. Typische Blocker: CSS-Dateien im Head ohne media-Attribut, synchron geladene JavaScript-Dateien, Webfonts ohne optimierte Ladestrategie.

Kritisches CSS — die Styles, die für den sichtbaren Bereich nötig sind — inline im Head einbetten. Den Rest asynchron laden. Nicht-kritisches JavaScript mit defer oder async ausstatten. Fonts mit font-display: swap laden und nur die benötigten Schnitte und Zeichensätze einbinden.

Bei Praxiswebsites mit schlankem Design ist die Menge an kritischem CSS oft unter 14 KB — damit passt sie in den ersten TCP-Roundtrip und beschleunigt das initiale Rendering erheblich.

Third-Party-Skripte und eingebettete Dienste

Analytics, Cookie-Consent-Tools, Chat-Widgets, eingebettete Buchungssysteme und Social-Media-Plugins verlängern LCP, weil sie vor oder parallel zum Hauptinhalt geladen werden.

Strategien: Third-Party-Skripte verzögert laden — erst nach dem LCP-Event oder nach Nutzerinteraktion. Self-hosted Analytics statt Google Tag Manager mit dutzenden Tags. Terminbuchung als Link zu einer externen Plattform statt als schweres iframe im Hero-Bereich.

Jedes eingebettete Widget sollte gegen den Performance-Gewinn abgewogen werden. Ein Chat-Widget, das 400 Millisekunden LCP kostet, muss messbar mehr Anfragen generieren als ein gut sichtbarer Kontakt-Button.

LCP auf verschiedenen Seitentypen

Nicht jede Seite hat dieselben LCP-Herausforderungen. Die Startseite mit Hero-Bild braucht Preload und fetchpriority. Leistungsseiten mit Text-Heavy-Layout profitieren von schnellem Font-Rendering und minimalem CSS. Blogartikel mit großem Titelbild brauchen dieselbe Bildoptimierung wie die Startseite, aber das Bild steht oft weiter oben im DOM — was die Priorisierung vereinfacht.

Bei mehrsprachigen Praxiswebsites sollte LCP pro Sprachversion separat gemessen werden. Unterschiedliche Schriftlängen und Bildgrößen können zu abweichenden LCP-Werten führen.

Checkliste: LCP optimieren

• LCP-Element per PageSpeed Insights oder DevTools identifizieren
• LCP-Bild in WebP/AVIF mit responsivem srcset ausliefern
• fetchpriority=“high” und preload für das LCP-Bild setzen
• Lazy Loading für alle Nicht-LCP-Bilder beibehalten
• TTFB unter 800 ms anstreben (CDN, statische Generierung)
• Kritisches CSS inline, Rest asynchron laden
• Webfonts optimieren (font-display: swap, Subsetting)
• Third-Party-Skripte verzögert oder nach Interaktion laden
• LCP nach jeder Änderung im Labormessung und in Felddaten prüfen

Fazit

LCP ist der sichtbarste Performance-Indikator — und auf den meisten Praxiswebsites der leichteste Gewinn. Wer das LCP-Element kennt und gezielt Bilder, Serverantwortzeit und render-blockierende Ressourcen optimiert, verbessert nicht nur eine Kennzahl, sondern den ersten Eindruck bei jedem Website-Besucher. Bei Monoworks identifizieren und optimieren wir das LCP-Element bei jedem Projekt systematisch — damit der Hauptinhalt schnell sichtbar wird, nicht erst nach dem dritten Plugin-Update.