Google hat ein neues Algorithmus-Update angekündigt, das die SERPs, SEO und Website-Entwicklung beeinflussen wird – vielleicht sogar ziemlich dramatisch.

Zusammenfassend lässt sich sagen, dass sich beim neuen Update alles um die „Page Experience“ dreht. Die Idee ist einfach: Nutzer wollen ihre Informationen, sie wollen sie jetzt und sie wollen sie einfach. Es handelt sich dabei um einen Trend, dem Google in letzter Zeit immer stärker fokussiert. Bei der Suchmaschinenoptimierung geht somit nicht nur um Marketing, Content und Keywords, sondern auch immer mehr Entwicklung und Netzwerkmanagement.

Natürlich war eine professionell und richtig entwickelte Website schon immer wichtig, aber dieses neue Update leitet eine große Veränderung in dieser Richtung ein. Webseiten müssen Inhalte schnell und effizient bereitstellen ohne lästige Webseitenelemente, die das Surfen unterbrechen, wie z. B. aufdringliche Werbeeinblendungen. Auch schlechte Entwicklungsentscheidungen, die die User Experience beeinträchtigen oder Einsparungen an der Hosting-Umgebung, so dass der Datentransfer verkrampft ist und die Inhalte nur schleppend vorankommen werden sich in Zukunft verstärkt negativ auf die Suchmaschinenoptimierung auswirken.

Vom Standpunkt des Anwenders aus betrachtet, klingt das eigentlich nach einer tollen Idee.

Auch aus Entwicklersicht klingt das sicher nach einer großartigen Idee, aber wie bei allen Algorithmus-Updates ist es auch ein wenig beängstigend, denn die Wahrheit ist, dass es hier nicht darum geht, ein gutes Nutzererlebnis zu bieten, um an der Spitze zu bleiben. Es geht darum, Google zu beweisen, dass man das bieten kann, was sie als gute User Experience bezeichnen, um weiterhin gute Keyword-Rankings zu erreichen.

Der große Vorteil bei diesem Update ist, dass Google klar kommuniziert, um was es bei diesem Update geht. Lassen Sie uns also in diesem Beitrag die neuen Bewertungskriterien etwas näher unter die Lupe nehmen.

Die Page Experience – in Zukunft wichtiger Rankingfaktor.

Seit es Google gibt, passiert im Grunde nach einem größeren Update immer dasselbe:

  • Google veröffentlicht ein Update, dass die Art und Weise des Suchens verändert.
  • Viele Webseitenbetreiber sind verunsichert und versuchen sich anzupassen.
  • Experten informieren sich, schlagen daraus einen Vorteil und bleiben in den SERPs ganz oben.

Es gibt keinen Grund, hier in Panik zu verfallen, aber es gibt definitiv einen Grund, Maßnahmen zu ergreifen. Wenn Google seine Core Web Vitals so stark gewichtet, wie sie behaupten, muss sich die Branche in diese Richtung bewegen.

Messen der Page Experience.

Wie bei jeder Website ist es entscheidend, dass sich echte Menschen durch den Inhalt klicken, die Funktionalität testen und jede Seite in verschiedenen Browsern auf verschiedenen Geräten doppelt überprüfen. Aber denken Sie daran – der Schiedsrichter ist hier ein Algorithmus, kein menschliches Wesen, also müssen wir den Algorithmus besänftigen, bevor er unsere Inhalte bequem für echte Menschen zugänglich macht.

Google bietet SEOs 2 Möglichkeiten, um zu checken, wo noch entsprechendes Optimierungspotenzial vorhanden ist:

  • Der neue Bereich „Core Web Vitals“ in der Search Console.
  • Die neue Version von Google PageSpeed Insights

Core Web Vitals in der Search Console.

Die Google Search Console ist ein sehr praktisches Tool. Sie können damit die Indexierbarkeit Ihrer Website überprüfen, die Performance von Seiten in den Suchergebnissen einsehen, Probleme mit einzelnen Urls untersuchen und vieles mehr.

