TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie behebt man die kumulative Layoutverschiebung in WordPress?

4

Google drängt Webmaster, alle erforderlichen Maßnahmen zur Verbesserung der Seitenladegeschwindigkeit zu ergreifen. Die Seitenladegeschwindigkeit Ihrer Website wird anhand weniger Parameter gemessen, wie Sie im Google PageSpeed ​​Insights-Tool sehen können. Cumulative Layout Shift (CLS) ist eines der Geschwindigkeitsmesskriterien von Core Web Vital. Dies ist ein wichtiger Faktor, um nicht nur die Geschwindigkeit zu verbessern, sondern auch für eine bessere Benutzererfahrung. In diesem Artikel erklären wir verschiedene Gründe für das CLS-Problem und wie man kumulative Layoutverschiebungsfehler in WordPress behebt.

Was ist die kumulative Layoutverschiebung?

Bevor Sie weiterlesen, müssen Sie verstehen, was CLS ist. Einfach ausgedrückt ist dies eine Verschiebung des Inhaltslayouts, die zu einer schlechten Benutzererfahrung führt. Sie sind beispielsweise im Begriff, auf einer Seite auf eine Schaltfläche zu klicken, und plötzlich wird oben ein Bannerbild geladen und die Schaltfläche nach unten gedrückt. Letztendlich werden Sie unbeabsichtigt auf das Bild klicken, was Sie zu einer anderen Seite führen kann. Dies ist eine sehr schlechte Benutzererfahrung und Google hat in diesem Artikel eine gute Erklärung, die Sie weiterlesen können.

Verwandte: Wie aktiviere ich das Lazy Loading von Bildern in Google Chrome?

Überprüfen des kumulativen Layoutverschiebungsfehlers

Öffnen Sie das Tool Google PageSpeed ​​Insights (PSI) und überprüfen Sie die Geschwindigkeit Ihrer Webseite. Sie können die Felddaten oder die Ursprungszusammenfassung überprüfen, um sicherzustellen, dass das kumulative Layoutverschiebungsproblem auf Ihrer Site vorhanden ist. Sie können mit der Maus über den Fortschrittsbalken fahren, um den kumulativen Prozentsatz des Ladevorgangs zu ermitteln, bei dem das Problem auf der Seite / Site besteht.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Überprüfen Sie das CLS-Problem in PSI

Um die problematischen Elemente zu finden, scrollen Sie nach unten zum Diagnosebereich und überprüfen Sie unter "Große Layoutverschiebungen vermeiden". Hier zeigt Google die Liste der Elemente an, die auf der getesteten Seite Layoutverschiebungen verursachen.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Vermeiden Sie große Layoutverschiebungen

Details in der Google Search Console prüfen

Sie können die Seiten-URLs mit CLS-Problem in Ihrem Google Search Console- Konto anzeigen. Nachdem Sie sich bei Ihrem Konto angemeldet haben, gehen Sie zum Abschnitt „Core Web Vitals” im Abschnitt „Erweiterungen”. Sie finden die Berichte sowohl für Mobilgeräte als auch für Desktops, um die Seiten mit „CLS-Problem: mehr als 0,25 (Mobilgerät) / (Desktop)” anzuzeigen.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

CLS-Problem in der Google Search Console

Klicken Sie auf das Problem, um die Beispiel-URL auf Ihrer vom CLS-Problem betroffenen Website und die durchschnittliche CLS-Zeit anzuzeigen. Google betrachtet CLS gemäß der folgenden Tabelle als Problem:

GutMuss verbessert werdenArm
<0,1 s0,1 bis 0,25 s>0,25s

Daher müssen Sie die CLS-Zeit auf weniger als 0,25 Sekunden reduzieren, damit dieses im PSI-Tool grün/gelb wird und die Fehler aus Ihrem Search Console-Konto entfernt werden.

Kumulativen Layout-Shift-Fehler in WordPress beheben

Hier sind einige der Faktoren, die zu einer kumulativen Verzögerung der Layoutverschiebung auf der WordPress-Site führen können. Lassen Sie uns jedes Problem und mögliche Lösungen im Detail erläutern.

1 CSS-Zustellungsoptimierung

Wie Sie im obigen Screenshot von „Große Layoutverschiebungen vermeiden” sehen, lautet der erste Eintrag „<div class=”row footer-row”>”. Dies ist überraschend, da es keine Möglichkeit gibt, den Fußbereich oberhalb des Falzbereichs zu laden. Nach der Überprüfung haben wir verstanden, dass dies auf die Option "CSS-Lieferung optimieren" zurückzuführen ist, die mit dem WP Rocket-Plugin aktiviert ist. Diese Option generiert kritisches CSS und fügt es in den Header-Abschnitt ein, um das Rendern blockierende CSS zu entfernen. Dies führt jedoch in vielen Fällen zu kumulativen Layoutverschiebungsproblemen. Wenn Sie WP Rocket oder ein anderes Caching-Plugin zum Inlinen von CSS im Header verwenden, deaktivieren Sie diese Option und prüfen Sie, ob die CLS-Verzögerung verbessert werden kann.

