So optimieren Sie Ihre Website für Core Web Vitals (Adsense)

Der Wettlauf um die Verbesserung von Core Web Vitals ist nicht einfach. Schwieriger wird es, wenn Sie sich auf ein Werbeprogramm wie Google AdSense verlassen, um Ihre Website zu monetarisieren.

Websites, auf denen Google AdSense ausgeführt wird, bestehen mit 10-mal höherer Wahrscheinlichkeit den Core Web Vitals-Test nicht als dieselbe Website ohne Google AdSense. Dies ist hauptsächlich auf die Anzahl der Anfragen von Drittanbietern und Assets zurückzuführen, die Google AdSense zu Ihrer Website hinzufügt. Die meisten dieser Assets sind nicht optimiert, groß und nicht benutzerfreundlich.

Wenn Sie außerhalb von AdSense und Werbeplattformen viele nicht optimierte Bilder, JavaScript und CSS haben, insbesondere "above the fold", dann werden Sie sehr wahrscheinlich auch den Core Web Vitals-Test nicht bestehen.

Wenn Sie Schwierigkeiten haben, den Core Web Vitals-Test zu bestehen und Ihr Suchmaschinen-Ranking-Potenzial zu verbessern, finden Sie in diesem Artikel praktische Lösungen.

Was sind Core Web Vitals?

Core Web Vitals sind von Google Lighthouse bereitgestellte Metriken, die bestimmen, wie eine Website ein gutes Seitenerlebnis bietet. Während es beim Ausführen eines Tests viele Metriken gibt, sind die wichtigsten Metriken der Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

Google hat angekündigt, dass diese Metriken ab Mai 2021 Teil ihrer Ranking-Signale werden, die zur Bestimmung der Webseitenpositionen in den Suchergebnissen verwendet werden.

Zusammenfassend kann man sagen, dass Core Web Vitals kein Schrecken für Webmaster sein sollte, sondern ein Mittel, um das Seitenerlebnis von Websites zu verbessern.

Largest Contentful Paint (LCP) : LCP misst die Zeit, die zum Laden des größten sichtbaren Bildes oder Textblocks auf einer Webseite benötigt wird. Wenn der größte sichtbare Text oder das größte sichtbare Bild schnell geladen wird, wird davon ausgegangen, dass der Rest Ihrer Bilder und Texte schnell geladen wird. Die erforderliche Ladezeit beträgt 2,5 Sekunden .

First Input Delay (FID) : FID misst die Interaktivität von Webseiten. Dies wird dadurch bestimmt, wie lange es dauert, bis der Browser mit der Verarbeitung von Event-Handlern beginnt, nachdem ein Benutzer auf Ihre Website geklickt hat. Dies wird allgemein als der erste Eindruck Ihrer Website bezeichnet. Die erforderliche Zeit zum Durchlaufen beträgt 100 Millisekunden .

Cumulative Layout Shift (CLS) : CLS misst die Layoutverschiebung, die auf einer Webseite auftritt. Wenn eine Webseite geladen wird und dann plötzlich etwas erscheint oder verschwindet und sich die Seite anpassen muss, um größer oder kleiner zu werden, wird diese Verschiebung gemessen. Es ist schrecklich für die Benutzererfahrung und ich stimme zu. Die Punktzahl, die Sie zum Bestehen benötigen, beträgt 0,1 .

So optimieren Sie Ihre Website für Core Web Vitals

Befolgen Sie diese Schritte, um Ihre Website zu optimieren:

1. Beginnen Sie mit einem schnellen Webhost

Wenn Sie einen Webhost mit einer schrecklichen Reaktionszeit haben, führt alles andere, was ich hier aufliste, möglicherweise nicht zu den gewünschten Ergebnissen. Je schneller Ihr Server auf Anfragen antwortet, desto besser.

Warum ist ein Webhoster mit einer schnellen Time to First Byte (TTFB) wichtig? Einige werden argumentieren, dass TTFB keine Rolle spielt, aber es tut es. Das ist die Grundlage von allem anderen. Wenn Sie Benutzer in Städten mit langsamem Internet haben, ist es entscheidend, wie schnell Ihr Webhost reagieren kann. Jeder Webhost kann gut abschneiden, wenn Sie Benutzer hauptsächlich aus Städten mit superschnellem Internet haben.

