7 fatale Fehler bei der Keyword-Optimierung, die dich deine Rankings kosten

Abonniere unseren kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um's Bloggen, SEO und Online-Business. Als Willkommensbonus erhältst du unser E-Book 7 fatale Fehler bei der Keyword-Optimierung.

Invalid email address

Abmeldung jederzeit möglich. Etwa 2 bis 5 E-Mails im Monat. Die Einwilligung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß unserer Datenschutzerklärung.

7 fatale Fehler bei der Keyword-Optimierung, die dich deine Rankings kosten

8 Tipps, um den Cumulative Layout Shift (CLS) bei WordPress zu verbessern

CLS (Cumulative Layout Shift)

Der CLS (Cumulative Layout Shift) gibt an, wie sehr sich das Seitenlayout während des Ladevorgangs verschiebt.

Er berechnet sich aus der anteiligen Größe der sich verschiebenden Elemente (Impact Fraction) multipliziert mit dem Grad der Verschiebung (Distance Fraction).

Zu starke Verschiebungen können Nutzer ablenken und verwirren:

Hast du schon einmal versucht, auf einen Button oder ein Link zu klicken? Und kurz vor dem Klick verschiebt er sich, sodass du auf etwas ganz anders klickst, wie in folgendem Video?

Quelle: web.dev/cls/

Nervig, oder?

Und im obigen Beispiel sogar sehr…

Wie kann ich den CLS messen?

Den CLS kannst du mit PageSpeed Insights messen. Das Tool zeigt dir sowohl Labdaten als auch Felddaten an:

CLS messen mit PageSPeed Insights

Weiter unten (unter Diagnose > Umfangreiche Layoutverschiebungen vermeiden) kannst du zudem sehen, welche DOM-Elemente am stärksten zum CLS einer Seite beitragen (inkl. dem Score für die einzelnen Elemente):

Umfangreiche Layoutverschiebungen vermeiden in PageSpeed Insights

Das gleiche kannst du auch mit Lighthouse in den Chrome DevTools machen:

CLS mit Lighthouse in den Chrome Dev Tools messen

Damit kannst du Layout-Verschiebungen noch etwas detaillierter untersuchen. Denn im Performance-Report werden genau die Stellen (mit Zeitangabe, den Verschiebungsparametern und Frames) im Ladeverlauf angezeigt, bei denen die Verschiebungen auftreten:

Layout Verschiebungen im Performance Report von Lighthouse

Folgende Maßnahmen helfen dir, deinen CLS zu verbessern:

1. Breite und Höhe von Bildern ergänzen

Wenn du die Breite und Höhe in deinen Bildern angibst, wird vor dem Laden des Bildes eine genauso große Leerfläche vom Browser freigehalten.

Das heißt, wenn das Bild geladen ist, gibt es keine Verschiebung im Layout.

Beheben kannst du das entweder manuell durch Ergänzen von Breite und Höhe in jedem <img>-Tag oder wahlweise durch Aktivieren folgender Option in WP Rocket (unter Einstellungen > WP Rocket > Medien > Bildabmessungen):

Mit WP Rocket fehlende Bildabmessungen hinzufügen
Tipp: Alternativ kannst du Platz auch mit der CSS-Eigenschaft aspect-ratio reservieren. Das wird leider aber noch nicht von allen Browsern unterstützt.

2. Vermeide Flash of Invisible Text (FOIT)

FOIT steht für Flash of Invisible Text.

Dieses Phänomen kommt vor, wenn der Text während des Ladens eines Webfonts (wie z. B. Google Fonts) gar nicht sichtbar ist.

Mit PageSpeed Insights kannst du testen, ob das der Fall bei dir ist (unter Diagnose > Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt):

Webfonts sichtbar während Ladevorgängen

Die Lösung für das Problem besteht darin, die CSS-Eigenschaft font-display für @font-face zu verwenden. Dadurch sagst du dem Browser, dass er einen Ersatz-Font (auch Fallback-Font genannt) verwenden soll, solange der eigentliche Font noch nicht geladen ist.

Der Standard ist die Verwendung mit dem Attribut swap, wodurch dem Browser unendlich viel Zeit eingeräumt wird, um den eigentlichen Font zu laden.

Wenn du z. B. Google Fonts lokal in WordPress einbinden möchtest, könnte das CSS dafür so aussehen:

@font-face { font-family: 'Inter'; <strong>font-display: swap;</strong> <strong> </strong>font-style: normal; font-weight: 400; src: local(''), url('../fonts/inter-v3-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/inter-v3-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
Code-Sprache: JavaScript (javascript)

Wenn du extern geladene Google Fonts verwendest, kannst du font-display: swap durch Anhängen des Parameters &display=swap an die Anfrage-URL aktivieren:

<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One<strong>&display=swap</strong>" rel="stylesheet">
Code-Sprache: HTML, XML (xml)

Klingt dir das zu kompliziert?

Kein Problem, das geht natürlich auch per Plugin!

WP Rocket fügt display=swap automatisch zu Google Fonts hinzu, ohne dass du etwas dafür einstellen musst.

Auch mit dem kostenlosen Plugin Autoptimize kannst du display=swap für Google Fonts einbinden (unter Einstellungen > Autoptimize > Extras):

Mit Autoptimize Display swap für Google Fonts einstellen

Allerdings:

Damit sind deine CLS-Probleme noch nicht komplett gelöst. Denn font-display:swap erzeugt in vielen Fällen ein neues Problem, das sich sich Flash of Unstyled Content (FOUT) nennt:

3. Vermeide Flash of Unstyled Text (FOUT)

Flash of Unstyled Text (FOUT) entsteht, wenn erst der Fallback-Font angezeigt wird und im Ladeverlauf der Website durch einen anderen Font (z. B. einen Google Font) ersetzt wird.

Wie das in der Praxis aussieht, kannst du z. B. auf der Website von NitroPack sehen. Dort ist ca. eine Sekunde lang der Fallback-Font zu sehen, bevor der eigentliche Font aufblitzt:

Es gibt drei Möglichkeiten, um FOUT zu vermeiden:

1. Ersetze deine Fonts durch Web Safe Fonts

Web Safe Fonts sind Standard-Fonts, die auf fast jedem Computer, Tablet oder Smartphone vorinstalliert sind und deshalb weder die Ladezeit belasten noch FOUT erzeugen. Dazu gehören z. B. Arial, Times New Roman oder Verdana.

Großer Nachteil von Web Safe Fonts ist allerdings, dass sie altbacken wirken können und mitunter schlechter lesbar sind als modernere Fonts.

Tipp: Solltest du dich für einen Web Safe Font entscheiden, dann nimm auf jeden Fall einen serifenlosen, wie z. B. Arial oder Helvetica.

2. Lade deine Fonts vor

Benutze <link rel="preload"> um deine Fonts vorzuladen. Das würde dann im HTML so aussehen:

<head> <link rel="preload" href="/fonts/inter-v2-latin-regular.woff2" as="font" type="font/woff2" crossorigin> </head>
Code-Sprache: HTML, XML (xml)

Dafür gibt es auch eine Option in WP Rocket (unter Einstellungen > WP Rocket > Cache füllen > Fonts vorladen):

Fonts vorladen mit WP Rocket

Falls du es vorziehst, Google Fonts über Google-Server zu laden, wirst du mit folgendem Snippet von Harry Roberts wahrscheinlich die besten Resultate erzielen. Darin wird <link rel="preload"> mit <link rel="preconnect"> kombiniert:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" media="print" onload="this.media='all'" />
Code-Sprache: HTML, XML (xml)

WP Rocket optimiert Google Fonts automatisch (ohne, dass du etwas einstellen müsstest) und verwendet dafür ebenfalls <link rel="preload"> und <link rel="preconnect">.

3. Nutze font-display: optional

Falls ein Font trotz <link rel="preload"> FOUT erzeugt, kannst du damit experimentieren font-display: optional statt font-display: swap zu nehmen.

Damit sagst du dem Browser, den Fallback-Font zu nehmen, falls der Font nicht schnell genug geladen werden kann.

4. Embeds und iframes

Embeds, wie z. B. YouTube-Videos, Instagram-Posts, Tweets, Google Maps oder iframes können das Layout unerwartet stark verschieben.

Das liegt daran, dass sie zum Teil variabel in der Größe sind. Social-Media-Posts enthalten z. B. unterschiedliche lange Texte, mal größere und mal kleinere Bilder, Videos etc.

Um CLS durch Embeds oder iframs zu vermeiden, halte ich zwei Lösungen am sinnvollsten:

1. Embeds durch Zwei-Klick-Lösung mit Platzhalter ersetzen

Du kannst natürlich manuell um jeden Embed selbst einen <div>-Kasten machen, um genug Whitespace für den Inhalt bereitzustellen, aber das wäre viel zu kompliziert.

Einfacher, datenschutz- und ladezeitfreundlicher ist es, Embeds durch Platzhalter zu ersetzen und durch Klick seitens des Nutzers nachzuladen.

Das geht zum Beispiel mit dem Content Blocker von Borlabs Cookie:

YouTube-Video, das der Content Blocker von Borlabs Cookie blockiert hat

Für YouTube-Videos kannst du auch sehr gut das kostenlose Plugin WP YouTube Lyte nehmen.

2. Embeds komplett deaktivieren

Eine weitere Möglichkeit ist es, Embeds komplett zu deaktivieren (und stattdessen mit einem Link auf ein YouTube-Video oder Instagram-Post zu verweisen). So handhabe ich es auch bei Blogmojo.

Die dazugehörige Datei wp-embed.min.js kannst du recht einfach durch Hinzufügen dieses Codes in der functions.php deines Child-Themes deaktivieren:

function blogmojo_dequeue_scripts(){ wp_deregister_script('wp-embed'); } add_action( 'wp_enqueue_scripts', 'blogmojo_dequeue_scripts' );
Code-Sprache: JavaScript (javascript)

WP Rocket bietet ebenfalls die Möglichkeit, WordPress-Embeds zu deaktivieren (unter Einstellungen > WP Rocket > Medien > Embeds):

Alternativ kannst du auch das kostenlose Plugin Disable Embeds von Pascal Birchler dafür nehmen.

5. Anzeigen

Anzeigen sind eine der häufigsten Ursachen für Layout-Verschiebungen auf Websites.

Das liegt daran, dass Anzeigen oft nachträglich durch die Scripte eines Anzeigen-Netzwerks zu einem Artikel oder einer Seite hinzugefügt werden oder nach dem Laden noch einmal in der Größe angepasst werden, sodass die Anzeigen-Größe zur Display-Größe des Nutzers passt.

1. Nutze Leerfläche für deine Anzeigen-Slots

Der beste Weg, um Layout-Verschiebungen durch Anzeigen zu vermeiden, ist es, durch einen Anzeigen-Container Leerfläche für eine Anzeige zur Verfügung zu stellen:

<strong><div class="ad-container"></strong> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- blogmojo.de 300 x 600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-0123456789" data-ad-slot="<meta charset="utf-8">0123456789"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <meta charset="utf-8"><strong></div></strong>
Code-Sprache: HTML, XML (xml)

Mit CSS kannst du dann dem Anzeigen-Container eine Mindesthöhe zuteilen:

.ad-container { min-height: 600px; }
Code-Sprache: CSS (css)

Falls deine Anzeigen responsive sind, musst du natürlich noch die Anzeigengrößen für die jeweiligen Auflösungen mit @media angeben. Zum Beispiel:

@media (max-width: 768px) .ad-container { <meta charset="utf-8">min-height: 336px: }
Code-Sprache: HTML, XML (xml)

2. Automatische Anzeigen vermeiden

Durch automatische Anzeigen, z. B. die von Google AdSense, gibst du die Kontrolle darüber ab, wo Anzeigen auf deinen Seiten platziert werden. Das heißt, du kannst Layout-Verschiebungen wenig bis oder sogar gar nicht mehr beeinflussen.

3. Anzeigen above the fold vermeiden

Je höher du Anzeigen auf einer Webseite platzierst, desto mehr Elemente können sich potenziell dadurch verschieben. Deswegen kann es Sinn ergeben, Anzeigen above the fold zu entfernen oder weiter unten auf der Seite zu platzieren.

6. Nicht zusammengesetzte Animationen vermeiden

Als nicht zusammengesetzte Animationen (engl. non-composited animations) bezeichnet man Animationen, durch die ein Browser Rendering-Schritte wie die Berechnung von CSS-Stilen (also welcher CSS-Stil zu welchem HTML-Element gehört) oder des Layouts (also wie viel Platz jedes Element auf einer Seite braucht) mehrfach wiederholen muss.

Und das kann Layout-Verschiebungen verursachen und damit den CLS-Score erhöhen. Zudem können solche Animationen, vor allem auf Mobilgeräten mit schlechter Internetverbindung, abgehackt wirken.

Eine Übersicht über alle nicht zusammengesetzten Animationen bietet dir Page Speed Insights (unter Diagnose > Nicht zusammengesetzte Animationen vermeiden):

Nicht zusammengesetzte Animationen vermeiden in PageSpeed Insights

Neben dem Verzicht auf solche Animationen bietet es sich, an Elemente stattdessen mit transform und opacity zu animieren. Welche Vorteile das bietet, kannst du in diesem Artikel nachlesen.

7. Kritisches CSS vorab laden

Layoutverschiebungen above the fold entstehen oft dadurch, dass CSS-Stile lange nach den Elementen geladen werden, die durch sie gestylt werden.

Das Phänomen nennt sich auch Flash of Unstyled Content (FOUC), weil ungestylte HTML-Elemente kurz “aufblitzen”, bevor sie ihr finales Aussehen annehmen.

FOUC entsteht oder wird verstärkt, wenn…

  • die CSS-Anweisungen in einer riesigen zusammengefassten Datei stecken, die durch ihre Größe länger zum Laden braucht.
  • die CSS-Dateien durch ein Performance-Plugin nachgeladen werden (um den Punkt Ressourcen beseitigen, die das Rendering blockieren in PageSpeed Insights abzuhaken).
  • JavaScript oder andere Ressourcen das Laden von CSS-Dateien hinauszögern.

Ein einfacher Weg, um das zu verhindern, ist das Vorabladen von kritischem CSS, also den CSS-Anweisungen, die zur Anzeige von Inhalten above the fold benötigt werden.

Zum Beispiel durch <link rel="preload"> einer CSS-Datei, die das kritische CSS enthält oder, besser noch, inline im <head>-Bereich deiner Webseiten.

Hier mal ein Beispiel einer meiner Seiten ohne kritisches CSS. Du siehst die Layoutverschiebungen in den ersten beiden Frames sehr deutlich. Mit 0,911 ist der CLS entsprechend sehr hoch:

CLS ohne kritisches CSS

Mit kritischem CSS sieht die Welt ganz anders aus. Der CLS liegt nur noch bei 0,009, was weit unter dem Grenzwert von 0,1 liegt. An den Frames kannst du auch erkennen, dass sich die Position von dem Texten, dem Hintergrund-Bild, dem lila Button etc. nicht mehr verschiebt:

CLS mit kritischem CSS

Welches CSS auf deinen Webseiten kritisch ist, kannst du mit dem Critical Path CSS Generator von Pegasaas herausfinden:

Critical Path CSS Generator

Anschließend kannst du den Code manuell in die entsprechenden Webseiten einbinden, z. B. mit CSS & JavaScript Toolbox.

Einfacher geht es mit WP Rocket. Unter Einstellungen > WP Rocket > Datei-Optimierung > CSS-Dateien setzt du einfach einen Haken bei CSS-Darstellung optimieren.

Kritisches CSS mit WP Rocket generieren

Dadurch generiert WP Rocket automatisch kritisches CSS für deine Website.

Zusätzlich bietet WP Rocket die Möglichkeit seitenspezifisches kritisches CSS zu generieren. Das ist sinnvoll für alle Seiten, die “von der Norm” abweichen, also auf denen z. B. du im Gegensatz zum Rest deiner Website einen Page-Builder (oder keinen) verwendest.

Die Option findest du in den WP-Rocket-Optionen für einzelne Seiten bzw. Beiträge. Im Gutenberg-Editor ist diese rechts in der Sidebar in den Seiteneinstellungen. Dort klickst du auf den Button Spezifisches CPCSS erzeugen:

Spezifisches CPCSS mit WP Rocket generieren

8. Pop-ups, Banner und anderer dynamischer Content

Das ist dir wahrscheinlich schon einmal begegnet:

Du öffnest eine Seite und am unteren oder oberen Bildschirmrand wird ein Banner nachgeladen, das den gesamten Content nach oben bzw. unten schiebt.

Zu solchem dynamischen Content gehören zum Beispiel:

  • Cookie-Banner oder andere rechtliche Hinweise
  • “Installiere unsere App”
  • “Trage dich in unseren Newsletter ein.”
  • “20 % sparen bei unserer Sommer-Aktion”
  • “Guck dir auch Blogartikel XYZ, unser Instagram-Profil etc. an”

Ein sehr schönes Beispiel dafür, kannst du im Video ganz oben in der Einleitung sehen.

Ein weiteres Negativbeispiel kannst du auf der offiziellen Seite der Core Web Vitals sehen:

Beispiel für schlechten CLS Score

Der recht große Layout-Shift, der für ein Nicht-Bestehen des Tests sorgt, wird durch ein Cookie-Banner verursacht:

Layout Verschiebung durch Cookie Banner

Lösungen dafür können sein:

  • Den dynamischen Content statisch machen (das heißt, ein Banner am oberen Bildschirmrand dauerhaft anzeigen)
  • Genügend Leerfläche für den dynamischen Content bereitstellen
  • Auf den dynamischen Content verzichten
  • Pop-ups, Topbars etc. als Overlays gestalten (das heißt, sie legen sich über den Content und verschieben ihn dadurch nicht)