Wenn Sie mit der Anwendung vertraut sind, haben Sie vielleicht eine Änderung im Abschnitt „Verbesserungen“ in der Seitenleiste bemerkt. Was früher PageSpeed war, wurde durch Core Web Vitals ersetzt. Dort bekommen Sie Informationen darüber, was auf Ihrer Website diesbezüglich gut funktioniert und was nicht:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

PageSpeed Insights.

Wenn Ihre Website noch nicht für Core Web Vitals untersucht wurde, empfiehlt Google die Verwendung seines PageSpeed Insights-Tools.

Dieses Tool wurde kürzlich aktualisiert, um die neuen Core Web Vitals-Metriken zu berücksichtigen, aber es ist schon eine ganze Weile im Einsatz. Das Tool hat in der Vergangenheit einige Probleme verursacht, über die Entwickler frustriert in verschiedenen Fachforen ausführlich berichtet haben.

  • Für viele Webseiten würden Sie jedes Mal, wenn Sie das Tool ausführen, einen deutlich anderen Wert erhalten, selbst wenn Sie keine Änderungen vornehmen.
  • Viele Scores wurden stupide ausgewertet. Ein Beispiel: Sagen wir, Sie haben ein Bild auf Ihrer Seite, das 100k groß ist, aber es könnte auf 50k optimiert werden. Das Tool würde Ihnen 50 % Ineffizienz anrechnen, was zu verzerrten Ergebnissen führt, weil sich eine Reduzierung der Bildgröße nicht proportional auf die Reduzierung der Ladezeit niederschlägt.
  • Das Tool bot an, die Probleme für Sie zu „beheben“, indem es einen Download von Ressourcen bereitstellte, die Sie verwenden konnten, um die vorhandenen Ressourcen auf Ihrer Website zu ersetzen:
    • Minimierung von CSS- und Javascript-Dateien.
    • „Optimieren“ Ihrer Bilder mit so viel Komprimierung, dass sie am Ende verpixelt aussehen.

Jüngste Updates scheinen einige dieser Probleme zu verbessern, daher wird es interessant sein, zu sehen, wie wichtig die Vorschläge sein werden. Als allgemeine Regel sagt Google, dass Sie auf dem richtigen Weg sind, wenn Sie um die 75 Punkte erreichen.

Ich habe einige erste Tests durchgeführt, mit sehr interessanten Ergebnissen. In fast allen Fällen wurden meine Scores ziemlich schlecht bewertet aufgrund von:

  • Drittanbieter-Javascript
  • Javascript-Code, der geladen, aber nicht verwendet wird

Laut dem Tool konnte ich die folgenden Top-Ressourcenfresser lokalisieren:

  1. Googe Maps
  2. YouTube
  3. Google Analytics
  4. Google Fonts
  5. Google Tag Manager

Page Experience und Core Web Vitals.

Google sagt dazu:

„Das Page Experience Signal misst Aspekte, wie Benutzer die Erfahrung der Interaktion mit einer Webseite wahrnehmen. Die Optimierung für diese Faktoren macht das Web für Benutzer über alle Webbrowser und Oberflächen hinweg angenehmer und hilft Webseiten, sich an die Erwartungen der Benutzer auf Mobilgeräten anzupassen. Wir glauben, dass dies zum geschäftlichen Erfolg im Web beitragen wird, da das User-Engagement steigt und mit weniger Reibung Transaktionen durchführen können.“

Die Page Experience wird anhand der folgenden Kriterien bewertet:

  • Mobilfreundlichkeit
  • Sicheres Browsen
  • HTTPS-Sicherheit
  • Vermeiden von lästigen PopUps
  • Core Web Vitals (neu)
    • Largest Contentful Paint
    • First Input Delay
    • Cumulative Layout Shift

Im Folgenden werde ich etwas näher auf die neuen Bewertungskriterien eingehen.

Largest Contentful Paint.