Versuchen Sie zu testen, wie Ihr Webhost auf 3G oder 2G statt auf 4G reagiert. Denn wenn Sie viele Benutzer dazu bringen, sich über 3G oder 2G zu verbinden, summiert sich dies zu Ihrem Core Web Vitals-Score. Es zählt also jede Millisekunde. Der Unterschied zwischen 100 ms in Ihrem FID und 101 ms besteht darin, dass Sie mit 100 ms bestehen, aber mit 101 ms nicht bestehen. Wenn Ihnen also jemand sagt, dass 1 ms keine Rolle spielt, liegt diese Person möglicherweise falsch.

Stellen Sie bei der Auswahl eines Webhosts immer sicher, dass ein Rechenzentrum näher an der Mehrheit Ihrer Website-Benutzer liegt. Sie können ihre Standorte finden, indem Sie sich Ihre Analysen ansehen. Woher kommen die meisten Ihrer Benutzer? Wählen Sie ein Rechenzentrum, das näher bei ihnen liegt. Je näher desto besser.

Ich persönlich habe eine signifikante Änderung in den Felddaten einer Website von Core Web Vitals nach dem Wechsel des Webhosts festgestellt. Ich habe nichts anderes gemacht.

Wenn Sie nach einem schnellen Webhost suchen, gibt es viele Empfehlungen, die ausschließlich von Partnern ohne Aufrichtigkeit angetrieben werden. Wenn du WordPress verwendest und es dir leisten kannst, empfehle ich Kinsta wärmstens. Sie sind die besten für WordPress. Wenn Sie etwas Billigeres benötigen oder WordPress nicht verwenden, ist Cloudways ebenfalls sehr effektiv.

2. Verwenden Sie ein leichtes und geschwindigkeitsoptimiertes Design

Dieser Tipp ist besonders für Nicht-Programmierer und sogar für Programmierer mit weniger Zeit sehr nützlich. Besonders wenn Sie WordPress verwenden, wo es so viele Optionen gibt, stellen Sie sicher, dass Sie ein leichtes und geschwindigkeitsoptimiertes Thema verwenden.

Da das Thema wie das Skelett Ihrer Website ist, wird der Körper gebrochen, wenn das Skelett gebrochen ist. Das ist es einfach.

Es gibt eine lange Liste von Best Practices, nach denen Sie in einem Thema suchen sollten. Einige der häufigsten schlechten Praktiken sind eine übermäßige Abhängigkeit von JQuery, das Laden von zu vielen CSS/JS, wenn sie nicht benötigt werden, große Themengröße und mehr. Sie können jederzeit ein Tool wie Yellow Labs verwenden, um die Demo zu testen.

Wenn Sie WordPress verwenden, können Sie sich die Liste der schnellsten WordPress-Themes ansehen.

3. Optimieren Sie Ihre Bilder

Bilder sind cool. Sie machen Inhalte so ansprechend. Aber sie können eine Belastung sein, wenn sie nicht optimiert sind. Große Bilder wie 3 MB wirken sich definitiv auf Ihre Geschwindigkeit aus. Und wenn diese Bilder sichtbar sind, wenn Ihre Website vor dem Scrollen besucht wird, wirken sie sich definitiv auf Ihre LCP-Metrik aus.

Die Wahrheit ist, dass nicht optimierte Bilder die Größe Ihrer Seite erhöhen. Je größer die Seitengröße ist, desto länger dauert das Laden.

Ich persönlich ziehe es vor, jedes Bild vor dem Hochladen zu optimieren. Ich nutze keinen externen Dienst zur Bildoptimierung. Wenn Sie jedoch WordPress oder ein ähnliches CMS verwenden, gibt es Plugins und Lösungen, um Bilder automatisch zu optimieren. Es gibt auch Cloud-Lösungen, unabhängig davon, was Sie verwenden.

