CSS Content Visibility: Rendering-Leistung steigern
Steigerung der Rendering-Leistung durch den Einsatz von CSS Die Rendering-Leistung einer Website spielt eine entscheidende Rolle für die Umwandlung des HTML-Codes in sichtbare Pixel im
Analyse, Beratung und Umsetzung zur Optimierung von Google PageSpeed, Ladezeiten und Web Vitals.
Eine bekannte Studie hat ermittelt, dass eine um lediglich eine Sekunde langsamere Webseite einem Rückgang in der Conversion-Rate von satten 7% entspricht. Für die erfolgreiche Lead-Generierung und für Online-Verkäufe ist eine schnelle Website somit essentiell.
Google hat bereits im Jahr 2010 offiziell bestätigt, dass der PageSpeed Score ein wichtiger Ranking-Faktor ist. Die Top rankenden Seiten haben häufig eine besonders kurze Serverantwortzeit. Seit Juni 2021 werden auch die Core Web Vitals im Google-Ranking bewertet.
Durch eine schnelle Ladezeit erzielt man eine geringe Absprungrate und zufriedene Nutzer, die wiederkehren und wiederholt kaufen. Mit einer umfassenden und effektiven Performance-Optimierung kann man die Absprungrate deutlich reduzieren.
Für eine gute User Experience (UX) ist eine kurze Ladezeit eine wichtige Voraussetzung. UX-Signale werden von Google als wichtiger Ranking-Faktor gewertet. Aufgrund des stetig zunehmenden Nutzungsanteils von Smartphones in Mobilnetzen sollten so wenig Daten wie möglich übertragen werden, um eine gute Performance zu gewährleisten.
Externe Dienste
Tracking, Live-Chats, Einbindung externer Bewertungen, Google Maps Karten, CRM-Formulare und viele andere Third-Party Dienste sorgen oft dafür, dass Webseiten im laufenden Betrieb immer langsamer werden. Meist werden kontinuierlich neue Services eingebunden ohne dabei auf die Ladezeit, die UX und den Google PageSpeed Score der einzelnen Webseiten zu achten.
Unkomprimierte Medien
Insbesondere Bilder in alten und unkomprimierten Bildformaten, die ebenfalls nicht für verschiedene Bildschirmauflösungen angepasst worden sind, stellen eine häufige Ursache für Performance-Probleme dar. Moderne Bildformate, wie WebP oder AVIF verbinden sehr hohe Kompressionsraten mit einer sehr guten Bildqualität.
Nicht optimierte Script-Ressourcen
JavaScript- und CSS-Dateien werden häufig nicht komprimiert und zusammengefasst. Eine Menge Webseiten verfügen über eine Vielzahl solcher Ressourcen. Durch die Kombination und Kompressionen solcher Dateien kann man die Requests häufig enorm senken, was dann wiederum zu einer deutlich geringeren Gesamtladezeit und einer besser User Experience sorgt.
Alte PHP- und HTTP-Version
Insbesondere bei Internetseiten, die bereits seit vielen Jahren online sind sieht man häufig, dass eine veraltete PHP Version (< PHP 8) oder ein altes HTTP-Protokoll (HTTP/1.1) verwendet werden. Durch ein Update dieser technischen Server-Infrastruktur kann eine deutliche Performance-Verbesserung für die Seiten-Besucher erreicht werden.
Fehlendes oder schlecht konfiguriertes Website-Caching
Wenn alle Seiten einer Website immer erst beim Seitenaufruf durch den Nutzer dynamisch erzeugt werden, dann ist die Ladezeit wesentlich länger, als wenn alle Seiten bereits fertig vorgeladen als statische HTML-Version auf dem Server vorliegen. Ein gut konfigurierter Cache sorgt für eine geringe Serverantwortzeit (TTFB / Time To First Byte).
Fehlende Textkomprimierung
Textbasierte Ressourcen (z.B. Web-Dokumente) sollten komprimiert bereitgestellt werden, um die Gesamtanzahl der Bytes zu minimieren. Das ist häufig nicht für alle Ressourcen der Fall. Am leistungsfähigsten ist Brotli. GZIP sollte als Fallback für Brotli verwendet werden. GZIP wird von allen gängigen Browsern unterstützt. Die Textkomprimierung wird in der Konfiguration des Webservers aktiviert.
01
Umfassende Messung der Website-Ladezeiten, Ableitung und Priorisierung von Optimierungsmaßnahmen.
02
Spezifikation der Maßnahmen und Einstellen von Tickets in das Ticketsystem für die umsetzenden Entwickler.
03
Umsetzung der notwendigen Optimierungen durch die Entwickler und Abnahme der Implementierung.
04
Kontinuierliches Monitoring und Reporting der Ladezeit und falls nötig Nachoptimierung der Webseite.
Steigerung der Rendering-Leistung durch den Einsatz von CSS Die Rendering-Leistung einer Website spielt eine entscheidende Rolle für die Umwandlung des HTML-Codes in sichtbare Pixel im
Was versteht man unter Web Performance Monitoring? Beim Web Performance Monitoring wird die Leistung einer Website gemessen und überwacht. Das Monitoring hilft, Leitungsprobleme zu identifizieren
Was ist der Largest Contentful Paint (LCP)? Der LCP ist eine Kennzahl der drei Core Web Vital Metriken. Alle Kennzahlen bewerten die User Experience (UX),
Was ist Cumulative Layout Shift (CLS)? Ein niedriger Cumulative Layout Shift (CLS) ist entscheidend für ein positives Nutzererlebnis. Die Kennzahl CLS bezieht sich auf unerwartete
Optimierung von Google PageSpeed, Core Web Vitals und Ladezeiten für eine höhere Conversionrate: Warum eine schnelle Ladezeit für die Kundenbindung und Umsatzsteigerung unverzichtbar ist. Der
Update 03/2024 Dieser Artikel wurde im März 2024 geupdatet, nachdem die Kennzahl INP nun Teil der Core Web Vitals geworden ist und die Metrik FID
Einen guten Mobile Score erzielt man ab einem Wert von 90/100.
Wie aufwändig die Optimierung der Ladezeiten auf einen solch guten Score ist hängt von vielen Faktoren ab, beispielsweise: Server-Hardware, Anzahl und Medien-Format der Seiten-Elemente (Texte, Bilder, Videos), Anzahl extern eingebundener Scripte und vielem mehr.
Wesentlich wichtiger als die Optimierung des Scores sind die Core Web Vital Nutzerdaten aus dem Google CrUX-Dataset, weil hierbei echte Nutzererfahrungen betrachtet werden. Bei einer Analyse mit Google PageSpeed Insights handelt es sich immer lediglich um eine Einzel-Simulation (synthetische Analyse).
Der Google PageSpeed Score wird fälschlicherweise häufiger mit der Ladezeit gleich gesetzt. Diese wird allerdings in Sekunden gemessen und muss bei der Performance-Optimierung ebenfalls Berücksichtigung finden. Ein hoher Google PageSpeed Score korreliert nicht unbedingt immer mit einer kurzen Ladezeit.
Für die Verbesserung von Website-Performance, Google PageSpeed Score und der Core Web Vitals gibt es viele Optimierungsmaßnamen, die alle sowohl auf kurze Ladezeiten, als auch auf eine bessere Benutzererfahrung mit der jeweiligen Webseite einzahlen.
Die folgende Auflistung stellt lediglich einen Auszug an Verbesserungspotenzialen dar:
Vor der Optimierung ist immer der Status Quo zu ermitteln. Dazu sollte ein Audit erstellt werden, aus dem dann die entsprechenden Todos abgeleitet werden. Eine umfassende Beratung durch eine spezialisierte PageSpeed Agentur fördert immer viele Potenziale zu Tage, die für eine schnelle Webseite empfohlen werden.
Der Aufwand für die Umsetzung der Performance-Optimierung variiert sehr stark, weil dies vom Ausgangszustand des Content Management Systems, den Inhalten (Bilder, Medien, etc.) und vom System selbst abhängt. Das CMS WordPress ist zwar gut optimierbar, doch wird es häufig auch durch den Einsatz vieler Plugins und überladener Themes regelrecht belastet, was die Ladezeitenoptimierung notwendig macht.
Webseiten sollten innerhalb von maximal 3 Sekunden im Web-Browser vollständig geladen sein, um eine optimale Ladezeit zu gewährleisten. Jede Verzögerung über diesem Zeitrahmen hinaus kann zu einem signifikanten Anstieg der Abbruchrate (Bounce Rate) führen und das Nutzererlebnis beeinträchtigen. Studien zeigen, dass Nutzer eine Seite, die länger als 5 Sekunden zum Laden benötigt, häufig frustriert verlassen. Dies hat nicht nur negative Auswirkungen auf die User Experience, sondern kann auch zu Umsatzeinbußen und einer Verringerung der Lead-Generierung führen. Daher ist eine effiziente Ladezeit von entscheidender Bedeutung, um das Engagement der Besucher zu steigern und den Erfolg Ihrer Website zu maximieren.
Der Google PageSpeed Score ist kein Rankingfaktor, die Core Web Vitals (LCP, FID, CLS) schon. Google misst die Core Web Vitals (CWV) durch die Nutzer des Chrome Browsers. Diese von Google ermittelten Felddaten sind für das SEO-Ranking wichtig. Die CWV der letzten 28 Tage fließen als Rankingfaktor in die sogenannte Page Experience in die Google-Wertung mit ein. Neben den CWV sind auch die Mobilfreundlichkeit, Sicherheit und das richtige Handling von Dialogfeldern wichtig.
Zusätzlich steigert eine kurze Ladezeit die Nutzerzufriedenheit, sorgt für mehr Verkäufe und weniger Absprünge. Die Optimierung von Google PageSpeed, Web Vitals und Ladezeiten ist somit sowohl für eine gute User Experience (UX) als auch für die Suchmaschinenoptimierung (SEO) ein sehr wichtiges Thema.
Am Anfang einer Beratung zur Ladezeiten-Optimierung steht immer ein initiales und unverbindliches Erstgespräch. Dadurch können beispielsweise die Projektziele, der Umfang, die Timeline zur Verbesserung der Geschwindigkeit, das Projektbudget sowie die Rollen im Projekt geklärt werden.
Im nächsten Schritt folgt ein umfassendes Audit mit Hilfe diverser Tools zur Ladezeitenoptimierung je Seiten-Template/Seitentyp, um alle Potenziale zur Beschleunigung der Seiten identifizieren zu können. Die Erkenntnisse aus dem Audit werden dann meistens dem technisch Verantwortlichen oder dem Marketing-Team und den zuständigen Entwicklern vorgestellt. Durch den gemeinsamen Austausch können gleich erste Fragen zur Umsetzbarkeit der Maßnahmen geklärt werden.
Einige Verbesserungspotenziale benötigen eine Feinspezifikation. Diese fließt meist entweder in ein (SEO-)Konzept ein oder die Spezifikation erfolgt direkt innerhalb von Tickets zur agilen Umsetzung durch die Web-Entwickler.
Im Ticket-System (häufig Atlassian Jira, Redmine, o.Ä.) können dann vor oder während der Umsetzung Rückfragen von den Entwicklern gestellt werden. Ebenfalls kann der Web Performance Spezialist die erfolgreiche Umsetzung der einzelnen Tickets über das System quittieren.
Damit sich die Performance nach der initialen Optimierung nicht wieder verschlechtert, empfiehlt es sich in jedem Fall ein Web Performance Monitoring System einzusetzen.
Eine Überwachung der Seiten-Leistung sollte mit einem Real User Monitoring (RUM) Tool erfolgen, da dadurch in Echtzeit einzelne Benutzer-Sessions aufgezeichnet werden können. Diese werden dann anonym in Sessions gespeichert, damit die datenschutzrechtlichen Belange eingehalten werden und Nutzer nicht zurückverfolgt werden können. Persönliche Daten werden bei dieser Art von Tracking nicht erhoben.
Google sammelt zur Bewertung der Ladegeschwindigkeit reale Nutzerdaten über den Chrome Browser. Es werden die Metriken LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift) erfasst. Diese Daten werden allerdings aggregiert gespeichert, weshalb das einzelne Nutzererlebnis nicht mehr ausgewertet werden kann (beispielsweise ein einzelner Zugriff aus einem weit entfernten Land und einem mobilen Datennetz).
Die Daten sind für jeden öffentlich zugänglich, werden aber mit einer Verzögerung von 28 Tagen geliefert. Die Nutzererfahrungen sind beispielsweise im Felddaten-Bericht von Google PageSpeed Insights einsehbar, über eine Google-API abrufbar und auch in der Google Search Console zu ersichtlich. Um diese Informationen für die eigene Webseite abrufen zu können, braucht es eine gewisse Anzahl an Zugriffen. Andernfalls stehen entweder gar keine oder nur Daten für den Domain-Ursprung (meist die Startseite) zur Verfügung.
Wenn man also in dem eigenen Monitoring lediglich auf den Chrome User Experience Report (CrUX) setzt, dann kann man erst sehr spät auf eine schlechte Nutzererfahrung reagieren. Dennoch sind die CrUX-Daten wichtig, da sie eine Auswirkung auf den Ranking-Erfolg haben.
Einzelabfragen und Auswertung der Labor-Daten (synthetische Messungen) von Google PageSpeed Insights stellen keine sinnvolle Überwachung der Ladezeit dar. Hierbei handelt es sich um Nutzersimulationen, weshalb diese Art der Messung für Staging-Instanzen und während der Optimierung der Ladezeiten sinnvoll ist, nicht aber im laufenden Betrieb.
Die Optimierung von Website-Ladezeiten kann aufgrund verschiedener komplexer Probleme eine Herausforderung darstellen:
1. Browserkompatibilität: Verschiedene Browser interpretieren und rendern Webseiten unterschiedlich, was zu inkonsistenten Ladezeiten führen kann. Die Optimierung muss auf eine breite Palette von Browsern und Geräten abzielen, um eine konsistente Benutzererfahrung zu gewährleisten.
2. Dynamische Inhalte: Websites mit dynamischen Inhalten, die häufig aktualisiert werden, können Schwierigkeiten bei der Ladezeitoptimierung bereiten. Die Komplexität von Datenbankabfragen, Content-Management-Systemen und serverseitigen Skripten kann die Ladezeiten beeinträchtigen.
3. Drittanbieter-Ressourcen: Die Integration von Drittanbieter-Skripten für Analytics, Werbung, Social-Media-Widgets usw. kann die Ladezeiten negativ beeinflussen, da sie zusätzliche HTTP-Anfragen erzeugen und die Seitenrenderzeit erhöhen können.
4. Ressourcenübertragung: Die Übertragung von Ressourcen wie Bilder, CSS, JavaScript und Schriftarten von Servern zu Benutzergeräten kann je nach Netzwerkgeschwindigkeit, Latenz und Bandbreite unterschiedlich lange dauern, was die Ladezeiten beeinflusst.
5. Serverkonfiguration und Hosting-Infrastruktur: Die Leistung des Servers, auf dem eine Website gehostet wird, sowie die Konfiguration von Serversoftware und Caching-Mechanismen können sich auf die Ladezeiten auswirken. Eine ineffiziente Serverkonfiguration oder eine überlastete Hosting-Infrastruktur kann zu langsamen Ladezeiten führen.
6. Mobile Geräte und Netzwerkbedingungen: Die Optimierung von Ladezeiten für mobile Geräte ist eine besondere Herausforderung, da diese oft über langsamere Netzwerkverbindungen verfügen und weniger Rechenleistung haben als Desktop-Computer. Mobile Websites müssen speziell optimiert werden, um schnell geladen zu werden und eine gute Benutzererfahrung zu bieten.
Die Bewältigung dieser komplexen Probleme erfordert ein umfassendes Verständnis der Webtechnologien, eine sorgfältige Planung und Implementierung von Optimierungsstrategien sowie regelmäßige Überwachung und Anpassung, um die bestmögliche Leistung sicherzustellen.
Verschiedene Branchen können mit langsamen Websites zu kämpfen haben, insbesondere solche, die stark vom Online-Handel oder von der Bereitstellung digitaler Dienste abhängig sind. Einige Branchen, die möglicherweise häufig mit langsamen Websites konfrontiert sind, sind:
1. E-Commerce: Online-Shops und E-Commerce-Websites, insbesondere solche mit umfangreichen Produktkatalogen und vielen Bildern, können unter langsamen Ladezeiten leiden, was zu einem schlechten Einkaufserlebnis führt und potenzielle Kunden abschreckt.
2. Nachrichten und Medien: Websites von Nachrichtenagenturen, Online-Zeitschriften und Medienunternehmen müssen Inhalte in Echtzeit bereitstellen, was zu einer großen Menge an dynamischen Inhalten führen kann, die die Ladezeiten beeinträchtigen können, insbesondere bei starkem Traffic.
3. Reisen und Tourismus: Websites von Reiseveranstaltern, Hotels, Fluggesellschaften und anderen Tourismusunternehmen müssen oft große Mengen an Informationen und Bilder bereitstellen, was zu langsamen Ladezeiten führen kann, insbesondere wenn sie nicht ordnungsgemäß optimiert sind.
4. Gesundheitswesen und Online-Dienste: Websites von Krankenhäusern, Arztpraxen und Online-Gesundheitsdiensten müssen oft sensible Informationen und Dienste in Echtzeit bereitstellen, was zu langsamen Ladezeiten führen kann, wenn sie nicht über ausreichende Serverkapazitäten oder Optimierungen verfügen.
5. Finanzdienstleistungen: Websites von Banken, Versicherungen und anderen Finanzinstituten müssen sicherstellen, dass sensible Transaktionen und Finanzinformationen schnell und sicher geladen werden, um das Vertrauen der Benutzer zu gewinnen und zu erhalten.
In diesen Branchen ist es entscheidend, dass Websites schnell und zuverlässig geladen werden, um die Benutzerzufriedenheit zu erhöhen, die Konversionsraten zu verbessern und das Vertrauen der Kunden zu stärken. Daher ist die Optimierung der Ladezeiten eine wichtige Priorität für Unternehmen in diesen Branchen.
Websites von öffentlichen Einrichtungen dienen oft dazu, Informationen und Dienste für die Öffentlichkeit bereitzustellen, und eine schnelle Ladezeit ist entscheidend, um sicherzustellen, dass Benutzer schnell auf diese Informationen zugreifen können. Hier sind einige Gründe, warum eine schnelle Ladezeit auch für den öffentlichen Sektor wichtig ist:
1. Barrierefreiheit und Inklusion: Eine schnelle Site trägt zur Barrierefreiheit und Inklusion bei, da sie sicherstellt, dass Menschen mit langsamen Internetverbindungen oder älteren Geräten die Website problemlos nutzen können.
2. Zugänglichkeit von Regierungsdiensten: Regierungswebsites bieten oft wichtige Dienste und Informationen für Bürgerinnen und Bürger, wie zum Beispiel die Beantragung von Ausweisen, die Steuererklärung oder die Suche nach öffentlichen Gesundheitsinformationen. Eine schnelle Ladezeit ermöglicht es den Benutzern, schnell und effizient auf diese Dienste zuzugreifen.
3. Transparenz und Bürgerbeteiligung: Öffentliche Websites dienen oft dazu, Transparenz zu fördern und Bürgerinnen und Bürger über Regierungsmaßnahmen, politische Entscheidungen und öffentliche Angelegenheiten zu informieren. Eine schnelle Ladezeit gewährleistet, dass diese Informationen schnell und effektiv verbreitet werden können, was die Bürgerbeteiligung fördern kann.
4. Vertrauen und Glaubwürdigkeit: Eine schnelle Website-Ladezeit trägt dazu bei, das Vertrauen und die Glaubwürdigkeit einer Regierungsorganisation oder einer öffentlichen Einrichtung zu stärken. Langsame Ladezeiten können den Eindruck erwecken, dass die Organisation nicht effizient arbeitet oder nicht über die erforderlichen Ressourcen verfügt, um eine moderne und benutzerfreundliche Website bereitzustellen.
Insgesamt ist eine schnelle Website-Ladezeit auch für öffentliche Websites wichtig, um sicherzustellen, dass sie effektiv die Bedürfnisse der Bürgerinnen und Bürger erfüllen können und eine positive Benutzererfahrung bieten.
Einige Faktoren, die sich negativ auf die Ladezeit auswirken können, sind:
Große Dateigrößen: Unkomprimierte Bilder, Videos und andere Ressourcen können die Ladezeit erheblich verlangsamen.
Zu viele HTTP-Anfragen: Eine Vielzahl von Ressourcen, die von verschiedenen Servern geladen werden müssen, kann zu vielen HTTP-Anfragen führen, was die Ladezeit beeinträchtigt.
Unnötige Skripte und Codes: Übermäßige oder nicht optimierte JavaScript- und CSS-Dateien können die Ladezeit erhöhen.
Serverprobleme: Ein langsamer oder überlasteter Server kann die Reaktionszeit einer Website beeinträchtigen.
Die Ziele einer Pagespeed-Optimierung sind:
Reduzierung der Ladezeit: Das Hauptziel besteht darin, die Zeit zu minimieren, die eine Website benötigt, um vollständig geladen und einsatzbereit zu sein.
Verbesserung der Benutzererfahrung: Durch schnelle Ladezeiten wird die Benutzerzufriedenheit gesteigert, was zu einer höheren Verweildauer und Interaktion auf der Website führt.
SEO-Optimierung: Durch Verbesserungen der Ladezeit können bessere Platzierungen in den Suchergebnissen erreicht werden.
Mobile Optimierung: Sicherstellen, dass die Website auch auf mobilen Geräten schnell geladen wird, um die Bedürfnisse von mobilen Benutzern zu erfüllen.
Es ist ratsam, die Pagespeed-Optimierung von Anfang an in Betracht zu ziehen, besonders wenn eine neue Website entwickelt wird. Allerdings ist es auch nie zu spät, um bestehende Websites zu optimieren, insbesondere wenn die Ladezeiten als langsam wahrgenommen werden oder sich dies auf die Conversions und die Nutzererfahrung auswirkt. Es ist ein fortlaufender Prozess, da sich Technologien weiterentwickeln und Inhalte aktualisiert werden.
Der Aufwand für die Optimierung von Website-Ladezeiten richtet sich nach dem Umfang der zu optimierenden Website (Anzahl untersch. Seiten und Seitentypen), nach dem jeweiligen Optimierungsgrad zu Beginn des Projekts und ebenfalls nach dem gewünschten Ziel-Zustand.
Vor Beginn der Feinspezifikation der Optimierungsmaßnahmen wird eine gut dokumentierte initiale Messung der Website-Ladezeit, des Google PageSpeed Scores und der Core Web Vitals erstellt.
Dadurch kann man während des Optimierungsprozesses und auch am Ende unproblematisch neue Site-Messungen machen und den Erfolg der Maßnahmen transparent aufzeigen.
Es empfiehlt sich, zusätzlich ein Monitoring und Reporting Dashboard aufzusetzen, welches mit automatischen Alerts über den Veränderungsstand der wichtigsten KPI informiert.
Das Performance Monitoring sollte neben synthetischen Tests auch die Endbenutzer-Erfahrung mittels Real User Monitoring (RUM) messen. Ein RUM-Tool misst die reale Nutzererfahrung mit der Webseite, wodurch eine direkte Verbesserung der Conversion Rate erzielt werden kann.
Unabhängig von verwendeten Content Management System (CMS) kann grundsätzlich für alle Websites eine Performance-Optimierung vorgenommen werden. Dies können beispielsweise die gängigen CMS WordPress, Drupal, Adobe Experience Manager, Joomla, Craft oder TYPO3 sein, ebenfalls die führenden eCommerce-Systeme, wie WooCommerce, Shopify oder Magento.
Die wenigsten CMS sind bereits von Haus aus so schnell, als das man die Ladezeit nicht weiter verkürzen könnte.
Beratung und Optimierung innerhalb eines Projekts finden häufig in agilen Scrum Teams statt. Dabei kommen meist Ticketsystemen, wie beispielsweise Atlassian Jira (auch in Verbindung mit Confluence), Redmine, Mantis oder Bugzilla zum Einsatz.
Gerne schule ich auch das umsetzende Entwickler-Team anhand von Praxis-Beispielen zur Optimierungen der betreffenden Website. Ein solches Coaching kann sowohl remote, als auch vor Ort in der DACH-Region durchgeführt werden.
Die typischen Kontaktpersonen in Unternehmen und Agenturen sind Chief Technical Officer (CTO), Produktmanager, Marketingverantwortliche und Marketingmanager, Suchmaschinenoptimierer und Web-Entwickler (insbesondere Frontend-Entwickler).