„Painting“ bedeutet in diesem Zusammenhang das Rendern einer Ressource auf einem Bildschirm. Je größer die Ressource ist, desto länger braucht ein Browser, um diese Ressource herunterzuladen und sie für den Besucher zu „painten“.

Lange Wartezeiten sind schlecht fürs Geschäft. Sie sind frustrierend und ermutigen den Besucher, Ihre Seite zu verlassen und die Informationen woanders zu suchen. Google definiert eine „lange Wartezeit“ als alles, was länger als 2,5 Sekunden dauert, nachdem die Seite zum ersten Mal geladen wurde, was nicht sehr lang ist.

In allen Fällen ist es das Ziel des Entwicklers, die Menge der Daten, die eine Seite laden muss, zu reduzieren und die Geschwindigkeit, mit der die Daten übertragen werden können, zu erhöhen. Wie gut man das erreichen kann, hängt davon ab, welche Ressourcen geladen werden müssen. Zudem spielt die Hosting-Umgebung in diesem Zusammenhang eine sehr wichtige Rolle.

Ressourcen.

Die größten Ressourcen werden unweigerlich Videos und Bilder sein. Wenn Sie diese verwenden, sollten Sie sich immer bemühen, die Medien für das Web zu optimieren. Das bedeutet:

Videos:

  • Komprimieren Sie die Videodatei.
  • Konfiguration der Videoauflösung.
  • Wenn kein Ton notwendig ist, dann entfernen Sie diesen.

Bilder.

  • Bilder auf die benötigte Größe komprimieren.
  • Bei der Darstellung auf einem mobilen Gerät müssen die meisten Bilder nicht breiter als 800px sein.
  • Bei der Präsentation auf einem Desktop-Computer müssen die meisten Bilder nicht breiter als 1600px sein.
  • Komprimieren Sie immer mit einer Bildoptimierungssoftware
    • Betrachten Sie zuerst die nicht verlustbehaftete Komprimierung
    • Wenn die Datei bei verlustfreier Komprimierung immer noch zu groß ist, verwenden Sie die verlustbehaftete Komprimierung

Die Hostingumgebung.

Ein kritischer Aspekt der Ladeperformance – den viele Entwickler übersehen – ist die Hosting-Umgebung der Website.

Anbei ein Beispiel: Sie sind ein Rennwagenfahrer. Sie kennen die Strecke, auf der Sie fahren, in- und auswendig. Sie haben jede Kurve millionenfach geübt, Sie wissen genau, was Sie erwartet, wenn Sie um jede Ecke fahren und Sie haben sogar ein paar Abkürzungen entdeckt, um Ihre Zeit zu minimieren. Das heißt, die Strecke ist optimiert. In diesem Beispiel ist das Webhosting nun das Auto, das Sie fahren. Egal wie gut die Strecke optimiert ist, wenn Sie ein bestimmtes Auto haben, werden Sie eine bestimmte Zeit haben. Andere Fahrer werden Sie überholen, auch wenn Sie die Strecke in- und auswendig kennen.

Entwickler greifen häufig auf günstiges Webhosting zurück, weil:

  • Sie nicht das Geld für eine echte Hosting-Umgebung ausgeben wollen,
  • Sie wissen nicht, wie sie die Umgebung selbst einrichten können, also verwenden sie aus Bequemlichkeit vorgefertigte Optionen.

Sollte bei diesen Fragen Hilfe benötigen, wenden Sie sich an einen professionellen Anbieter.

First Input Delay.

First Input Delay ist die Messung, wie lange es dauert, bis jemand mit Ihrer Webseite interagieren kann. Die Stoppuhr beginnt beim Laden der Seite und erreicht ihren Höhepunkt, sobald der Besucher die volle Kontrolle übernehmen kann.

Anbei eine kurze Erklärung warum First Input Delay für Google wichtig ist. Angenommen, Sie suchen nach Informationen. Sie rufen eine Webseite auf und in der Mitte des Contents befindet sich ein Button auf den Sie klicken können, um mehr zu erfahren. Sie klicken auf den Button und nichts passiert.

