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

Das Rennen 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, werden den Core Web Vitals-Test mit 10-mal höherer Wahrscheinlichkeit nicht bestehen als dieselbe Website ohne Google AdSense. Dies ist hauptsächlich auf die Anzahl der Anfragen und Assets von Drittanbietern zurückzuführen, die Google AdSense 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", besteht die Wahrscheinlichkeit, dass Sie auch den Core Web Vitals-Test nicht bestehen.

Wenn Sie sich bisher schwer getan haben, den Core Web Vitals Test zu bestehen und Ihre Suchmaschinen-Ranking-Potenziale zu verbessern, finden Sie in diesem Artikel praktische Lösungen.

Was sind Core Web Vitals?

Core Web Vitals sind von Google Lighthouse unterstützte Metriken, die bestimmen, wie eine Website eine gute Seitenerfahrung liefert. 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 Webseiten-Positionen in den Suchergebnissen verwendet werden.

Zusammenfassend kann man sagen, dass Core Web Vitals kein Terror für Webmaster sein sollte, sondern ein Mittel zur Verbesserung der Seitenerfahrung von Websites.

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

Erste Eingangsverzögerung (FID): FID misst die Interaktivität von Webseiten. Dies hängt davon ab, wie lange es dauert, bis der Browser mit der Verarbeitung von Ereignishandlern beginnt, nachdem ein Benutzer auf Ihre Website geklickt hat. Dies wird allgemein als erster Eindruck Ihrer Website bezeichnet. Die erforderliche Zeit zum Vergehen beträgt 100 Millisekunden.

Kumulative Layoutverschiebung (CLS): CLS misst Layoutverschiebungen, die auf einer Webseite auftreten. 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 bestehen müssen, ist 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 aufzähle, möglicherweise nicht zu den gewünschten Ergebnissen. Je schneller Ihr Server auf Anfragen reagiert, desto besser.

Warum ist ein Webhost 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 für alles andere. Wenn Sie Benutzer in Städten mit langsamem Internet haben, ist die Reaktionsgeschwindigkeit Ihres Webhosts entscheidend. Jeder Webhost kann eine gute Leistung erbringen, 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.

Bei der Auswahl a Web-Host, stellen Sie immer sicher, dass ein Rechenzentrum näher an der Mehrheit Ihrer Website-Benutzer ist. Sie können ihre Standorte finden, indem Sie sich Ihre Analysen ansehen. Woher kommen die meisten Ihrer Nutzer? Wählen Sie ein Rechenzentrum, das näher an ihnen liegt. Je näher desto besser.

Ich habe persönlich eine signifikante Änderung in den Field Data of Core Web Vitals einer Website 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 Affiliates ohne Aufrichtigkeit getrieben werden. Wenn Sie WordPress verwenden und es sich leisten können, kann ich es wärmstens empfehlen Kinsta. Sie sind die besten für WordPress. Wenn Sie etwas billigeres benötigen oder WordPress nicht verwenden, dann Cloudways ist auch sehr effektiv.

2. Verwenden Sie ein leichtes und geschwindigkeitsoptimiertes Theme

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

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

Es gibt eine lange Liste von Best Practices, nach denen Sie in einem Theme suchen sollten. Einige der häufigsten schlechten Praktiken sind zu stark von JQuery abhängig, laden zu viele CSS/JS, wenn sie nicht benötigt werden, große Themes und mehr. Du kannst immer ein Tool wie verwenden Gelbe Labore, um die Demo zu testen.

Wenn Sie WordPress verwenden, können Sie die Liste der schnellste WordPress-Themes.

3. Optimiere deine Bilder

Bilder sind cool. Sie machen Inhalte so attraktiv. 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 beim Besuch Ihrer Website vor dem Scrollen sichtbar sind, wirken sie sich definitiv auf Ihre LCP-Kennzahl 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. Entfernen oder verkleinern Sie Hintergrundbilder

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, wird diese Website vom Browser zwischengespeichert. Bei jedem anderen 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 Ihnen dabei helfen, dies zu erreichen.

6. JavaScript minimieren und ungenutztes JavaScript zurückstellen

Obwohl JavaScript erstaunlich ist, blockiert es oft das Rendern. Dies bedeutet, dass es sich auf Ihre Ladezeit und letztendlich auf Ihren 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 nicht kritisches 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. AdSense-Größenattribut festlegen

Wenn Sie AdSense auf Ihrer Website ausführen und Probleme mit CLS 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 beim Besuch eines Nutzers sichtbar ist, besteht ein Problem darin, dass die Anzeige möglicherweise nicht sofort geladen wird. Es kann geladen werden, nachdem die Seite bereits geladen wurde, und wenn dies der Fall ist, gibt es eine Verschiebung im Layout. Dies ist bei responsiven Anzeigenblöcken sehr üblich. In diesem Fall ist es unmöglich, die CLS-Metrik zu übergeben.

