--- title: Eine Core Web Vital-Anleitung für TYPO3-Benutzer url: "https://b13.com/de/wissen/eine-core-web-vital-anleitung-fuer-typo3-benutzer" description: Die Core Web Vitals sind die wichtigsten Metriken, um festzustellen, ob eine Webseite schnell und ohne Unterbrechungen auf Benutzerinteraktionen reagiert. TYPO3-Administratoren und Entwickler müssen wissen, wie diese Metriken funktionieren. image: "https://b13.com/fileadmin/_processed_/2/c/csm_CoreWebVitals_Sharing_e99bb7a5d4.png" date: 2024-01-24 modified: 2026-08-19 lastUpdated: 2026-09-10 keywords: - "SEO-Optimierung Core Web Vitals Performance der Website Webseiten-Metriken Website Ladezeit" --- # Eine Core Web Vital-Anleitung für TYPO3-Benutzer [ Performance ](https://b13.com/de/wissen/performance) [ SEO ](https://b13.com/de/wissen/seo) [ TYPO3 ](https://b13.com/de/wissen/typo3) Eine Core Web Vital-Anleitung für TYPO3-Benutzer ================================================== ![](https://b13.com/fileadmin/_processed_/c/0/csm_franzi_36ad8d099a.jpg)Franzi Töpler 16. Februar 2024 [ RSS Feed ](https://b13.com/de/rss.xml) ![Ein türkisfarbener Laptop zeigt eine gelbe Herzschlaglinie über den Bildschirm, mit abstrakten Grafiken im Hintergrund, die auf Datenanalyse oder Überwachung hindeuten.](https://b13.com/fileadmin/_processed_/0/8/csm_CoreWebVitals_Headerbild_c1447bd58c.webp) In der heutigen Welt der digitalen Inhalte lieben die Suchmaschinen schnelle Websites, und langsame Websites verlieren Besucher. Um die Frage „Ist meine Website schnell genug?“ zu beantworten, muss man die Begriffe „schnell“ und „ausreichend“ definieren. Eine gute Faustregel ist der Doherty-Schwellenwert: ===================================================== > Die Produktivität steigt, wenn ein Computer und seine Benutzer in einem Tempo (<400ms) interagieren, das sicherstellt, dass keiner auf den anderen warten muss. J. Doherty und Ahrvind J. Thadani Diese [Schwelle](https://lawsofux.com/doherty-threshold/) geht auf Walter J. Doherty und Ahrvind J. Thadani von IBM zurück, die erkannten, dass die Rechenzeit Auswirkungen auf das Geschäft hat. (Mehr dazu erfährst Du in dieser Neuauflage ihres Papiers [The Economic Value of Rapid Response Time](https://jlelliotton.blogspot.com/p/the-economic-value-of-rapid-response.html)). Eine effiziente Leistung deiner Website ist eine wirtschaftliche Voraussetzung, denn eine [langsame Website bedeutet für dich Geschäftseinbußen](https://b13.com/de/wissen/warum-ist-die-performance-einer-webseite-wichtig). Die Anzeige einer Webseite in einem Browser erfordert einen komplexen Rendering-Prozess. Jeder Engpass in dieser Lieferkette kann die Leistung stark beeinträchtigen. Um eine schnelle Bereitstellung von Inhalten zu gewährleisten, müssen Webentwickler viele bewegliche Teile optimieren. Aber welche? Ein sorgfältig ausgearbeiteter Satz von Webseitenmetriken kann helfen, sie zu identifizieren. In dieser Einführung befassen wir uns mit drei grundlegenden Metriken für die Webseitenleistung. Du wirst erfahren, was die drei Core Web Vitals sind, welche Aspekte sie messen und welche Ergebnisse du anstreben solltest. Dann werden wir uns ansehen, wie man diese Kennzahlen mit TYPO3 verbessern kann und wie man sie überwacht, um eine hohe Seitenleistung zu erhalten. Was sind Core Web Vitals? --------------------------- Die Web Vitals-Initiative von Google ist ein standardisierter Satz von Metriken, die Entwicklern helfen sollen zu verstehen, wie Nutzer eine Webseite erleben. Im Mai 2020 hat Google drei dieser Kennzahlen definiert, um Entwicklern zu helfen, sich auf die wichtigsten Kennzahlen für die Bewertung der Website-Leistung zu konzentrieren — diese werden Core Web Vitals genannt. Google legt die Core Web Vitals-Metriken und ihre zugehörigen Schwellenwerte als Largest Contentful Paint (LCS), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) fest. Diese beziehen sich auf Verzögerungen beim Laden der Seite und bei der Benutzerinteraktion sowie auf die visuelle Stabilität. Sehen wir uns jeden dieser Punkte im Detail an. LCP: Largest Contentful Paint (Ladeleistung) ---------------------------------------------- Die meisten Benutzer betrachten eine Seite als gebrauchsfertig, wenn fast der gesamte Inhalt auf dem Bildschirm gerendert ist. Daher misst die LCP-Metrik ([Largest Contentful Paint](https://web.dev/articles/lcp)) die Zeit vom Beginn des Ladevorgangs der Seite bis zum Abschluss des Renderings des größten Blocks (egal ob es sich um einen Textblock oder ein Bild handelt), der innerhalb des aktuellen Viewports sichtbar ist. Diese Metrik ist viel genauer als die einfache Messung der Zeit, die die Seite zum vollständigen Laden benötigt. Eine vollständig geladene Seite umfasst die Teile einer Seite, die sich entweder außerhalb des Ansichtsfensters befinden, sowie Teile, die nicht zum sichtbaren Inhalt beitragen, wie z. B. Skripte, die für eine spätere Interaktion benötigt werden. LCP ignoriert diese Teile. Welchen LCP-Zielwert sollten Websites anstreben? Google schlägt vor, drei Kategorien für die Bewertung von LCP zu verwenden: - Ein guter LCP-Wert ist 2,5 Sekunden oder weniger - Eine LCP zwischen 2,5 und 4,0 Sekunden wird als „verbesserungsbedürftig“ eingestuft. - Alles, was über 4,0 Sekunden hinausgeht, wird als „schlecht“ eingestuft. INP: Interaction to Next Paint (Reaktionsfähigkeit) ----------------------------------------------------- Nachdem eine Seite geladen wurde, erwarten die Nutzer schnelle Reaktionen bei der Interaktion mit dieser Seite. Darum geht es bei der Metrik „Interaktion bis zum nächsten Bild“ (INP). INP erfasst die Reaktionszeiten auf Benutzerinteraktionen (Mausklicks, Berührungen des Touchscreens und Tastenanschläge), während eine Seite geöffnet ist. Sie berichtet die längste dieser Reaktionszeiten und versucht, Ausreißer zu ignorieren. INP ist der Nachfolger von [First Input Delay](https://web.dev/articles/optimize-inp) (FID). Dies gilt ab März 2024. FID misst die Zeit zwischen der ersten Interaktion eines Nutzers mit einer Seite und dem Zeitpunkt, an dem der Browser tatsächlich mit der Verarbeitung dieses Ereignisses beginnt. INP hingegen erfasst alle Interaktionen auf einer Seite und ist daher ein zuverlässigerer Indikator für die allgemeine Reaktionsfähigkeit. Die idealen INP-Werte liegen im selben Bereich wie der Doherty-Schwellenwert (gemessen in 100 Millisekunden): - Ein INP unter 200 ms ist gut - Ein INP zwischen 200 ms und 500 ms ist verbesserungsbedürftig. - Ein INP über 500 ms wird als schlecht angesehen. CLS: Cumulative Layout Shift (optische Stabilität) ---------------------------------------------------- Wenn Du schon einmal versucht hast, auf eine Schaltfläche zu klicken und dann versehentlich auf eine benachbarte Schaltfläche geklickt hast, weil der Seiteninhalt plötzlich nach oben oder unten verschoben wurde, weißt Du, was [Cumulative Layout Shift](https://web.dev/articles/cls) (CLS) ist und wie ärgerlich das sein kann. Die CLS-Metrik misst Layoutverschiebungen, indem sie sichtbare Elemente betrachtet, die während des Ladens der Seite unerwartet ihre Position ändern. Die Metrik berechnet dann eine Punktzahl, die darauf basiert, wie stark sich diese Elemente verschieben und welchen Teil des Ansichtsfensters die Verschiebung betrifft. Dieser Wert sollte so nahe wie möglich bei Null liegen: - Ein CLS-Wert unter 0,1 ist gut. - Ein CLS zwischen 0,1 und 0,25 muss verbessert werden. - Alles, was darüber liegt, gilt als schlecht. Tipp: Der [Layout Shift GIF Generator](https://defaced.dev/tools/layout-shift-gif-generator/) ist ein kostenloses und quelloffenes Tool, das Layoutverschiebungen in ein animiertes GIF für eine schnelle Bewertung umwandelt. Warum sind die Core Web Vitals wichtig? ----------------------------------------- Die drei Core Web Vitals messen sehr spezifische und recht technische Aspekte der Lebensdauer einer Seite. Was macht diese drei Metriken so besonders? Warum sollten UX-Designer und Webentwickler genau diese Kennzahlen für die Bewertung der Webseitenleistung verwenden? Die Core Web Vitals von Google sind eine Möglichkeit, Schlüsselaspekte des Nutzererlebnisses zu quantifizieren. Ein Aspekt ist das „[Seitenerlebnis](https://developers.google.com/search/blog/2020/05/evaluating-page-experience)„, das sich darauf bezieht, “wie Nutzer die Interaktion mit einer Webseite wahrnehmen„. Google hat herausgefunden, dass diese drei Kernmetriken fast den gesamten Unterschied bei der Messung der Nutzererfahrung einer Seite ausmachen. Wenn Du eine Seite dahingehend verbesserst, dass diese drei Metriken gut bewertet werden, wirst Du wahrscheinlich ein erhöhtes Nutzerengagement, eine verbesserte Nutzererfahrung und -zufriedenheit und letztendlich einen positiven Einfluss auf die Konversionsraten und den Umsatz beobachten können. Ein weiterer zu berücksichtigender Faktor ist das Google-Suchranking. Wenn die Core Web Vitals einer Seite die von Google festgelegten Schwellenwerte erfüllen, erhält die Seite wahrscheinlich bessere Platzierungen. Zusammenfassend lässt sich sagen, dass eine Seite mit hohen Core Web Vitals mehr Besucher anzieht und sie dazu bringt, länger auf der Seite zu bleiben. Dies sind zwei gute Gründe, sich diese Metriken genauer anzusehen und zu überlegen, wie man eine TYPO3-Website so optimieren kann, dass sie bei allen drei Core Web Vitals Spitzenwerte erzielt. Wie man Core Web Vitals in TYPO3 optimieren kann -------------------------------------------------- Was können Designer, Entwickler und Administratoren einer TYPO3-Website tun, um die Core Web Vitals in die Höhe zu treiben? Hier sind einige Tipps und Quick Wins. TYPO3-Funktionen, die bei der Optimierung der Core Web Vitals helfen -------------------------------------------------------------------- TYPO3 verfügt über praktische, integrierte Funktionen, die zu einer besseren Platzierung in diesen Metriken beitragen können: Caching, Unterstützung für Lazy Loading und asynchrones Laden von JavaScript. ### Caching Optimales Caching ist ein großer Schritt zu hohen Core Web Vitals-Werten. TYPO3 verfügt über [mehrere Caching-Strategien](https://b13.com/blog/caching-in-typo3-part-1-frontend-caches) und wählt je nach Anwendungsfall (statische, halbstatische oder dynamische Seiten) die beste aus. Die einfache Regel lautet jedoch: Je cache-freundlicher Ihr Seitendesign ist, desto besser können die Seiten ranken. ### Langsames Laden von Bildern Bestimmte Elementtypen, vor allem Bilder, können nach dem Rendering des Hauptinhalts nachgeladen werden. TYPO3 unterstützt das „Lazy Loading“ von Bildern standardmäßig für alle Inhalte im Fluid-Stil. Wenn Sie benutzerdefinierte Fluid-Vorlagen verwenden, stellen Sie sicher, dass Ihre Vorlagen das Attribut „loading“ wie folgt verwenden: `` ### Automatische Bildoptimierung Die Bildgröße kann die Ladeleistung einer Seite erheblich beeinträchtigen. Bilder, die einer Seite unbearbeitet hinzugefügt werden, sind oft zu groß und mit einem niedrigen Kompressionsverhältnis komprimiert. Erweiterungen wie [b13/picture](https://github.com/b13/picture) wandeln Bilder in das von Ihnen benötigte Format um. ### Oft vernachlässigt: Aufräumen von ungenutztem Code Bei jedem Webprojekt besteht die Gefahr, dass sich Skripte und CSS-Konfigurationen ansammeln, die nicht mehr verwendet werden. Dennoch gibt der Webserver diese Artefakte an die Browser weiter, wo sie die Leistungsmetriken beeinträchtigen. Tools wie PageSpeed Insights zeigen an, ob es alten, ungenutzten Code gibt, den man loswerden muss. Wie man Core Web Vitals und die Gesamtleistung der Website überwacht -------------------------------------------------------------------- Bevor Du mit der Optimierung Ihrer Website beginnen kannst, musst Du zunächst Core Web Vital-Metriken sammeln. Glücklicherweise sind Tools wie Lighthouse in die Browserkonsole integriert (bei Chromium-basierten Browsern) oder als Erweiterung verfügbar, sodass Du sofort mit der Messung beginnen kannst. Und nachdem Du Deinen Code optimiert hast, wirst Du wahrscheinlich regelmäßige Messungen durchführen wollen, um sicherzustellen, dass sich die Metriken nicht verschlechtern. Wenn Du suboptimale Core Web Vitals-Messungen hast, aber nicht sicher bist, wo Du mit der Suche nach den Schuldigen beginnen sollst, kannst Du einen allgemeinen Leistungstest mit [Blackfire](https://b13.com/blog/why-we-use-blackfire-to-speed-up-typo3-websites) durchführen, um die Leistungsengpässe auf PHP-Ebene zu identifizieren. Von dort aus kannst Du Dich durch die Behebung der langsamsten Teile arbeiten, bis die gewünschte Leistung erreicht ist. Wichtigste Erkenntnis: Die Verbesserung von nur drei Messgrößen kann einen großen Unterschied ausmachen --------------------------------------------------------------------------------------------------------- Core Web Vitals sind der Herzschlag der Benutzerfreundlichkeit. Sie signalisieren Probleme wie langsame Ladezeiten, schleppende Interaktion oder ruckelnde Layouts, die die Besucher abschrecken. Die gute Nachricht ist, dass Core Web Vitals messbar und kontrollierbar sind. Der erste Schritt besteht darin, die Elemente zu identifizieren, die eine niedrige Punktzahl verursachen. Dann können Designer, Entwickler und Website-Administratoren gezielte Optimierungen vornehmen, um die Benutzerfreundlichkeit zu verbessern. Wenn Du Deine Core Web Vitals vernachlässigst, verlierst Du Umsätze und Kunden. Ergreifst Du Maßnahmen zur Optimierung dieser Metriken und schaffst ein reibungsloses Website-Erlebnis für Deine Besucher. Brauchst du Hilfe, um schnelle Erfolge bei der Website-Optimierung zu erzielen, oder möchtest du eine umfassende Leistungsanalyse? [ Get in touch. ](https://b13.com/de/kontakt) ### Geschrieben von: ![Frau mit hellbraunen Haaren, die einen grauen Schal und ein schwarzes Oberteil trägt, steht in einer modernen Innenumgebung.](https://b13.com/fileadmin/_processed_/c/0/csm_franzi_5db953f9d7.webp) Als Projektmanagerin bei b13 betreut Franzi die Projekte von Anfang bis Ende. Durch Zusammenarbeit, Kommunikation und ein genaues Auge auf Fristen und Details hilft sie ihren Teamkollegen, an einem Strang zu ziehen, um die Projekte über die Ziellinie zu bringen. Alles allerdings erst, wenn sie ihren Kaffee getrunken hat. Franzi Töpler Consulting [ mehr von Franzi Töpler ](https://b13.com/de/team/franziska-toepler) Ähnliche Artikel ------------------ - ![Cartoon-Trophäenfigur umgeben von Händen, die Daumen hoch und ein Herzzeichen geben, vor einem Hintergrund mit Zahnradmuster.](https://b13.com/fileadmin/_processed_/f/7/csm_T3ppy_Design_Kit_Headerbild_b51eb9dc31.webp) ### T3ppy gibt TYPO3 ein freundliches Gesicht 06. August 2026 | Florian “Flix” Keitgen TYPO3 ist leistungsstark — muss sich aber nicht unpersönlich anfühlen. Das ist T3ppy, unser freundlicher Begleiter fürs Backend. [ weiterlesen: T3ppy gibt TYPO3 ein freundliches Gesicht ](https://b13.com/de/wissen/t3ppy-design-kit) - ![Hammer mit der Aufschrift 'KI' auf einem schaltkreis-musternden Hintergrund mit gelben Sternen, der Regulierung oder Gesetzgebung im Zusammenhang mit künstlicher Intelligenz in der EU symbolisiert.](https://b13.com/fileadmin/_processed_/1/0/csm_EUAIAct_Headerbild_510724b3de.webp) ### KI-Inhalte in TYPO3: Transparenz braucht Verantwortung 02. August 2026 | Benni Mack Der EU AI Act rückt die Herkunft KI-generierter Inhalte in den Fokus. AI Label kennzeichnet KI-generierte und KI-bearbeitete Inhalte in TYPO3 und dokumentiert, wer den… [ weiterlesen: KI-Inhalte in TYPO3: Transparenz braucht Verantwortung ](https://b13.com/de/wissen/ai-content-in-typo3-labelling-needs-accountability) - ![Eine Reihe stilisierter Figuren in verschiedenen Posen, jede mit einem markanten orangefarbenen Hut, zeigt einen Übergang vom Gehen zum Stillstehen, während sie auf ein Handy schauen, vor einem lila Gitterhintergrund.](https://b13.com/fileadmin/_processed_/d/7/csm_QueuesDDEV_Headerbild_f640931350.webp) ### Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein 10. April 2024 | Jochen Roth Wenn integrierte Nachrichtentransporte an ihre Grenzen stoßen, kann RabbitMQ TYPO3 mit einer skalierbaren, robusten Message Queue versorgen. [ weiterlesen: Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein ](https://b13.com/de/wissen/bessere-skalierbarkeit-mit-entkoppelten-queues-so-richtest-du-rabbitmq-mit-typo3-ein) - ![Eine Cartoonfigur, die einem Schild ähnelt, gibt ein Daumen hoch vor einer Computeroberfläche mit verschiedenen Menüoptionen.](https://b13.com/fileadmin/_processed_/e/6/csm_Header_cda1f80173.webp) ### Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3 01. April 2026 | Florian “Flix” Keitgen Entdecke T3ppy und AiM — Deine KI-Assistenz im TYPO3 Backend für bessere Inhalte, klare Strukturen und volle Kontrolle über Redaktions-Prozesse. [ weiterlesen: Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3 ](https://b13.com/de/wissen/gestatten-t3ppy-ein-neues-zeitalter-fuer-die-redaktionsarbeit-in-typo3) - ![Retro-Mikrofon-Illustration mit einem Einkaufswagen-Symbol im Hintergrund, das E-Commerce oder Online-Shopping symbolisiert.](https://b13.com/fileadmin/_processed_/f/8/csm_Marketplace_Headerbild_ee1575614c.webp) ### Warum TYPO3 einen Marketplace für Produkte braucht 25. März 2026 | Florian “Flix” Keitgen Ein Marketplace würde TYPO3-Produkte sichtbarer machen, den Vergleich erleichtern und Agenturen sowie Kunden gleichermaßen profitieren lassen. [ weiterlesen: Warum TYPO3 einen Marketplace für Produkte braucht ](https://b13.com/de/wissen/warum-typo3-einen-marketplace-fuer-produkte-braucht) - ![Eine Hand hält eine Lupe über den Laptop-Bildschirm, der eine Webseite mit einem Bild und Textelementen anzeigt.](https://b13.com/fileadmin/_processed_/e/5/csm_BackendUserSection_Headerbild_6093c842fd.webp) ### Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) 05. März 2026 | David Steeb Entdecke den oft unterschätzten Doktype 6 (Backend User Section) in TYPO3 für sichere interne Vorschauen, Redaktionstrainings und Prototyping. Erfahre praxisnahe Anwendungsfälle,… [ weiterlesen: Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) ](https://b13.com/de/wissen/ein-echter-geheimtipp-in-typo3-die-backend-user-section-doktype-6) - ![Zwei stilisierte Webseiten-Designs mit einem Benutzerprofil, Platzhaltern für Bilder und Textabschnitten, vor einem hellblauen Hintergrund.](https://b13.com/fileadmin/_processed_/2/0/csm_BackendPreview_Headerbild_b4c5799cfa.webp) ### Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben 09. Februar 2026 | David Steeb EXT:backendpreviews sorgt für konsistente Content-Previews im TYPO3-Backend mit Fluid Templates, Layouts und Partials. [ weiterlesen: Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben ](https://b13.com/de/wissen/backend-content-previews-mit-system-warum-wir-extbackendpreviews-entwickelt-haben) - ![Eine menschliche Hand schüttelt eine Roboterhand vor einem lila Hintergrund mit Herzmustern, was die Zusammenarbeit zwischen Menschen und Technologie symbolisiert.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown 28. Januar 2026 | Benni Mack Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems. [ weiterlesen: Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown ](https://b13.com/de/wissen/das-internet-ist-nicht-mehr-nur-fuer-menschen-ki-bots-lieben-markdown) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Grafik mit stilisierten Darstellungen eines Turms, in dessen Mitte der Text "T3CON25 Düsseldorf" deutlich sichtbar ist.](https://b13.com/fileadmin/_processed_/7/b/csm_T3CON2025_Headerbild_fc9c5cc53e.webp) ### T3CON25 — der Zukunft des Content Managements einen Schritt näher 10. Dezember 2025 | Franzi Töpler Die T3CON25 zeigte die Zukunft von TYPO3 mit Einblicken in TYPO3 v14, KI, digitale Souveränität und Open-Source-Lösungen für moderne, sichere Webauftritte. [ weiterlesen: T3CON25 — der Zukunft des Content Managements einen Schritt näher ](https://b13.com/de/wissen/t3con25-der-zukunft-des-content-managements-einen-schritt-naeher)