4. Hintergrundbilder entfernen oder verkleinern

Hintergrundbilder sind normalerweise sehr groß. Und es kann Ihre Ladezeit verlangsamen, da es zuerst geladen werden muss, bevor sinnvolle Inhalte angezeigt werden.

Sie können das Hintergrundbild vollständig entfernen, um eine schnellere Website zu erhalten. Wenn sie so wichtig sind, sollten Sie sie auf die kleinstmögliche Größe optimieren oder Muster anstelle von Bildern verwenden.

5. Verwenden Sie Browser-Caching

Wenn Sie viele treue Leser haben, sollten Sie Browser-Caching in Betracht ziehen. Wenn ein Benutzer Ihre Website zum ersten Mal besucht, speichert der Browser diese Website im Cache. Bei jedem weiteren Besuch wird es sofort geladen. Dies kann FID und LCP ab dem zweiten Besuch stark verbessern.

Für WordPress-Benutzer können die meisten Caching-Plugins dabei helfen.

6. JavaScript minimieren und unbenutztes JavaScript zurückstellen

Obwohl JavaScript erstaunlich ist, blockiert es oft das Rendering. Dies bedeutet, dass es sich auf Ihre Ladezeit und letztendlich auf Ihre FID auswirken kann.

Versuchen Sie, JavaScript zu minimieren, indem Sie die Leerzeichen und Kommentare entfernen, um die Dateigröße zu reduzieren. Stellen Sie außerdem sicher, dass Sie unkritisches JavaScript zurückstellen. Dies sollte Ihren FID verbessern.

Für WordPress-Benutzer gibt es Plugins wie Autoptimize, WP Rocket und andere, die dies für Sie tun können.

7. Legen Sie das AdSense-Größenattribut fest

Wenn Sie AdSense auf Ihrer Website ausführen und mit CLS zu kämpfen haben, kann dies alle Ihre Probleme lösen. Es hat für mich getan und es sollte für Sie.

Wenn Sie einen Anzeigenblock in der Nähe des Headers haben, der sichtbar ist, wenn ein Nutzer ihn besucht, besteht ein Problem darin, dass die Anzeige möglicherweise nicht sofort geladen wird. Es kann geladen werden, nachdem die Seite bereits geladen ist, und wenn dies der Fall ist, ändert sich das Layout. Dies ist sehr häufig bei responsiven Anzeigenblöcken der Fall. Damit ist es unmöglich, die CLS-Metrik zu bestehen.

Der beste Weg, dies zu handhaben, besteht darin, Ihren AdSense-Code ein wenig zu bearbeiten. Keine Sorge, es ist sehr legitim. Geben Sie einfach das Größenattribut für die Anzeige an, insbesondere die Höhe. Danach werden Sie beim Laden der Anzeige keine Layoutverschiebung mehr bemerken.

Unten sehen Sie ein Beispiel für einen responsiven Anzeigenblock, den ich in meinem Blog direkt unter der Kopfzeile verwendet habe. Ich habe meine Publisher-ID und Anzeigenfläche durch XXXXXX ersetzt. Beachten Sie, dass ich das Höhenattribut hinzugefügt habe (min-height: 300px). In dem Moment, als ich das tat, waren alle CLS-Probleme für immer verschwunden.

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Header ad --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

Dadurch wird diese Größe auf der Seite reserviert. Wenn also Anzeigen erscheinen, gibt es keine Layoutverschiebung, da Sie die Größe bereits festgelegt haben.

8. Legen Sie das Größenattribut für Ihre Bilder und andere Medien fest

Genau wie bei Anzeigen können Bilder und andere Medien Layoutverschiebungen verursachen, wenn sie auf Ihre Website geladen werden. Vielleicht lesen Sie gerade etwas, dann lädt ein Bild und plötzlich ändert sich das Layout, was Sie gerade gelesen haben, ist nicht mehr sichtbar und Sie sehen nur etwas anderes oder Sie klicken sogar versehentlich auf etwas anderes.