2 AdSense und andere Werbeskripte in ATF

Viele Publisher verwenden Google AdSense oder andere Werbenetzwerke, um ihre Online-Inhalte zu monetarisieren. Sie müssen einen JavaScript-Anzeigencode auf Ihrer Webseite einfügen, um Anzeigen zu schalten. Im Allgemeinen müssen Sie den Anzeigencode in den Bereich „above the fold” (ATF) einfügen, um die Sichtbarkeit und den Umsatz der Anzeige zu erhöhen. Dies wirkt sich jedoch direkt auf die Seitenladegeschwindigkeit aus und führt zu einem kumulativen Layoutverschiebungsfehler im Google PageSpeed ​​Insight (PSI)-Tool.

Nachdem der Inhalt über dem Falz vollständig geladen wurde, beginnt Ihre Anzeige zu laden und den Inhalt nach unten zu verschieben.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Layoutverschiebung aufgrund von Werbung

Es gibt nur wenige Möglichkeiten, dieses Problem zu beheben. Eine besteht darin, das Anzeigenskript in WordPress mithilfe von Plugins wie WP Rocket zu verschieben. Dies wirkt sich jedoch auf Ihre Anzeigenimpression und die Klickrate aus und verringert so die Gesamteinnahmen.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

JavaScript-Ausführung der Werbung verzögern

Die zweite Möglichkeit besteht darin, Anzeigen mit fester Breite oberhalb des Falzbereichs zu verwenden, wie von Google empfohlen. Leider macht Google auch deutlich, dass die Verwendung einer festen Breite bei responsiven oder flüssigen Anzeigen nicht möglich ist.

Es ist nicht möglich, Platz für diese Anzeigenflächen zu reservieren, bevor Anzeigeninhalte angefordert werden, und Anzeigen mit flüssiger Größe führen immer zu Layoutverschiebungen. Um die Auswirkungen von Layoutverschiebungen bei der Arbeit mit flüssigen Anzeigenflächen zu mildern, empfehlen wir Folgendes: Verwenden Sie die flüssige Größe nur für Anzeigenflächen unterhalb des Falzes.

Google

Zusammenfassend lässt sich sagen, dass Sie das Problem nicht beheben können, es sei denn, Sie entfernen den externen Anzeigencode aus dem ATF-Bereich. Dies gilt für jeden anderen Drittanbieter-Code, den Sie im Header-Bereich Ihrer Website platziert haben.

3 Verwenden Sie die richtigen Bildabmessungen

Dies ist vergleichbar mit der Verwendung von fest mit Werbung. Wenn Sie keine Bildabmessungen haben, warten Browser, bis die Bilder geladen sind, und verschieben den Inhalt darunter, was zu Problemen mit der Layoutverschiebung führt. Glücklicherweise ist dies kein Problem, da WordPress beim Hochladen über den Post-Editor automatisch Dimensionen zu Bildern hinzufügt. Sie müssen dem img-Tag jedoch manuell Höhen- und Breitenparameter hinzufügen, wenn Sie Bilder manuell über den Block „Benutzerdefiniertes HTML”, die Funktion „Als HTML bearbeiten” oder das Logobild einfügen. Definieren Sie außerdem feste Breite und Höhe beim Einbetten von Videos und Iframes von Drittanbieter-Websites.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Fehlende Breite und Höhe für Bild

4 Schriftarten, die das Laden von Inhalten verzögern

Jede Website verwendet Schriftarten. Dies führt zu kumulativen Layoutverschiebungsproblemen, insbesondere bei der Verwendung von Drittanbieterdiensten wie Google-Schriftarten. Da Google-Schriftarten von externen Servern geladen werden müssen, entsteht ein ähnliches kumulatives Layoutverschiebungsproblem wie beim Anzeigencode. Sie können dieses Problem auch in PSI sehen, indem „Text während des Ladens von Webfonts sichtbar bleibt”, was darauf hinweist, dass der sichtbare Inhalt verzögert geladen wird.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Schriftproblem

  • Der effektive Weg, dieses Problem zu lösen, besteht darin, ein Caching-Plug-in zu verwenden, um Domains wie fonts.googleapis.com und fonts.gistatic.com vorab zu verbinden und DNS-Prefetchings durchzuführen. Dies hilft Ihnen, das Laden der Schriftarten zu beschleunigen, indem Sie eine Vorverbindung mit dem Google-Fonts-Server herstellen. SG Optimizer, WP Rocket (automatisch) und viele andere Plugins bieten diese Funktion, die Sie zu diesem Zweck nutzen können. Darüber hinaus können Sie die Anzahl der Schriftfamilien begrenzen und die Größe der heruntergeladenen Datei reduzieren.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

