Core Web Vitals von 37 auf 99 verbessert: Technische Fallstudie eines deutschen Finanzdienstleisters
Für einen deutschen Finanzdienstleister haben wir eine technische Optimierung der Webseite vorgenommen. Dieser hatte mit massiven Performance-Problemen zu kämpfen und verfügte nicht über eine solide technische Infrastruktur. Innerhalb weniger Wochen konnten wir diese deutlich verbessern und den Core Web Vitals Wert von 37 auf 99 steigern.
Kennzahl | Vorher | Nachher |
|---|---|---|
| Lighthouse Performance | 37 | 99 |
| LCP | 5,8s | 1s |
| CLS | 0,48 | 0,00 |
| INP | 540ms | 78ms |
| Mobile Pagespeed | 42 | 99 |
Die Ausgangslage im Detail
Die Website unseres Auftraggebers, den wir aus vertragsrechtlichen Gründen nicht nennen dürfen, hatte zu Beginn unseres Projekts mit deutlichen technischen Problemen zu kämpfen.
Die Server Response Time war zu lang, die Scripts von Third Partys nicht sauber eingebaut und zu große Bild- und JavaScript-Dateien wurden genutzt.
Neben Performance-Problemen in Form von langen Ladezeiten mangelte es auch an der technischen Basis, wie die Core Web Vitals mit einem Wert von 37 zeigten.
Identifizieren konnten wir unter anderem folgende Probleme:
- Schwergewichtige Bilder & JavaScript-Bundles
- Render Blocking
- Fehlende Font-Optimierung
- Laden von nicht verwendetem CSS
- Langsame Server Response Time
- Nicht optimierter Einbau von Third Party Scripts (Tracking)
Analyseprozess: Unser Technical SEO Audit
In unserer technischen Analyse konnten wir mehr als 15 Performance-Problemstellen identifizieren.
Zu diesen gehören sowohl Probleme mit den Bild-Dateien als auch Probleme mit der Verbindung zum Server, der Nutzung von CSS, JavaScript, Fonts und den Skripten von Third-Party-Modulen.
Für die Analyse haben wir Tools wie die PageSpeed Insights von Google, die Search Console und Chrome DevTools verwendet.
Unsere Optimierungsmaßnahmen
Im Technical SEO haben wir mehr als 25 Maßnahmen durchgeführt, mit denen wir eine starke Basis für unseren Kunden errichten konnten. Einige der wichtigsten Maßnahmen mit dem größten Impact stellen wir im Folgenden genauer vor.
Reduzierung des LCP durch Bild- und Medien-Optimierung
Eines der Probleme unseres Kunden lag in großen Hero-Bildern und Medien-Dateien, die nicht optimiert wurden. Dadurch wurden lange Wartezeiten und ein schlechter LCP-Wert (Largest Contentful Paint) verursacht.
Zur Behebung der Probleme haben wir das Format der Bilddateien auf Webp umgestellt, wodurch diese deutlich leichtgewichtiger sind.
Zusätzlich haben wir responsive Images integriert und Lazy Loading für Inhalte außerhalb des für Nutzer sichtbaren Bereichs eingeführt.
Das Gewicht der Bild- und Medien-Dateien konnten wir um mehr als 70 % verringern und den LCP-Wert deutlich verbessern.
Rendering-Blockade durch CSS und JavaScript auflösen
Das Rendering der Seite wurde zum Teil durch CSS- und JavaScript-Dateien blockiert. Wir haben deshalb kritisches CSS inline ausgeliefert und nicht kritisches CSS asynchron geladen. Zusätzlich haben wir ungenutzte CSS- und JavaScript-Ressourcen entfernt.
Durch diese Maßnahmen konnten wir den LCP-Wert weiter verbessern und eine schnellere Darstellung der sichtbaren Inhalte erreichen.
JavaScript Optimierung
Wir konnten eine übermäßige Ausführung von JavaScript feststellen, wodurch die Reaktionszeiten bei Interaktionen mit Nutzern verlängert wurden.
Wir haben unnötige Bibliotheken und Plugins entfernt, das Laden nicht kritischer Skripte verzögert und die Third-Party-Skripte für das Tracking, Marketing und die Analyse optimiert.
Erreichen konnten wir durch diese Maßnahmen einen deutlich besseren INP-Wert (Interaction to next Paint) und wesentlich schnellere Reaktionszeiten.
Fonts-Optimierung
Die Webfonts der Webseite haben zu unschönen Verschiebungen im Layout geführt und die Darstellung von Inhalten verzögert.
Wir haben deshalb auf ein lokales Hosting der Schriftarten umgestellt und das Vorladen kritischer Fonts mittels Preload eingerichtet.
Auf diesem Wege konnten wir die Layout Shifts ausmerzen und den CLS-Wert (Cumulative Layout Shift) verbessern.
Server- und Auslieferung
Durch eine langsame Server Response Time wurde die Ladezeit der gesamten Website erhöht. Wir haben ein mehrstufiges Cache-Konzept eingeführt, um die Auswirkungen einzugrenzen und die Time to First Byte (TTFB) optimiert.
Durch diese Anpassungen konnten wir deutlich schnellere Antworten vom Server erhalten und die Performance über alle Seitentypen hinweg verbessern.
Was war der Business Impact?
Aus Datenschutzgründen können wir keine genauen geschäftlichen Kennzahlen unseres Auftraggebers teilen.
Die Bounce Rate (Absprungrate) wurde im Zuge unserer Maßnahme jedoch um 35 % reduziert. Gleichzeitig konnte die Anzahl der Leads um 15 % gesteigert werden.
Unser Framework im Überblick
Unsere Optimierungen im SEO für Finanzdienstleister basieren auf einem klaren Framework, welches wir hier übersichtlich aufgeführt haben:
- Audit: In einer ersten Analyse wird der Ist-Zustand der Website ermittelt und das Potenzial für Verbesserungen identifiziert.
- Priorisierung: Die Maßnahmen werden nach ihrem Impact priorisiert, wobei der stärkste Impact die höchste Priorität besitzt.
- Umsetzung: In dieser Phase werden die Maßnahmen umgesetzt, weshalb es sich um die umfangreichste Phase handelt.
- Monitoring: In einem Monitoring werden die Ergebnisse laufend überwacht, da Anpassungen notwendig sein können.
- Optimierung: Um ein hohes technisches Niveau zu halten, werden laufend Optimierungen der Infrastruktur, Sicherheits-Updates und Performance-Updates durchgeführt.
Fazit: Technisch starke Basis unerlässlich
Eine solide technische Infrastruktur bildet die Basis für starke Rankings, zufriedene Besucher, eine hohe Sichtbarkeit und viele Leads.
In diesem Fall ergab sich der größte Performance-Gewinn nicht durch die einzelnen Maßnahmen an sich, sondern die Kombination effektiver Optimierungen.
Mit diesen wurden sowohl die Verbindung zum Server, die Priorisierung der Ressourcen und die möglichen Abhängigkeiten optimiert, was zu einer technisch deutlich robusteren Website unseres Kunden führte.