Sie können all dies vermeiden, indem Sie das Größenattribut für Ihre Mediendateien festlegen. Ihre CLS-Metrik wird es Ihnen danken.

9. Lazy Load-Bilder.

Möglicherweise haben Sie den Rat auf PageSpeed ​​Insight gesehen, Offscreen-Bilder zu verschieben. Was es einfach bedeutet, ist, Ihre Bilder faul zu laden.

Lazy Loading reduziert die Seitengröße und auch die Ladezeit Ihrer Seite, wenn ein Benutzer sie besucht. Das ist gut für CWV-Metriken.

Dies wird insbesondere zur Verbesserung des LCP beitragen.

10. Optimieren Sie CSS, indem Sie kritisches CSS minimieren und generieren

CSS lässt eine Website cool aussehen, aber eine große CSS-Datei kann ein großes Problem darstellen, da sie die Darstellung der Seite für den Benutzer verzögert.

Wenn ein Benutzer Ihre Website besucht, verzögert der Browser durch normales Verhalten die Wiedergabe Ihrer Webseite für den Benutzer, bis er alle CSS geladen, analysiert und ausgeführt hat, auf die in Ihrem Webseiten-Header verwiesen wird. Wenn Sie eine große CSS-Datei haben, kann dies ein großes Problem sein. Es wird Ihre Website verlangsamen.

Critical CSS kann helfen, indem es nur das CSS lädt, das zum Laden der Seite erforderlich ist. Während der Rest des CSS asynchron geladen werden kann.

Es kann auch hilfreich sein, Ihr CSS zu verkleinern, indem Sie Leerzeichen und Kommentare entfernen, um die Dateigröße zu reduzieren.

Sie können auch unbenutztes CSS entfernen. Wenn ein Dienst, den Sie verwenden, CSS überträgt, die nicht verwendet werden, können Sie diese sicher entfernen.

Wenn Sie WordPress verwenden, gibt es Plugins wie WP Rocket, LiteSpeed ​​Cache, FlyingPress und andere, die Ihnen dabei helfen können.

11. Implementieren Sie das intelligente Laden von AdSense

Diese Methode kann fast alle Herausforderungen beseitigen, wenn AdSense für die Verlangsamung Ihrer Website verantwortlich ist.

Hier geht es darum, AdSense auf intelligente Weise zu laden. AdSense wird erst geladen, wenn ein Nutzer eine Aktion wie Scrollen oder Klicken ausführt. Dadurch werden die Ladezeit und alle von AdSense betroffenen Core Web Vitals erheblich verbessert.

Es gibt viele WordPress-Plugins, die Ihnen dabei helfen können, WP Rocket und Flying Scripts sind ein Beispiel. Soweit ich weiß, verstößt diese Methode nicht gegen die Google AdSense-Richtlinie.

Hinweis: Diese Methode kann zwar dazu beitragen, die wahrgenommene Geschwindigkeit und Seitenergebnisse zu verbessern, sie kann sich jedoch auf Ihren AdSense-Umsatz auswirken. Ich empfehle Ihnen, ein Experiment durchzuführen, um sicherzugehen, ob es sich lohnt

12. Verwenden Sie nach Möglichkeit die Schriftart System Stack

Schriftarten erhöhen die Ladezeit auf jeder Website. Und bei Webseiten ohne Bilder könnte Ihr Textblock für Ihre LCP-Bewertung verantwortlich sein. In diesem Fall wird Ihr LCP-Score direkt von Ihrer Schriftart beeinflusst.

Während sich Google Font und Font Awesome weiter verbessern, bietet die Verwendung von System-Stack-Fonts eine deutliche Verbesserung. Je nach Gerät allerdings nicht so phantasievoll.

13. Verwenden Sie ein CDN

Wenn Sie Benutzer aus verschiedenen Teilen der Welt haben, kann die Verwendung eines CDN dazu beitragen, Ihre Geschwindigkeit und indirekt Ihre Core Web Vitals-Metriken zu verbessern.

