Kategorien

Website-Geschwindigkeit optimieren: Core Web Vitals und WordPress-Praxis

Leitfaden

Kurzfassung: Eine schnelle Website entsteht nicht durch ein einzelnes Cache-Plugin. Zuerst werden reale Nutzerdaten und Labortests ausgewertet. Danach optimierst du gezielt das größte sichtbare Element, Interaktionen, Layout-Stabilität, Bilder, Schriften, JavaScript und den WordPress-Unterbau.

Website-Geschwindigkeit beeinflusst Nutzererlebnis, Conversion und technische SEO. Google nutzt Core Web Vitals als Teil seiner Systeme, betont aber zugleich: Ein perfekter Messwert garantiert kein Top-Ranking. Relevanz und hilfreicher Inhalt bleiben entscheidend.

In diesem Beitrag

Die aktuellen Core Web Vitals

Die Google-Dokumentation bewertet drei zentrale Kennzahlen. Als „gut“ gelten sie am 75. Perzentil der Seitenaufrufe – getrennt nach Mobilgeräten und Desktop:

  • LCP (Largest Contentful Paint): Das größte sichtbare Inhaltselement sollte innerhalb von 2,5 Sekunden erscheinen.
  • INP (Interaction to Next Paint): Interaktionen sollten in weniger als 200 Millisekunden visuell beantwortet werden.
  • CLS (Cumulative Layout Shift): Unerwartete Layout-Verschiebungen sollten unter 0,1 bleiben.

Die Messwerte beschreiben reale Nutzererfahrung: Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität. Sie sind nützlicher als eine pauschale Aussage wie „die Seite lädt in zwei Sekunden“, weil verschiedene Geräte, Netzwerke und Seitentypen berücksichtigt werden.

Felddaten und Labordaten richtig unterscheiden

Felddaten stammen von echten Chrome-Nutzern über einen Zeitraum. Sie zeigen, wie die Website unter realen Bedingungen funktioniert, benötigen aber genügend Daten. Du findest sie zum Beispiel im Core-Web-Vitals-Bericht der Google Search Console und – sofern vorhanden – in PageSpeed Insights.

Labordaten entstehen in einer kontrollierten Simulation, etwa mit Lighthouse. Sie reagieren sofort auf Änderungen und helfen bei der Fehlersuche. Ein einzelner Testlauf ist aber keine vollständige Aussage über alle Nutzer.

Mein Vorgehen: zuerst problematische Seitentypen in Felddaten identifizieren, dann repräsentative URLs mehrfach im Labor testen und anschließend die Ursache im Wasserfall, Performance-Profil und DOM untersuchen.

LCP verbessern: Das größte Element früher anzeigen

Bei vielen Unternehmenswebsites ist das LCP-Element ein Hero-Bild, eine große Überschrift oder ein Banner. Häufige Ursachen für einen langsamen LCP sind ein träger Server, zu große Bilder, blockierende Schriften und Styles oder ein Hero, der erst per JavaScript aufgebaut wird.

  • Hero-Bild in passender Pixelgröße ausliefern und effizient als WebP oder AVIF komprimieren
  • das LCP-Bild nicht lazy laden und bei Bedarf gezielt priorisieren
  • Serverantwort durch gutes Hosting, Seiten-Cache und aktuelle PHP-Version verbessern
  • kritische Styles früh bereitstellen und unnötige Ressourcen im Kopf reduzieren
  • Webfonts begrenzen, lokal sinnvoll einbinden und sichtbaren Text nicht auf Font-Downloads warten lassen
  • Slider und Hintergrundvideos im ersten Viewport kritisch hinterfragen

Wichtig: Das größte Bild einfach stärker zu komprimieren reicht nicht, wenn es erst spät entdeckt oder von mehreren Render-Schritten blockiert wird.

INP verbessern: Interaktionen schneller beantworten

Ein schlechter INP entsteht oft, wenn der Browser lange JavaScript-Aufgaben abarbeitet und Klicks oder Eingaben warten müssen. Besonders auffällig sind umfangreiche Drittanbieter-Skripte, große Menüs, Filter, Chat-Tools, Tracking und Builder-Widgets.

  • nicht benötigte Skripte und Widgets entfernen
  • JavaScript nur dort laden, wo die Funktion gebraucht wird
  • lange Aufgaben aufteilen und rechenintensive Arbeit reduzieren
  • Event-Handler und DOM-Änderungen bei Klicks vereinfachen
  • Drittanbieter nach echtem geschäftlichem Nutzen priorisieren
  • Interaktionen auf schwächeren Mobilgeräten testen

Consent und Datenschutz dürfen dabei nicht umgangen werden. Performance-Optimierung bedeutet, benötigte Dienste sauber und sparsam zu laden – nicht Einwilligungen technisch auszuhebeln.

CLS reduzieren: Layout stabil halten

Layout-Verschiebungen entstehen, wenn Bilder, Banner, Fonts oder Formulare nachträglich Platz beanspruchen. Das wirkt unruhig und kann dazu führen, dass Nutzer versehentlich auf das falsche Element tippen.

  • für Bilder und Videos Breite und Höhe beziehungsweise ein Seitenverhältnis reservieren
  • Cookie-Banner und Hinweise so einbauen, dass sie Inhalte nicht unerwartet verschieben
  • Schriftwechsel und nachgeladene Icons testen
  • dynamische Bereiche mit einer passenden Mindesthöhe versehen
  • Animationen bevorzugt über transform und opacity statt layoutverändernde Eigenschaften umsetzen

WordPress schneller machen: die größten Hebel

1. Hosting, PHP und Cache