Der beste Weg, dies zu beheben, 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. Ich habe bemerkt, 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"
     style="display:block; min-height: 300px"
     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 Anzeigen erscheinen, gibt es also keine Layoutverschiebung, da Sie die Größe bereits festgelegt haben.

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

Wie bei Anzeigen können Bilder und andere Medien beim Laden auf Ihrer Website zu Layoutverschiebungen führen. Vielleicht lesen Sie gerade etwas, dann wird ein Bild geladen und plötzlich gibt es eine Layoutverschiebung, das Gelesene ist nicht 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-Kennzahl wird Sie glücklich machen.

9. Lazy-Load-Bilder.

Vielleicht haben Sie die Ratschläge zu PageSpeed ​​Insight gesehen, um Offscreen-Bilder verschieben. Was es einfach bedeutet, ist, Ihre Bilder träge zu laden.

Was Lazy Loading bewirkt, ist die Seitengröße zu reduzieren und auch die Ladezeit Ihrer Seite beim Besuch eines Benutzers zu verkürzen. Das ist gut für CWV-Metriken.

Dies wird insbesondere dazu beitragen, das LCP zu verbessern.

10. Optimieren Sie CSS durch Verkleinern und Generieren kritischer CSS

CSS ist das, was eine Website cool aussehen lässt, aber eine große CSS-Datei kann ein großes Problem sein, 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 das Rendern 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.

Kritisches CSS kann helfen, indem nur das CSS geladen wird, das zum Laden der Seite erforderlich ist. Während der Rest des CSS asynchron geladen werden kann.

Auch das Verkleinern Ihres CSS durch Entfernen von Leerzeichen und Kommentaren, um die Dateigröße zu reduzieren, kann hilfreich sein.

Sie können uns auch Entfernen Sie ungenutztes CSS. Wenn ein von Ihnen verwendeter Dienst nicht verwendete CSS per Push überträgt, 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 AdSense Smart Loading

Diese Methode kann alle Herausforderungen fast vollständig 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. Diese Methode verstößt meines Wissens nicht gegen die Google AdSense-Richtlinien.

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

12. Verwenden Sie die System Stack-Schriftart, wenn Sie können

Schriftarten fügen auf jeder Website zusätzliche Ladezeit hinzu. Und bei Webseiten ohne Bilder kann 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-Schriftarten eine erhebliche 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 CDN in einfacher Erklärung erstellt viele Kopien Ihrer Website und speichert sie in verschiedenen Point 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, wird Ihre Website vom CDN aus dem Vereinigten Königreich bereitgestellt, anstatt Ihre Website aus den Vereinigten Staaten abzurufen. Der Effekt davon wird eine schnelle Lieferung sein. Geschwindigkeit.

Sie können zur Kasse gehen beste CDNs dort draußen.

14. DNS-Prefetching einrichten

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 von DNS-Lookups zu minimieren.

Beim DNS-Prefetching wird das DNS vorab abgerufen, bevor es aufgerufen wird. Damit es im Handumdrehen geladen wird, wenn es endlich aufgerufen wird.

15. Optimieren Sie Skripte von Drittanbietern

Stellen Sie sicher, dass einige der Dienste, die Sie auf Ihrer Site verwenden, keine Skripts von Drittanbietern hinzufügen, die Ihre Sites 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 Drittanbieter-Skript, können Sie wenig tun. Am besten verwenden Sie maximal 3 Anzeigen auf einer Seite. Vermeiden Sie übereinstimmende Inhalte, da sie geringe Einnahmen bringen, aber die Ladezeit verlängern.

16. Entfernen Sie AdSense von oben

Dieser Rat basiert auf Experimenten. Wenn alle Ihre Messwerte im Suchkonsolenbericht mit Ausnahme von LCP gut sind, stellen Sie zunächst sicher, dass Ihre Bilder und Schriftarten optimiert sind. Wenn sie optimiert sind und Sie LCP immer noch nicht bestehen, ist möglicherweise AdSense verantwortlich.

Wenn Sie es sich leisten können, entfernen Sie AdSense für einen Monat von oben und prüfen 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 steht für Accelerated Mobile Pages. Die Idee von AMP besteht darin, Webseiten so zu optimieren, dass sie auf Mobilgeräten schneller geladen werden. Und natürlich der AMP Open-Source- Projekt wurde 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, unserer Beobachtung zufolge manchmal um über 100 %.

Wenn die einzige Monetarisierungsstrategie Ihrer Website Google AdSense ist, können Sie Ihre gesamte Website auf AMP umstellen. Mir ist persönlich aufgefallen, dass AdSense auf AMP-Seiten in einem Blog, das ich besitze, manchmal mehr Conversions erzielt als auf Mobilgeräten und Desktop-Computern!

Fazit

Die Core Web Vitals können Ihnen dabei helfen, Ihre Website für Ihre Nutzer zu verbessern, nicht nur für Google. Es ist sehr üblich, ein gutes Ergebnis für Labordatentests, aber ein schlechtes Ergebnis für Felddaten zu haben.

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