Ein einfach erklärter CDN erstellt viele Kopien Ihrer Website und speichert sie an verschiedenen Points of Presence (POPs) in verschiedenen Teilen der Welt. Wenn jemand Ihre Website anfordert, wird Ihre Website vom nächstgelegenen Standort aus bedient.

Wenn Ihre Website beispielsweise in den Vereinigten Staaten gehostet wird und Sie einen Besucher aus dem Vereinigten Königreich haben, stellt das CDN Ihre Website aus dem Vereinigten Königreich bereit, anstatt Ihre Website aus den Vereinigten Staaten abzurufen. Der Effekt davon wird eine schnelle Lieferung sein. Geschwindigkeit.

Sie können die besten CDNs da draußen auschecken.

14. Richten Sie den DNS-Vorabruf ein

Wenn Sie sich für die Bereitstellung Ihrer Website auf einen externen Dienst wie ein CDN verlassen, müssen Sie möglicherweise ein DNS-Prefetching einrichten, um Verzögerungen aufgrund der DNS-Suche zu minimieren.

Beim DNS-Vorabruf wird das DNS vorab abgerufen, bevor es aufgerufen wird. Damit es sofort geladen wird, wenn es schließlich aufgerufen wird.

15. Optimieren Sie Skripte von Drittanbietern

Stellen Sie sicher, dass einige der Dienste, die Sie auf Ihrer Website verwenden, keine Skripts von Drittanbietern hinzufügen, die Ihre Websites verlangsamen könnten.

Sie können die Lösung durch Anfragen von Drittanbietern ersetzen, die Ihre Website durch eine bessere Lösung verlangsamen.

Bei Google AdSense, einem weiteren Skript eines Drittanbieters, können Sie wenig tun. Am besten verwenden Sie maximal 3 Anzeigen vereint auf einer Seite. Vermeiden Sie Matched-Inhalte, da dies ein geringes Einkommen bringt, aber die Ladezeit verlängert.

16. Entfernen Sie AdSense von „above the fold“.

Dieser Rat basiert auf Experimenten. Wenn alle Ihre Metriken im Search Console-Bericht außer LCP gut sind, stellen Sie zunächst sicher, dass Ihre Bilder und Schriftarten optimiert sind. Wenn sie optimiert sind und das LCP immer noch fehlschlägt, könnte AdSense dafür verantwortlich sein.

Wenn Sie es sich leisten können, entfernen Sie AdSense für einen Monat von Above the Fold und sehen Sie, ob das Problem behoben ist.

Wenn Sie es nicht entfernen möchten, können Sie es manuell oder mit Hilfe eines Plugins wie Flying Scripts verzögern.

17. Wechseln Sie zu AMP

AMP bedeutet Accelerated Mobile Pages. Die Idee von AMP ist es, Webseiten so zu optimieren, dass sie auf Mobilgeräten schneller geladen werden. Und natürlich wurde das AMP-Open-Source-Projekt von Google gestartet.

Während AMP ursprünglich dazu gedacht war, mobile Seiten zu beschleunigen, kann es auch Desktop-Seiten beschleunigen.

AMP-Seiten sind durchweg schneller als mobile oder Desktop-Seiten, nach unserer Beobachtung manchmal um über 100 %.

Wenn die einzige Monetarisierungsstrategie Ihrer Website Google AdSense ist, können Sie erwägen, Ihre gesamte Website auf AMP umzustellen. Ich habe persönlich festgestellt, dass AdSense auf einem Blog, den ich besitze, auf AMP-Seiten manchmal mehr konvertiert als auf Mobilgeräten und Desktops!

Fazit

Die Core Web Vitals können Ihnen dabei helfen, Ihre Website für Ihre Nutzer zu verbessern, nicht nur für Google. Es kommt sehr häufig vor, dass man ein gutes Labordatentestergebnis, aber ein schlechtes Felddatenergebnis hat.

Dies liegt an der Zusammensetzung Ihrer Benutzer. Wenn die meisten Ihrer Benutzer von Orten mit langsamem Internet stammen, haben Sie möglicherweise gute Arbeit bei der Optimierung geleistet, aber immer noch Fehler bei den Felddaten gemacht.