Ein Seiten-Cache spart wiederholte PHP- und Datenbankarbeit. Bei dynamischen Projekten können zusätzlich Objekt-Cache und gezielte Cache-Ausnahmen sinnvoll sein. Grundlage bleiben ein passendes Hosting, aktuelle Software und messbare Serverantwortzeiten.

2. Bilder richtig ausliefern

WordPress erzeugt verschiedene Bildgrößen. Theme und Builder müssen diese aber korrekt verwenden. Entscheidend sind passende Abmessungen, responsive srcset-Ausgabe, moderne Formate und sinnvolles Lazy Loading. Das sichtbare Hero-Bild ist meist eine Ausnahme vom Lazy Loading.

3. Plugins und Drittanbieter prüfen

Nicht die Anzahl allein entscheidet. Ein einzelnes Plugin kann auf jeder Seite große Skripte oder Datenbankabfragen laden, während mehrere kleine Plugins unauffällig bleiben. Deshalb messe ich Ressourcen und Laufzeit, bevor etwas entfernt oder ersetzt wird.

4. CSS und JavaScript gezielt laden

Pauschal alle Dateien zusammenzufassen ist unter modernen HTTP-Versionen nicht automatisch schneller. Wichtiger sind Dateigröße, Ausführungszeit, Cachebarkeit und die Frage, ob eine Ressource auf der jeweiligen Seite überhaupt gebraucht wird.

5. Datenbank und Hintergrundprozesse

Revisionen, abgelaufene Transients oder fehlerhafte Cronjobs können große Installationen belasten. Eine Datenbankbereinigung sollte jedoch gezielt und mit Backup erfolgen. Bei einer normalen Unternehmenswebsite liegt der Engpass oft eher bei Bildern, Skripten oder Hosting.

Elementor gezielt optimieren

Bei Elementor lohnt sich ein Blick auf verschachtelte Container, globale Widgets, Animationen und Add-ons. Weniger DOM-Elemente und wiederverwendbare Styles helfen, aber ein Builder-Update macht eine Seite nicht automatisch schnell. Der neue Aufbau des Elementor Atomic Builders kann langfristig schlankere Komponenten ermöglichen; reale Vorteile müssen dennoch pro Website gemessen werden.

Bei bestehenden Seiten optimiere ich zuerst den messbaren Engpass. Ein kompletter Neuaufbau ist nur sinnvoll, wenn Struktur und technische Altlasten die Weiterentwicklung dauerhaft blockieren.

Häufige Fehler bei der Pagespeed-Optimierung

  • Nur den Lighthouse-Score verfolgen: Eine 100 ist kein Geschäfts- oder Rankingziel.
  • Hero-Bilder lazy laden: Das kann den LCP verschlechtern.
  • Alle Dateien blind kombinieren: Das kann Caching und gezieltes Laden verschlechtern.
  • Funktionen ohne Prüfung entfernen: Eine schnelle Seite, die schlechter konvertiert, ist kein Erfolg.
  • Nur die Startseite testen: Leistungs-, Blog-, Formular- und Shopseiten können andere Engpässe haben.
  • Optimierungsplugins stapeln: Überlappende Caches und Minifier verursachen häufig Fehler und schwer nachvollziehbare Ergebnisse.

Praktische Reihenfolge für die Optimierung

  • Core-Web-Vitals-Bericht und wichtige Seitentypen prüfen
  • mehrere mobile Labortests durchführen
  • LCP-Element, lange JavaScript-Aufgaben und Layout-Shifts identifizieren
  • größten Engpass zuerst beheben
  • Änderung technisch und visuell testen
  • Cache leeren und Deployment dokumentieren
  • Felddaten über die folgenden Wochen beobachten

Wenn ohnehin ein Relaunch ansteht, hilft zusätzlich meine SEO-Checkliste für den Website-Relaunch. So werden Performance, Weiterleitungen und Indexierung gemeinsam betrachtet.

Häufige Fragen zur Website-Geschwindigkeit

Welcher PageSpeed-Score ist gut?

Es gibt keinen universellen Zielwert für jedes Projekt. Nutze den Score als Diagnosehilfe und konzentriere dich auf reale Core Web Vitals, stabile Funktionen und die wichtigsten Nutzerwege.

Wie schnell wirken Änderungen in der Search Console?

Labortests reagieren sofort. Felddaten basieren auf einem rollierenden Zeitraum und benötigen deshalb Geduld sowie ausreichend reale Aufrufe.

Reicht ein Cache-Plugin?

Ein Cache kann die Serverantwort stark verbessern, löst aber keine zu großen Hero-Bilder, langen JavaScript-Aufgaben oder Layout-Verschiebungen. Gute Ergebnisse entstehen aus mehreren gezielten Maßnahmen.

Muss ich für gute Werte auf Elementor verzichten?

Nein. Elementor-Websites können gute Werte erreichen, wenn Layout, Medien, Fonts, Add-ons und Hosting sauber umgesetzt sind. Bei überladenen Altbauten kann eine strukturelle Überarbeitung dennoch wirtschaftlicher sein.

WordPress-Performance mit Plan verbessern

Ich analysiere nicht nur einen Score, sondern die Ursache auf den wichtigsten Seiten. Danach erhältst du priorisierte Maßnahmen – von schnellen Korrekturen bis zur technischen Überarbeitung einer bestehenden WordPress-Website.

Timo Wirkner, Webdesigner aus Gütersloh
Timo Wirkner

Hallo! Lass uns reden.

Du hast Fragen? Ich nehme mir gerne Zeit für dich. Ruf uns an oder buche dir einen Termin für ein entspanntes und unverbindliches Gespräch.

oder schreibe uns eine E-Mail: info@timwir.eu