SG Optimizer Optimierung von Webfonts

  • Eine andere Möglichkeit besteht darin, Systemschriften zu verwenden oder die Schriftdateien auf Ihrem Server zu hosten. Mit Themen wie GeneratePress und Astra können Sie beispielsweise die Systemschriftart für Ihre Site auswählen.
  • Stellen Sie in jedem Fall sicher, dass Sie die Schriftarten vorab laden, um eine Warnung vor der Schlüsselanforderung beim Vorladen zu vermeiden, die auch zu einer kumulativen Verzögerung bei der Layoutverschiebung führen kann.

5 Schriftsymbole im Menü und ATF

Viele WordPress-Themes verwenden Schriftartsymbole im Navigationsbereich, um Untermenüpunkte anzuzeigen. Im Allgemeinen sind diese Symbole von Websites Dritter wie Font Awesome oder icomoon enthalten. Dies führt zu ähnlichen Problemen wie bei Schriftarten und erhöht die kumulative Layoutverschiebungszeit. Mit Themes wie GeneratePress können Sie SVG-Symbole anstelle von Schriftarten für das Navigationsmenü auswählen. Ebenso können Sie beim Astra-Thema das Laden der Schriftbibliothek mit einer benutzerdefinierten Funktion deaktivieren. Auf diese Weise können Sie das Problem der kumulativen Layoutverschiebung in WordPress verbessern. Sie haben jedoch keine andere Möglichkeit, als Untermenüelemente in den meisten anderen Designs zu deaktivieren, was keine gute Lösung ist.

Webmaster missverstehen die PSI-Warnung „Offscreen-Bilder verschieben”. Diese Warnung tritt auf, wenn Sie Bilder, die in Below-the-Fold-Inhalten (BTF) verfügbar sind, nicht träge laden. Wenn Sie jedoch ein Plugin in WordPress verwenden, werden alle Bilder mit HTML

Um die CLS-Zeit im PSI-Tool zu reduzieren, müssen Sie das Logobild vom Lazy Loading ausschließen. Die Lösung hängt von dem Plugin ab, das Sie zum Lazy Loading Ihrer Bilder verwenden. Gehen Sie beispielsweise in WP Rocket zum Abschnitt „Medien > LazyLoad” und geben Sie den Logonamen oder die URL an, um vom Lazy Loading auszuschließen.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Logo von Lazy Loading ausschließen

7 Lazy Loading Image Slider in ATF

Ähnlich wie bei einem Bildlogo sehen Sie eine hohe kumulative Layoutverschiebungszeit, wenn Sie Bildschieberegler über dem Faltbereich haben. Sie können die Slider-Bilder vom Lazy Loading ausschließen und testen, wie es hilft, die CLS-Zeit zu reduzieren.

Verwandte: 25 SEO – Tipps zu Rang auf Ihre WordPress – Seite.

8 Blockierendes JavaScript wie jQuery rendern

Das letzte Thema ist das beliebte Rendering blockierende JavaScript aufgrund von jQuery-basierten Themen. Tatsächlich enthält WordPress auch jQuery als Teil des Ordners wp-includes. Sie können jQuery und andere Render-Blocking-Skripte auf Ihrer Seite mit einem Caching-Plugin wie W3 Total Cache zurückstellen. Stellen Sie jedoch sicher, dass Sie Ihre Website gründlich testen, um fehlerhafte Layouts zu vermeiden.

Überprüfen des Fixes in der Google Search Console

Nachdem Sie das Problem behoben haben, stellen Sie sicher, dass Sie Ihre Validierungen im Google Search Console-Konto einreichen. Sie können zum Abschnitt „Core Web Vitals” zurückkehren und Validierungen für die gesamte Site einreichen.

Wie behebt man die kumulative Layoutverschiebung in WordPress?

Überprüfen des CLS-Problems in der Google Search Console

Es dauert bis zu 28 Tage, bis Google das CLS-Problem auf Ihrer Website überprüft und die entsprechenden Ergebnisse im Search Console-Konto anzeigt.

Abschluss

Wie Sie sehen können, liegt der Hauptgrund für kumulative Layout-Verschiebungsfehler in WordPress darin, dass Render-Blockierungsskripte über dem Faltinhaltsbereich platziert werden. Dies können Werbecodes, jQuery, Schriftarten, Symbole oder andere Dinge sein. Die Lösung, um dieses Problem zu überwinden, besteht darin, einfache minimalistische Themen wie GeneratePress oder Astra zu verwenden. Auf der anderen Seite können Sie Caching-Plugins verwenden, um eine Vorverbindung herzustellen und Schriftartdateien zu kombinieren, um die kumulative Layoutverschiebungszeit zu reduzieren.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. AnnehmenWeiterlesen