Google’s neue Core Web Vitals – Gesundheit!

Kaum hat man die Grundkenntnisse des SEO halbwegs verstanden, kommt Google mit einem neuen Update um die Ecke.

Ab Mai 2021 werden die Core Web Vitals offiziell eingeführt und als einer von 200 Rankingfaktoren in Deiner Suchmaschinenoptimierung eine Rolle spielen.

Und wenn Du jetzt denkst, „Ich versteh‘ nur Bahnhof…“

…dann ist es Zeit für einen kleinen Ausflug in die Suchmaschinenoptimierung.

Um mit Deiner Website bei Google auf den ersten Plätzen zu landen und somit auf organische Weise mehr Besucher anzuziehen, spielen eine ganze Reihe von Faktoren rein.

Darunter natürlich das Offensichtliche: die verwendeten Keywords, die dann auf die jeweilige Suchanfrage passen, aber eben auch kleinere Faktoren wie z.B. wie viele Links auf Deine Seite zurück führen (sog. Backlinks), der Alt-Text in Deinen Bildern etc.

Google’s Ziel beim Website-Ranking ist es nämlich, dem Nutzer den bestmöglichen Content für seine Suchanfrage zu liefern. Deshalb spielen auch die Qualität und Aktualität Deiner Posts und natürlich die Nutzerfreundlichkeit Deiner Seite eine wichtige Rolle.

Um eben diese Nutzerfreundlichkeit zu messen, führt Google jetzt die Core Web Vitals ein. Das sind vor allem technische Signale, die eine Aussage darüber treffen sollen, ob Deine Seite von Besuchern gern genutzt wird.

Die bereits bekannten Signalen wie

  • Mobile Nutzerfreundlichkeit > ob Deine Seite auch in der mobilen Ansicht eine gute Figur macht
  • Safe Browsing > ob Deine Seite frei von Malware ist
  • https > ein SSL-Zertifikat gehört natürlich zum guten Ton
  • Vermeidung störender Einflüsse in der mobilen Erfahrung > z.B. ob der Text auch auf dem Handy noch lesbar ist und Buttons groß genug sind um sie auch ohne Maus anklicken zu können

bekommen jetzt noch Gesellschaft von 3 weiteren Faktoren.

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

Google Core Web Vitals

Falls Du jetzt das Bedürfnis hast, den Laptop zu zuklappen und Deinen Nachmittag mit angenehmeren Dingen zu füllen, kann ich Dich beruhigen: Es ging mir ganz genau so.

Deshalb brechen wir jetzt dieses Fachchinesisch in seine einfachsten Bestandteile runter und ich zeige Dir, wie Du diese Faktoren messen und verbessern kannst.

Alles halb so schlimm…

Google ist echt nett in dieser Hinsicht und gibt Dir sogar Vorschläge zur Verbesserung Deiner Core Web Vitals.

Falls Du bereits die Google Search Console installiert hast (große Empfehlung zur Suchmaschinenoptimierung), kannst Du sie dort unter dem Reiter Core Web Vitals anzeigen lassen. Oder Du gibst Deine URL (Adresse) unter Page Speed Insights ein. Du musst hier allerdings alle Unterseiten (Subdomains) Deiner Seite eigenhändig eingeben und analysieren lassen.

Nutzer des Google Chrome Browsers können unter den DevTools sogar Lighthouse aufrufen und von dort direkt alle Vitals checken. (Rechtsklick auf Deiner Seite -> Seite untersuchen -> dann den Reiter Lighthouse finden).

Sobald Du also Deine Core Web Vitals gemessen hast, bekommst Du einen Bildschirm, der in etwa so aussieht

PageSpeed PatriciaVA Mobile Version

…mit vielen bunten Farben, Zahlen und Fachwörtern.

HELP!

Ganz ruhig, Durchatmen!

Das Wichtigste zuerst: Google ist in seiner Messung extrem kritisch, denn wie bereits erwiesen, klickt ein Großteil der Nutzer einfach weiter, wenn eine Seite nicht in einer bestimmten Zeit lädt. Davon lassen wir uns aber nicht entmutigen. Selbst große Seiten wie z.B. Facebook schneiden im PageSpeed Test eher mau ab.

Ganz oben kannst Du zwischen der Mobilen und der Desktop Version Deiner Website wählen. Wie Du siehst,  ist meine Startseite in der mobilen Version eher im roten Bereich. Das liegt vor allem daran, dass mein DIVI Theme relativ viel Skript lädt und deshalb eine längere Ladezeit hat. Das nehme ich in Kauf, weil ich sonst vom Theme und dem DIVI Builder voll überzeugt bin.

Felddaten gibt es hier auch noch keine, da meine Seite erst ein paar Monate online ist.

Zu den Labdaten:

Die Core Vitals setzen sich aus den oben genannten 3 Faktoren zusammen:

  • Largest Contentful Paint (FCP)– misst die Zeit, die das größte grafische Element auf Deiner Seite benötigt um zu laden. In meinem Fall ist das mein Header Bild mit der Überschrift
  • First Input Delay (FID) – misst die Zeit, bis ein Nutzer mit Deiner Seite interagieren kann, z.B. sich irgendwo eintragen oder einen Button anklicken
  • Cumulative Layout Shift (CLS) – befasst sich mit der Stabilität Deiner Seite, also wie lange es dauert, bis alle Elemente an ihrem Platz sind und sich nicht mehr verschieben bzw. dem Bildschirm anpassen

dann fällt Dir vielleicht noch

  • First Contentful Paint (FCP) auf, und obwohl es nicht zu den Vitals gehört, ist die Zeit kritisch, da sie misst, wie lange es dauert bis das erste Element auf Deiner Seite geladen ist

Okay, jetzt haben wir also alle diese Daten und Zeiten. Und nun?

Wenn Du weiter scrollst, gibt Google Dir Verbesserungsvorschläge, was genau Du tun kannst, um Deine Zeiten zu verbessern und hoffentlich ins Grüne zu bewegen.

Schauen wir uns mal ein paar davon an:

  1. Erstreaktionszeit des Servers verringern: Hierfür kannst Du selbst erstmal nicht allzu viel tun, außer Dir einen exzellenten Hoster zu suchen. Je schneller der Server auf dem Deine Seite gehostet ist, desto kürzer die Reaktionszeit. Es kann helfen, diverse Plugins zu deaktivieren und Deine Website im Allgemeinen schlank und aufgeräumt zu halten.
  2. Ressourcen beseitigen, die das Rendering blockieren: Gemeint sind JavaSkripte und CSS Skripte die erst geladen werden müssen, bevor Deine Seite angezeigt werden kann. Um diese in eine Reihenfolge zu bringen, z.B. zeitversetzt zu laden, gibt es Plugins, die diese Skripte minimieren und aufschieben können.
  3. Nicht verwendete CSS entfernen & Nicht genutztes JavaScript entfernen: zielen auf Selbiges ab, wie oben genannt. z.B. wurde auf meiner Website auf allen Subdomains das Recaptcha Skript geladen, obwohl ich Recaptcha nur auf der Kontaktseite benötige. Nach dessen Deaktivierung machte ich schon 1 Sekunde wett.
  4. Weitere Verbesserungsvorschläge:
  • Einen schnellen Browsercache einrichten. Das speichert Dateien wie Bilder und Videos im Cache ab und diese können dann beim erneuten Aufruf der Seite abgerufen werden, ohne nochmals Ressourcen zu verwenden.
  • Bilder & Videos komprimieren und zu Web-freundlichen Dateien (z.B. webp) konvertieren.
  • LazyLoad einrichten, d.h. Elemente wie Bilder erst dann laden, wenn zu ihnen runtergescrollt wird.
  • Elementen eine fixe Position auf der Seite zuweisen. Das verhindert, dass sie sich beim Laden der Seite verschieben und bringt den Cumulative Layout Shift (CLS)-Wert nach unten.

Und mit etwasGeschick, kann das dann so aussehen:
PageSpeed PatriciaVA Desktop Version

Wie Du siehst besteht bei den Core Web Vitals eine ganze Menge Optimierungspotenzial. Welche (kostenlosen) Plugins ich für diese einzelnen Aufgaben empfehle, nachdem ich einen langen Trial & Error Prozess hinter mir habe, zeige ich Dir im nächsten Post.

Hast Du Fragen oder Kommentare? Dann schreib mir hier eine kurze Nachricht.

Und wenn Du Dich durch all das durchgearbeitet hast und denkst, „Oh nein, das ist mir alles viel zu anstrenged!“, dann kannst Du die Verwaltung Deiner Website gern mir überlassen und ich nehme die entsprechenden Anpassungen für Dich vor. Schau Dir hier mein Angebot an.

Hier kannst Du weiter lesen…

5 wichtige Kennzahlen für den Erfolg Deiner Website

5 wichtige Kennzahlen für den Erfolg Deiner Website

Fragst Du Dich manchmal, ob Deine Website tatsächlich für Dich arbeitet? Wenn ich eine Website in mein Maintenance-Programm aufnehme oder mit einer Kundin einen Re-Launch plane, dann ist eine der ersten Stationen die "IST-Analyse". Denn viele haben das Gefühl, dass...

Divi Quick-Tip #2 – Hamburger Menus ausschalten

Divi Quick-Tip #2 – Hamburger Menus ausschalten

Der erste DIVI Quick-Tip ist tatsächlich schon ein bisschen her, aber da das Format so gut ankam, dachte ich, wir könnten die Reihe wieder aufleben lassen. Heute soll es also um Hamburger Menüs gehen - und nein, ich rede nicht von Big M*cs and Doppelten Cheeseburgern,...

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Eine Website ist Dein Aushängeschild im World Wide Web. Dort finden Dich Deine Kunden, dort können sie mit Dir Kontakt aufnehmen oder mehr über Dich erfahren. Und genauso wie Deine Visitenkarte sollte sie immer schön gepflegt und brandneu aussehen. Da kann ein...

Inhaltsverzeichnis