Auf den User wirkt dies verwirrend. Warum hat es nicht geklappt? Er ist sich sicher, dass er nicht danebengeklickt und das Ziel verfehlt hat. Also was ist das Problem? Funktioniert der Button nicht? Ist es überhaupt ein Button? Vielleicht ist es auch nur eine Grafik, die irgendwie wie ein Button aussieht. Sie klicken erneut darauf – und seltsam, diesmal funktioniert es.

Dies bezeichnet man als Input Delay (Eingabeverzögerung). Sie haben den Button gesehen und versucht, mit dem Button zu interagieren, bevor die Webseite Ihre Eingaben erfassen konnte. Das will natürlich niemand und es beeinträchtigt die User Experience. Google glaubt, dass diese Eingabeverzögerung sehr, sehr kurz sein sollte. Laut Google ist jede Eingabeverzögerung von mehr als 100 ms zu lang.

Das bedeutet, dass Ihre Webseiten bereit sein müssen, innerhalb eines Wimpernschlags zu interagieren.

Was verursacht eine Eingabeverzögerung? Große Medien oder andere schwere Ressourcen (wie z. B. Videos oder Bilder, wie im vorherigen Abschnitt beschrieben) sind eine Möglichkeit. Eine andere, sehr wahrscheinliche Möglichkeit ist, dass Javascript Schwierigkeiten hat, im Vordergrund zu laufen.

Ich werde hier nicht zu sehr ins Detail gehen, da die meisten Leute, die mit Webseiten arbeiten, zumindest ein rudimentäres Verständnis davon haben, was Javascript ist. Für den Kontext, werden wir nur darauf hinweisen, dass Javascript clientseitiger Code ist, der heruntergeladen, geparst und anschließend von Ihrem Browser interpretiert wird. Eine typische Anwendung für Javascript ist das Hinzufügen von Funktionen zu einer Webseite, die überall von Augenschmaus über Berechnungen bis hin zu Möglichkeiten für den Benutzer reichen können, mit einer Webseite zu interagieren, die mit HTML einfach nicht möglich sind.

Was verursacht die Langsamkeit von Javascript?

  • Sehr große Skripte
  • Schlecht geschriebene Skripte
  • Skripte, die auf andere Skripte angewiesen sind oder diese zum Laden benötigen, bevor sie richtig funktionieren
  • Skripte, die von ausgelasteten, langsamen oder billigen Hosting-Umgebungen geladen werden

Um für eine FID von 100 ms oder weniger zu optimieren, müssen Sie Ihren Code ziemlich clever gestalten und wählerisch mit Ihren Ressourcen umgehen. Hier sind einige Tipps.

  • Im Idealfall möchten Sie so viel Javascript wie möglich asynchronisieren/deferieren, damit der Code im Hintergrund fertig geladen werden kann, ohne den Besucher oder den Content, auf den er zuzugreifen versucht, zu behindern.
  • Erwägen Sie, so wenig externe Ressourcen wie möglich zu laden. Müssen Sie eine Javascript-Bibliothek wie jQuery verwenden? Laden Sie sie nicht von einem CDN herunter. Speichern Sie stattdessen eine minimierte Kopie der Bibliothek lokal auf der Website, wo jede Seite vom selben Server darauf zugreifen kann.
  • Fragen Sie sich, ob Sie überhaupt eine Javascript-Bibliothek wie jQuery benötigen. Wenn Sie damit lediglich eine E-Mail-Adresse validieren, ein Element fokussieren oder zu einer bestimmten Position auf der Seite scrollen, gibt es keinen Grund, eine ganze Reihe von Funktionen zu laden, die Sie nie benutzen werden, nur damit Sie eine von ihnen benutzen können. Wenn Ihre Bedürfnisse wirklich einfach sind, adressieren Sie sie, indem Sie eine einfache Funktion in Vanilla-Javascript schreiben.
  • Verwenden Sie Google Tag Manager und Google Analytics? Haben Sie sowohl das GTM-Skript als auch die GA-Skripte in Ihre HTML-Seite kopiert und eingefügt? Nun, das sind zwei externe Ressourcen, die geladen werden müssen! Binden Sie stattdessen Google Analytics über den Google Tag Manager ein. Im Internet werden Sie zahlreiche Anleitungen dazu finden.

