WordPress Training
ElementorWordPress

Elementor und Core Web Vitals: was tatsächlich zählt

„Elementor ist langsam“ ist eine der hartnäckigsten Behauptungen im WordPress-Umfeld. Sie ist nicht ganz falsch und trotzdem irreführend. Ein Page Builder erzeugt mehr Markup als handgeschriebener Code — das kostet etwas. Was Elementor-Seiten in der Praxis tatsächlich langsam macht, sind aber fast immer andere Dinge, und die lassen sich beheben.

Die drei Werte, um die es geht

Google misst seit einigen Jahren drei Kennzahlen, die zusammen die Core Web Vitals bilden.

LCP (Largest Contentful Paint) — wann das größte sichtbare Element geladen ist. Meist das Hero-Bild oder die große Überschrift. Ziel: unter 2,5 Sekunden.

INP (Interaction to Next Paint) — wie schnell die Seite auf eine Eingabe reagiert. Hat den früheren FID-Wert abgelöst. Ziel: unter 200 Millisekunden.

CLS (Cumulative Layout Shift) — wie stark der Inhalt beim Laden springt. Jeder kennt das: Man will einen Link antippen, und im letzten Moment schiebt sich ein Bild dazwischen. Ziel: unter 0,1.

Wichtig zum Einordnen: Google bewertet nach Felddaten echter Besucher, nicht nach dem Testergebnis eines einzelnen Aufrufs. Ein guter Wert im Testwerkzeug bei schlechten Felddaten heißt, dass Ihre Besucher eine andere Seite erleben als Sie.

LCP: fast immer das Hero-Bild

In neun von zehn Elementor-Projekten, die ich mir ansehe, ist das große Bild ganz oben der Grund für einen schlechten LCP.

Die Größe. Ein Foto direkt aus der Kamera hat gern 4000 Pixel Breite und mehrere Megabyte. Angezeigt wird es auf 1600 Pixel. Skalieren Sie vor dem Hochladen auf die tatsächlich benötigte Größe.

Das Format. WebP statt JPEG spart bei gleicher Qualität typischerweise ein Drittel. Es gibt Plugins, die das automatisch erledigen.

Kein Lazy Loading für das Hero-Bild. Das klingt widersinnig, ist aber entscheidend: Verzögertes Laden ist für Bilder gedacht, die erst beim Scrollen sichtbar werden. Wenn Sie es auf das oberste Bild anwenden, verzögern Sie genau das Element, das den LCP bestimmt. In Elementor schalten Sie das im Bild-Widget ab.

Hintergrundbilder mit Bedacht. Ein Bild als Container-Hintergrund wird später geladen als ein echtes Bild-Widget. Für das oberste Element auf der Seite ist das Bild-Widget die bessere Wahl.

CLS: Platz reservieren

Layout-Sprünge entstehen, wenn ein Element nachträglich Platz beansprucht, der vorher nicht eingeplant war. Drei Ursachen decken fast alles ab.

Bilder ohne feste Maße. Der Browser weiß erst beim Laden, wie hoch das Bild wird, und schiebt alles darunter nach. Geben Sie Bildern Breite und Höhe oder ein festes Seitenverhältnis.

Schriften, die nachladen. Der Text erscheint zuerst in einer Ersatzschrift und springt beim Wechsel. Selbst gehostete Schriften mit passender Ladestrategie lösen das — und sind datenschutzrechtlich ohnehin die bessere Wahl, siehe Elementor DSGVO-konform.

Einblendungen von oben. Ein Cookie-Banner oder Hinweisbalken, der den Inhalt nach unten drückt, ist ein garantierter CLS-Treffer. Legen Sie ihn über den Inhalt statt davor.

INP: weniger ist mehr

Der Reaktionswert leidet unter zu viel JavaScript. Bei Elementor-Seiten sind die üblichen Verdächtigen: Slider und Karussells, animierte Zähler, Bewegungseffekte beim Scrollen, eingebettete Videos und externe Skripte wie Chat-Fenster oder Tracking.

Die wirksamste Maßnahme ist auch die unbeliebteste: Nutzen Sie weniger davon. Ein Slider mit fünf Bildern, den kaum jemand über das erste hinaus ansieht, kostet Ladezeit ohne Gegenwert.

Für eingebettete Videos gilt: nicht direkt einbetten, sondern erst ein Vorschaubild zeigen und das Video beim Klick nachladen. Elementor bietet dafür eine Option im Video-Widget.

Was Elementor selbst mitbringt

Unter Elementor → Einstellungen → Funktionen finden Sie mehrere Schalter, die spürbar helfen:

Optimiertes Laden von CSS lädt nur die Stile, die auf der Seite gebraucht werden, statt einer großen Sammeldatei. Verbessertes Laden von Assets und die Option, ungenutzte Icon-Bibliotheken wegzulassen, gehen in dieselbe Richtung.

Schalten Sie diese Optionen einzeln ein und prüfen Sie danach die Seite. In seltenen Fällen fehlt ein Stil, der über ein Drittanbieter-Plugin kam.

Wie Sie darüber hinaus aufräumen, steht in Elementor-Ballast entfernen.

Was Pro daran ändert: nichts

Damit hier keine falsche Erwartung entsteht — die Pro-Version macht Ihre Seite nicht schneller. Sie bringt Funktionen, keine Geschwindigkeit. Wer durch Pro mehr Widgets einsetzt, wird tendenziell langsamer.

Elementor Pro: Sinnvoll wegen Theme Builder, Formularen und Popups — nicht wegen der Ladezeit. Das gehört zur ehrlichen Einordnung dazu. Elementor Pro ansehen

Die Reihenfolge, in der ich vorgehe

Erst die Bilder, dann das Caching, dann die Schriften, dann die Skripte. In dieser Reihenfolge, weil sie nach abnehmendem Ertrag sortiert ist. Bei den meisten Seiten bringen allein die ersten beiden Schritte den Wert vom roten in den grünen Bereich.

Messen Sie vorher und nachher, sonst optimieren Sie im Blindflug. Und messen Sie mobil — dort sind die Werte schlechter und dort entscheidet sich die Bewertung.

Weitere Hebel habe ich in Elementor-Performance optimieren gesammelt. Wenn Sie das lieber einmal an Ihrer eigenen Seite durchgehen möchten, machen wir das in meiner Elementor-Schulung.

Tags

Core Web VitalsElementorPerformanceSEOWordPress