Cumulative Layout Shift.

Hier bezieht sich eine Layout-Verschiebung auf Elemente, die sich ohne Eingaben des Benutzers auf einer Seite bewegen. Die kumulative Layout-Verschiebung ist die Messung aller einzelnen Elemente.

Einige Layout-Verschiebungen sind angemessen, notwendig und empfehlenswert. Zum Beispiel könnte eine Seite eine Umschalttaste haben, die, wenn sie angeklickt wird, zusätzliche Informationen über ein Produkt, an dem Sie interessiert sind, ein- oder ausblendet. Das Ein- und Ausblenden dieser Informationen verursacht eine Layoutverschiebung, aber es ist eine gute Layoutverschiebung, weil sie sich so verhält, wie der Benutzer es erwartet und der Benutzer hat die direkte Kontrolle darüber.

Eine Layout-Verschiebung ist nicht gut, wenn der Benutzer nicht damit rechnet, dass sie passiert. Angenommen, Sie besuchen eine Website und wollen auf einen Button klicken, dann springt der Button plötzlich woanders auf der Seite hin. Es ist wirklich ärgerlich, wenn Sie den Button suchen müssen und noch viel ärgerlicher, wenn Sie am Ende wegen der unerwarteten Verschiebung auf etwas anderes klicken.

Typischerweise treten schlechte Layout-Verschiebungen auf, wenn Ressourcen asynchron geladen werden oder wenn Ressourcen sehr langsam geladen werden. In den meisten Fällen sind diese Verschiebungen unbeabsichtigte Nebeneffekte von schlechten Programmierpraktiken, nachlässigem Oberflächendesign oder langsamen Hosting-Umgebungen, aber einige Websites fügen sie absichtlich ein, um einen Besucher dazu zu verleiten, auf eine Anzeige oder ein anderes Element zu klicken, mit dem er eigentlich nicht interagieren will. In allen Fällen sind sie lästig und verwirren das Benutzererlebnis.

In der Regel ist es besser, automatische Layoutverschiebungen zu vermeiden, wann immer dies möglich ist.

Wenn Sie sie verwenden müssen, nehmen Sie sich etwas Zeit, um zu überlegen, wie sich die Verschiebungen auf die Benutzererfahrung auswirken. Verhindern Sie auf jeden Fall die Verschiebung von Button oder anderen klickbaren Elementen, wann immer dies möglich ist und unterziehen Sie die Seite gründlichen Tests – nicht nur von Ihnen selbst. Beziehen Sie andere Teammitglieder mit ein und wenn Sie ein Entwickler sind, lassen Sie Ihren Kunden testen und nochmals testen. Es wird wahrscheinlich einige Nachbesserungen erfordern, um den Benutzer nicht zu behindern.

Wenn Layout-Verschiebungen ungewollt auftreten, ist das ein Problem. Die meisten dieser Probleme lassen sich lösen, wenn Sie sicherstellen, dass die Seitenressourcen schnell geladen werden. Wenn ein schnelles Laden jedoch nicht möglich ist, können Sie versuchen, Platz auf der Seite zuzuweisen, indem Sie die Größe des betreffenden Elements sorgfältig mit Inline-Styles, HTML-Attributen für Höhe und Breite oder CSS festlegen. Auf diese Weise wird, selbst wenn die Ressource eine Weile zum Laden braucht, der Platz, den sie einnehmen wird, vordefiniert sein und sie wird den Rest der Seite nicht durcheinander bringen.

Vielen Dank für Ihren Besuch.