Wachstumstaktiken für Verlage für die Wahlsaison | WEBINAR
Wachstumstaktiken für Verlage für die Wahlsaison | WEBINAR
Am Ende dieses Moduls sollten Sie ein klares Verständnis der verschiedenen Komponenten haben, die zur Seitenerfahrung beitragen, warum diese wichtig sind und wie jede einzelne optimiert werden kann, um sowohl die Benutzerfreundlichkeit Ihrer Website als auch deren Suchmaschinenoptimierung zu verbessern.
Videodauer
17:09
Quiz beantworten
Nehmen Sie das aktuelle Modulquiz
Materialien
Gebrauchsfertige Vorlagen
Ressourcen
Berichte und Ressourcen
2.3.1 Was ist Seitenerfahrung?
Die Seitenerfahrung ist eine Reihe von Signalen – darunter Core Web Vitals (CWVs), Mobilfreundlichkeit, HTTPS und Richtlinien für aufdringliche Interstitials –, die Google verwendet, um die Benutzererfahrung auf einer Website zu extrapolieren.
Die Nutzererfahrung auf einer Seite bewertet deren Leistung und nicht deren Inhalte. Obwohl Google bei der Beantwortung von Nutzeranfragen weiterhin Wert auf die Relevanz der Inhalte legt, dient die Nutzererfahrung als Entscheidungskriterium, wenn mehrere Websites einen ähnlichen Informationsumfang bieten.
Die vierseitigen Erlebnissignale sind:
CWVs messen die Nutzererfahrung, indem sie die Ladezeit einer Seite, ihre Reaktionsfähigkeit auf Nutzereingaben und ihre visuelle Stabilität bewerten. Hierfür gibt es drei Metriken:
Mit dem Update von Google im April 2015 wurde die Kennzahl „Mobile-Friendly“ eingeführt, die das Ranking von mobilfreundlichen Seiten in den mobilen Suchergebnissen verbessert.
Google wird im Wesentlichen jene Websites priorisieren, die sicherstellen, dass ihre Inhalte auf mobilen Geräten gut lesbar sind – das heißt, es ist kein Zoomen erforderlich, Touch-Ziele wie Anmeldebuttons sind nicht zu nah beieinander, es gibt kein horizontales Scrollen und nicht abspielbare Inhalte werden vermieden.
Das Update betrifft einzelne Seiten, nicht ganze Websites, und hat auch keine Auswirkungen auf Inhalte, die auf Desktop-/Laptop-Browsern angezeigt werden.
HTTPS, oder Hypertext Transfer Protocol Secure, ist eine sichere Version des HTTP-Internetkommunikationsprotokolls.
HTTPS oder HTTP bildet den ersten Teil jeder URL, der als „Schema“ bezeichnet wird. Dieser steht vor dem Domainnamen, dem Teil der URL, der als „Autorität“ bekannt ist.
Der Unterschied zwischen HTTPS und HTTP besteht darin, dass HTTPS sicher ist, HTTP hingegen nicht. Das bedeutet in der Praxis, dass Benutzer, die sich über eine HTTP-Verbindung auf einer Website anmelden, ihre persönlichen Daten unverschlüsselt im Klartext senden.
HTTPS sichert diese Verbindung, das heißt, alle Daten, die zwischen dem Browser des Nutzers und dem Server der Website übertragen werden, werden verschlüsselt. Websites, die sichere Verbindungen wünschen, benötigen ein SSL-Zertifikat, das vom Browser des Nutzers überprüft wird.
Interstitials sind ein ausschließlich für Mobilgeräte verfügbares Anzeigenformat, das nur in natürlichen Pausen im Inhalt erscheint – beispielsweise wenn ein Nutzer von einem Artikel zum nächsten wechselt – und dabei den Bildschirm ausfüllt.
Interstitials gelten als aufdringlich, wenn sie die Sicht des Nutzers auf den Inhalt blockieren oder teilweise verdecken. Dialogfelder auf mobilen Webseiten, die sich ähnlich verhalten, fallen ebenfalls in diese Kategorie.
Die Stärken der meisten Verlage liegen in der Regel in der Erstellung, Veröffentlichung und Vermarktung von Inhalten, wodurch wenig Raum bleibt, die verschiedenen Säulen des Seitenerlebnisses zu verstehen und zu optimieren.
Aufgrund begrenzter Ressourcen wird es für Verlage schwierig sein, den Zeit- und Kostenaufwand zu rechtfertigen, der nötig ist, um sich mit dem Backend einzelner Webseiten auseinanderzusetzen, geschweige denn mit einer ganzen Website.
Selbst wenn Verlage Zeit haben, sich mit dem Problem auseinanderzusetzen, ist die Seitennutzung, wie wir oben sehen können, ein vielschichtiges Thema, das einen ganzheitlichen Ansatz erfordert, um sinnvolle Leistungssteigerungen zu erzielen.
Zu wissen, mit welchem der vierseitigen Erfahrungssignale man beginnen sollte, kann schon für sich genommen eine Herausforderung sein.
Die Seitennutzung ist für die Suchmaschinenoptimierung des Publishers unglaublich wichtig, denn großartiger Inhalt allein reicht nicht aus, um eine Top-Platzierung in den Suchergebnissen zu garantieren.
Google legt nach wie vor größten Wert auf erstklassige Informationen. Das bedeutet, dass einzigartige Inhalte oder exklusive Nachrichten auch dann gut abschneiden, wenn die Nutzererfahrung auf der Seite suboptimal ist . Bieten jedoch mehrere Verlage eine hervorragende thematische Berichterstattung, wird die Nutzererfahrung zu einem wichtigen Faktor, der das Ranking in den Suchergebnissen beeinflusst.
Jede der vier Säulen der Nutzererfahrung hat einen unterschiedlichen Einfluss auf die Suchmaschinenoptimierung einer Website. Der unmittelbarste Effekt ergibt sich aus der Fokussierung auf Conversion-Rate-Elemente (CWVs), was zu einer schnelleren Ladezeit der Website führt.
Zahlreiche Studien haben gezeigt, dass je länger eine Website zum Laden braucht, desto schneller das Interesse der Besucher nachlässt und desto höher die Absprungrate wird.
Eine Google-Studie aus dem Jahr 2018 ergab beispielsweise, dass die Absprungrate um 32 % anstieg, als die Seitenladezeit von 1 Sekunde auf 3 Sekunden erhöht wurde.
Eine weitere Google-Studie aus dem Jahr 2020 ergab, dass Nachrichtenseiten, die den CWV-Test bestanden, eine um 22 % niedrigere Abbruchrate als solche, die durchfielen. Yahoo! Japan verbesserte unterdessen seinen CLS-Wert um 0,2 Punkte und verzeichnete einen Anstieg der Seitenaufrufe pro Sitzung um 15,1 % sowie eine Verlängerung der Sitzungsdauer um 13,3 %.
Obwohl Google ausdrücklich erklärt hat, dass es Absprungraten nicht als Rankingfaktor verwendet , deutet eine hohe Absprungrate auf Faktoren hin, die Google sehr wohl wichtig sind – nämlich die Ladegeschwindigkeit, die Reaktionsfähigkeit und die visuelle Stabilität einer Seite.
Webseitenbetreiber, die mobile Nutzer ansprechen, müssen sicherstellen, dass ihre Webseite mobilfreundliche Signale aussendet, die sowohl von Google als auch von Bing erkannt werden. Beide Suchmaschinen priorisieren mobilfreundliche Webseiten bei der Auslieferung von Suchergebnissen an mobile Nutzer.
Im Vergleich zu Call-to-View-Funktionen und mobiler Optimierung hat die Implementierung von HTTPS deutlich geringere Auswirkungen auf die Suchmaschinenoptimierung (SEO) eines Publishers. Google kündigte 2014 an, HTTPS als Rankingfaktor zu nutzen und begann 2018, alle HTTP-Seiten in Chrome als „nicht sicher“ zu kennzeichnen. Der größte Vorteil liegt jedoch in der erhöhten Datensicherheit, insbesondere wenn Ihr Geschäftsmodell auf Abonnementumsätzen basiert.
Aufdringliche Zwischenanzeigen oder Dialogfelder können hingegen die Fähigkeit von Webcrawlern einschränken, eine Seite zu durchsuchen und zu indexieren, sodass Suchmaschinen sie nicht einmal einordnen können, geschweige denn in den Suchergebnissen weit oben erscheinen.
Der erste Schritt zur Verbesserung des Seitenerlebnisses besteht darin, die aktuelle Effektivität Ihrer Website zu bewerten.
Es gibt eine Vielzahl von Tools von Google selbst und Drittanbietern, um dies zu erreichen, aber in diesem Leitfaden werden wir uns die Tools von Google selbst ansehen.
Wir wissen nun, dass CWVs ein wichtiger Rankingfaktor sind. Doch wie werden sie gemessen? Die folgende Tabelle listet die Parameter auf, innerhalb derer optimale CWV-Werte für die beste Nutzererfahrung liegen sollten.
Nachdem wir nun wissen, was wir messen müssen und in welchem Umfang, können wir uns ansehen, wie wir die Seitennutzung messen können.
Nachfolgend finden Sie eine Liste einiger der am häufigsten verwendeten Methoden.
Die erste Option, die Verlagen offensteht, ist mit Abstand die technisch anspruchsvollste und wir würden sie nicht einmal in Erwägung ziehen, es sei denn, Sie haben einen guten Entwickler, der Sie bei der Umsetzung unterstützt.
Wir sprechen hier von der Erfassung von Nutzerdaten auf Ihrer Website, einem Prozess, der als Real User Monitoring (RUM) bekannt ist, und der anschließenden Analyse der Ergebnisse in Google Analytics 4 (GA4). Google bietet weitere Tools wie PageSpeed Insights (PSI) an, die mithilfe von Datenstichproben Ihre Website bewerten. Um jedoch ein umfassendes Bild der Nutzererfahrung auf Ihrer Website zu erhalten, benötigen Sie Daten aus der realen Nutzung, die direkt auf Ihrer Website erfasst werden.
Wir empfehlen für diese Aufgabe GA4 aus dem einfachen Grund, dass Google beabsichtigt, die vorherige Generation von Google Analytics, Universal Analytics (UA), ab Mitte 2023 schrittweise einzustellen.
Als Publisher sollten Sie im Vorfeld der Umstellung bereits ein GA4-Konto eingerichtet haben. Falls nicht, folgen Sie bitte den Anleitungen von Google zur erstmaligen Einrichtung oder zur Integration in eine Website, die bereits UA nutzt .
Sobald das erledigt ist, müssen Sie im nächsten Schritt Googles BigQuery-Data-Warehouse über die Analytics-Verwaltung mit GA4 verknüpfen. Durch die Verknüpfung von BigQuery können Sie Ihre Daten mithilfe von SQL abfragen. Hier finden Sie eine Anleitung zur Verknüpfung der beiden Systeme .
Nachdem diese Schritte abgeschlossen sind, können wir nun die Web-Vitals-Bibliothek zu Ihrer Website hinzufügen.
Die Bibliothek, eine extrem kleine, modulare JavaScript-Bibliothek zur Datenerfassung, ist auf GitHub verfügbar.
Die Bibliothek kann entweder über das Open-Source-Online-Repository npm installiert werden, indem Sie „npm install web-vitals“ in Ihrem Terminal ausführen, oder über<script> tags on a content distribution network (CDN).
Hier ist ein Beispiel für ein solches Skript:
Sobald die Web-Vitals-Bibliothek installiert ist, können Benutzerdaten mithilfe eines von Google empfohlenen benutzerdefinierten Template-Tags, das von Simo Ahava erstellt und gepflegt wird, an den Google Tag Manager (GTM) gesendet werden.
Sobald das Tag installiert ist, können die CWV-Metriken und die zugehörigen Attributionsdaten an GA4 weitergeleitet werden.
Sobald Sie die Analysefunktionen zur Verfolgung der GTM-Daten eingerichtet haben, können Sie die Ereignisdaten in der BigQuery-Oberfläche einsehen. Diese Daten können dann wie folgt abgefragt werden:
Sobald die Abfrage abgeschlossen ist, sollte der Bericht in etwa so aussehen:
Wir müssen nochmals betonen, dass es sich hierbei um eine Entwicklerlösung handelt, die in Wirklichkeit deutlich komplexer ist. Die Anwendung dieser Lösung liefert Ihnen jedoch die genauesten Informationen zur Performance Ihrer Website.
Eine detailliertere Erklärung dieses Prozesses finden Sie in Googles Leitfaden zum Anzeigen von CWVs in GA4 .
Dies ist zwar der genaueste Ansatz zur Überwachung von CWVs, es gibt aber auch einfachere Ansätze zur Bewältigung dieses Problems.
Die PSI-Methode ist zwar weniger genau als die GA/RUM-Methode, wird aber aufgrund ihrer einfachen Handhabung häufig als eines der wichtigsten Instrumente zur Messung von CWVs genannt.
Obwohl PSI lediglich auf Stichproben realer Nutzererfahrungen aus dem Chrome User Experience Report (CrUX) der letzten 28 Tage zurückgreift, bietet es eine einfache und intuitive Benutzeroberfläche . Dadurch wird die Interpretation der Daten deutlich vereinfacht.
Wie Sie in unserem unten stehenden Beispiel sehen können, liefert ein Blick auf die Forbes-Website sofort eine Fülle von Informationen sowohl über die Desktop- als auch über die mobile Website des Herausgebers.
PSI verwendet die oben genannten Kategorien Grün, Gelb und Rot zur Vergabe der Leistungsnoten Gut, Verbesserungsbedürftig und Schlecht.
Der Stichprobenansatz von CrUX bedeutet, dass die obige Bewertung von Forbes zwar einige reale Nutzererfahrungen mit der Website berücksichtigte, aber nicht alle Nutzerdaten der Website einbeziehen kann.
Diese Vorgehensweise bei der Stichprobenentnahme erweist sich für kleinere Standorte als problematisch, da viele davon in den Felddaten von CrUX nicht berücksichtigt werden.
PSI kann Ihnen jedoch weiterhin eine virtuelle Diagnose Ihrer Website mithilfe von Labordaten aus Googles Open-Source-Tool Lighthouse . Siehe folgendes Beispiel:
Das Problem bei diesem Ansatz ist, dass Lighthouse seine Daten anhand vordefinierter Geräte- und Netzwerkeinstellungen erfasst, die nicht den Einstellungen Ihrer Nutzer entsprechen. Daher ist es nur ein unzureichender Ersatz für die tatsächliche Datenerfassung.
GSC ist ein Tool, das Verlagen einen Überblick über die CWV-Probleme ihrer Website bietet und damit die Möglichkeit eröffnet, die Performance der Website ganzheitlich zu verbessern.
Dies geschieht durch die Gruppierung der URL-Performanceberichte nach Status, Metriktyp oder thematischer Ähnlichkeit. Probleme einzelner Seiten werden nicht identifiziert, wodurch die Möglichkeit zur detaillierten Fehlerbehebung entfällt.
Hier kommt PSI ins Spiel. Es ist jedoch wichtig zu beachten, dass der Einzelseitenbericht von PSI deutlich von den Gruppenergebnissen der GSC abweichen kann. Das liegt daran, dass die Einzelseite nur eine Komponente der aggregierten Gruppenergebnisse der GSC darstellt.
Nach dem Einloggen in das GSC-Dashboard sehen Benutzer links den Tab „Core Web Vitals“. Ein Klick auf diesen Tab zeigt separate CWV-Berichte für mobile Geräte und Desktop-Computer für URL-Gruppen an.
Obwohl es drei CWV-Metriken gibt – LCP, FID und CLS –, erhalten URLs eine Gesamtbewertung basierend auf ihrer schlechtesten Metrik für ein bestimmtes Gerät, was sich auch auf die Gruppenberichte auswirkt.
Wenn beispielsweise eine URL auf einem Mobilgerät einen schlechten FID-Wert und einen guten LCP-Wert erhält, wird sie auf Mobilgeräten als schlecht gekennzeichnet.
Es ist wichtig zu betonen, dass die Google Search Console (GSC) nicht für detaillierte Fehlerbehebungen gedacht ist. Sie eignet sich jedoch hervorragend für Publisher mit vielen ähnlichen Seiten. Nachrichtenseiten beispielsweise verwenden oft ein relativ einheitliches Design und Layout für ihre Artikelseiten, bei dem ein Bild das größte Element im sichtbaren Bereich darstellt. In diesem Fall kann die GSC schnell LCP-Probleme über verschiedene URLs hinweg identifizieren.
Das letzte Werkzeug im Google-Toolkit zur Leistungsmessung ist Lighthouse . Dieses Tool unterscheidet sich grundlegend von den vorherigen, da es die Nutzerleistung anhand eines festgelegten Parametersatzes simuliert.
Da es keine Felddaten verwendet, ist es in seinen praktischen Anwendungsmöglichkeiten eingeschränkter. Felddaten werden beispielsweise durch die Netzwerkverbindung des Nutzers und dessen Entfernung zu den Servern des Standorts beeinflusst, während Lighthouse ein Gerät mittlerer Reichweite emuliert, um Daten in einer kontrollierten Umgebung zu erfassen.
Es ist außerdem wichtig zu verstehen, dass der Lighthouse-Score nicht einfach eine Zusammenfassung der CWV-Scores darstellt. Er schließt FID aus, da Labordaten naturgemäß Endnutzerinteraktionen nicht berücksichtigen, und bezieht stattdessen die Gesamtblockierungszeit (TBT), den Geschwindigkeitsindex (SI) und die Zeit bis zur Interaktion (TTI) mit ein. Für diejenigen, die eine FID-Erfahrung im Labor simulieren möchten, kann die TBT als Näherungswert verwendet werden.
Wir raten jedoch davon ab, Lighthouse als primäre Messressource zu verwenden. Vielmehr sollte es als ergänzendes Werkzeug zusammen mit PSI eingesetzt werden, um spezifische Seitenprobleme zu beheben.
Publisher, die Lighthouse in ihren Tests verwenden möchten, können dies über die Chrome Devtools , die direkt in den Chrome-Browser integriert sind, über eine Erweiterung für diesen Browser oder unter web.dev/measure .
Lighthouse prüft Ihre Webseite und vergibt Punktzahlen von maximal 100 Punkten in vier Bereichen:
So sieht es aus, wenn wir unsere Homepage über die web.dev-Option aufrufen.
Mobile Webdesign unterscheidet sich vom traditionellen Desktop-Webdesign dadurch, dass mobile Geräte kleinere Bildschirme haben, in der Regel über weniger leistungsstarke Hardware verfügen und ausschließlich auf Touch-Eingaben angewiesen sind.
Mobilfreundliche Websites legen Wert auf ein optimales Nutzererlebnis und befolgen dabei bewährte Methoden, die wir später genauer betrachten werden. Der beste Weg, um die Mobilfreundlichkeit Ihrer Seiten zu überprüfen, ist derzeit der Google -Test für Mobilgeräte .
Die Eingabe einer URL einer mobilfreundlichen Webseite liefert folgendes Ergebnis:
Seiten, die diesen Test nicht bestehen, werden mit verschiedenen Lösungsoptionen angezeigt. Darauf gehen wir später noch genauer ein.
Die Überprüfung, ob Ihre Website über eine sichere Verbindung verfügt, ist ein äußerst einfacher Vorgang: Sie öffnen Ihren Browser und schauen sich das Symbol links neben der URL in der Adressleiste an.
In Chrome wird eine sichere Verbindung durch ein geschlossenes Vorhängeschloss-Symbol wie dieses gekennzeichnet:
Eine unsichere Verbindung wird durch ein Info-Symbol wie folgt gekennzeichnet:
Ob Ihre Interstitial-Anzeigen aufdringlich sind oder nicht, lässt sich nicht so einfach feststellen, indem man seine Website in ein Online-Tool eingibt und auf ein Ergebnis wartet.
Dazu müssen die Zwischenanzeigen und Dialogfelder auf Ihrer Website untersucht und entschieden werden, ob sie bestimmte Kriterien erfüllen.
Betrachten Sie diese Parameter als Fragen, zum Beispiel:
Wenn Sie eine dieser Fragen mit Ja beantworten, ist dies wahrscheinlich ein Hinweis darauf, dass die Werbung oder das Dialogfeld aufdringlich ist.
Nachdem wir nun die verschiedenen Komponenten der vier Faktoren, die die Nutzererfahrung beeinflussen, sowie die Möglichkeiten zur Überwachung ihrer Leistung verstanden haben, wollen wir uns damit befassen, wie wir die Ranking-Signale unserer Websites konkret verbessern können
Wir werden uns zunächst mit CWVs befassen, da das Debuggen und Optimieren von LCP, CLS und FID den größten Einfluss auf Ihre Fähigkeit hat, in hart umkämpften SERP-Rankings um Spitzenplätze zu konkurrieren.
Während die Mobilfreundlichkeit für Websites, die sich an mobile Nutzer richten, von enormer Bedeutung ist, steigert die Verbesserung der CWVs die Seitenleistung unabhängig davon, ob die Websites auf mobilen Geräten oder Desktop-Computern angezeigt werden.
Die Bekämpfung von HTTPS und aufdringlichen Interstitials wurde bis zum Schluss aufgeschoben, da dies einfacher ist und weniger lohnende Erfolge verspricht.
Es gibt eine Reihe von Möglichkeiten zur Verbesserung der CWV-Leistung, die wir nach ihrer unserer Meinung nach gebührenden Wichtigkeit geordnet haben.
Die Optimierung der Core Web Vitals einer Seite umfasst ein breites Spektrum an Maßnahmen, und es ist wichtig zu wissen, wo man anfangen soll, um die Ressourcen optimal zu nutzen.
Wie bereits erwähnt, misst Largest Contentful Paint (LCP), wie lange es dauert, bis das größte Text- oder Bildelement, das oberhalb der Falz sichtbar ist, vollständig geladen ist.
Nutzen Sie PSI, um herauszufinden, welcher Seiteninhalt den LCP-Test auslöst. Gehen Sie dazu im Bericht zum Diagnosebereich und klicken Sie auf „Größtes Contentful Paint-Element“. Folgendes haben wir auf der SODP-Homepage festgestellt:
Ein schlechter LCP-Wert lässt sich in der Regel auf langsame Serverantwortzeiten, renderblockierendes JavaScript und CSS, lange Ressourcenladezeiten oder clientseitiges Rendering oder sogar eine Kombination aus allen vier Faktoren zurückführen.
Die Optimierung Ihrer Seite umfasst tatsächlich die Optimierung von vier verschiedenen Teilbereichen des LCP-Ladevorgangs:
Alle diese Schritte müssen optimiert werden, damit sich Ihr LCP-Score verbessert. Das bedeutet jedoch nicht, dass alle Teilbereiche gleich wichtig sind.
Google hat vorgeschlagen, die gesamte LCP-Zeit aufzuteilen, wobei TTFB und Ressourcenladezeit jeweils etwa 40 % ausmachen sollten, während Ressourcenlade- und Elementrenderverzögerungen jeweils weniger als 10 % ausmachen sollten.
Idealerweise sollten diese beiden letzten Phasen so nah wie möglich an Null liegen und Vorrang vor den beiden anderen Phasen haben.
Es gibt zwei Möglichkeiten, die Verzögerung beim Ressourcenladen so weit wie möglich auf null zu reduzieren:
Eines sei gleich vorweg gesagt: Wir empfehlen Ihnen, sich mit Ihrem Webentwickler zu beraten, bevor Sie diese Korrekturen selbst vornehmen. Es handelt sich um eine Backend-Operation, die erfahrene Entwickler erfordert, um das gewünschte Ergebnis zu erzielen.
Ressourcenerschließung
Jeder Webbrowser verfügt über einen Preload-Scanner, dessen Aufgabe es ist, den primären HTML-Parser des Browsers bei der Erkennung von Seiteninhalten zu unterstützen.
Während der primäre HTML-Parser den Rohcode verarbeitet, bis er auf eine blockierende Ressource stößt – wie beispielsweise ein Skript, das kein async- oder defer -Attribut enthält –, nimmt der Preload-Scanner eine eher spekulative Rolle ein.
Anders ausgedrückt: Der Preload-Scanner sucht nach Ressourcen, die er abrufen kann, bevor der primäre HTML-Parser sie erreicht, und arbeitet auch dann weiter, wenn der Parser blockiert ist. Mithilfe des Preload-Scanners kann das LCP so nah wie möglich an der ersten Seitenanfrage gefunden und geladen werden.
Um sicherzustellen, dass die LCP-Ressource aus dem HTML-Quelltext auffindbar ist, stehen Entwicklern assetspezifische Optionen zur Verfügung.
Wenn es sich bei dem LCP beispielsweise um ein Bild handelt, müssen dessen src- oder srcset -Attribute im Quellcode vorhanden sein. CSS-Hintergrundbilder hingegen können durch Einbinden vorab geladen werden. im HTML-Markup oder im Header. Schließlich können Schriftarten auf ähnliche Weise geladen werden über Die
Es ist jedoch zu beachten, dass die Verwendung von Preloading zur Verkürzung der LCP-Ladezeiten neue Probleme mit sich bringen kann, beispielsweise die Herabstufung asynchroner Elemente. Aus diesem Grund empfehlen wir Ihnen, dies mit Ihrem Entwickler zu besprechen.
Weitere Informationen zu diesem Thema finden Sie in den ausführlichen Artikeln von Google zur LCP-Optimierung und zum Preload-Scanner .
Ressourcenpriorität
Browser versuchen, CSS-, Schriftart-, Skript-, Bild- und iFrame-Ressourcen durch Priorisierung so optimal wie möglich herunterzuladen. Browser sind sehr gut darin, die Prioritäten dieser Ressourcen zu ermitteln, aber das bedeutet nicht, dass sie fehlerfrei arbeiten.
Um die Priorisierung von Assets zu optimieren, können Entwickler mithilfe von Markup-basierten Prioritätshinweisen Browsern signalisieren, welche Assets eine höhere Priorität haben. Beispielsweise kann ein Entwickler JavaScript und die Fetch API verwenden, um das LCP-Bild mit dem fetchpriority="high"` und so die entsprechende CWV-Metrik zu beschleunigen.
Es ist wichtig zu beachten, dass Priority Hints nur auf Chromium-basierten Browsern wie Google Chrome und Microsoft Edge funktionieren.
Möglicherweise hat Ihr Entwickler bereits Lazy Loading für Assets unterhalb des sichtbaren Bereichs implementiert. Fragen Sie zur Sicherheit bei ihm nach, aber es lohnt sich auch, ihn dazu zu bringen, Priority Hints für Assets oberhalb des sichtbaren Bereichs zu verwenden.
den Leitfaden von Google zum Laden von Ressourcen zu konsultieren .
Dem Entwicklerteam des Suchmaschinenriesen gelang es, mithilfe von Priority Hints die LCP in einem Test von Google Flights von 2,6 Sekunden auf 1,9 Sekunden zu verbessern.
FID erfasst, wie lange der Browser eines Benutzers benötigt, um mit der Verarbeitung der ersten Eingabe zu beginnen – Scrollen und Zoomen ausgenommen.
Diese Kennzahl erfasst die Nutzererfahrung bei der Interaktion mit einer Webseite. Langsame Webseiten erzielen daher schlechte Ergebnisse. Ziel ist es, den FID-Wert unter 100 Millisekunden zu halten.
Eine schlechte Reaktionsfähigkeit ist im Allgemeinen auf eine übermäßige Verwendung von JavaScript zurückzuführen, das von Browsern vor den Eingaben verarbeitet wird.
Code, der den Browserfokus für 50 Millisekunden oder länger beansprucht, wird als „Long Task“ bezeichnet und gilt als Zeichen für aufgeblähten JavaScript-Code. Durch die Aufteilung dieser Long Tasks in kleinere Codeabschnitte lassen sich Leistungseinbußen beheben und die Benutzerfreundlichkeit (FID) verbessern.
Das ist aber nicht der einzige Punkt, den Sie mit Ihrem Entwickler besprechen sollten. Es ist wichtig zu klären, wie sowohl eigene als auch Drittanbieter-Skripte Ihre Website verlangsamen können. Progressives Laden von Code und Funktionen kann die Herausforderungen ersterer bewältigen, während bedarfsgesteuertes Laden und Priorisierung der Ladezeiten letztere verbessern können.
Eine weitere Möglichkeit bestünde darin, Web Worker , um JavaScript im Hintergrund auszuführen und so zu verhindern, dass Ihr Browser durch die Verarbeitung von Skripten ausgebremst wird.
CLS ist im Grunde ein Maß für die visuelle Stabilität Ihrer Website. Wenn Ihre Besucher die Orientierung auf einer Seite verlieren, weil Inhalte verschoben werden, um Platz für Werbung und Bilder zu schaffen, schneidet Ihre Website schlecht ab.
Je weniger Ihr Seitenlayout springt, desto besser ist Ihr CLS-Wert. Google bewertet Websites anhand der Unterbrechungen im sichtbaren Bereich und der Verschiebung von Elementen relativ dazu.
Die Minimierung unerwarteter Layoutverschiebungen hängt im Wesentlichen davon ab, Platz für Anzeigen, Bilder und eingebettete Videos zuzuweisen.
Erinnern Sie sich an die src- oder srcset- Attribute, die wir im Zusammenhang mit der Ressourcenermittlung betrachtet haben? Nun, diese sind von entscheidender Bedeutung für die Verbesserung der CLS-Werte.
Bei statischen Bildern sollten Sie Breite und Höhe mithilfe der src- Attribute festlegen, um dem Browser mitzuteilen, dass er Platz für langsamer ladende Elemente reservieren soll. Dadurch werden Layoutverschiebungen vermieden.
Siehe unten den Beispielcode von Google:
Responsive Bilder benötigen ein srcset-Attribut , um die maximale Breite und Höhe festzulegen, die der Browser auswählen kann. Achten Sie darauf, Bilder mit demselben Seitenverhältnis zu verwenden.
Hier ist ein weiteres Beispiel:
Beim Umgang mit Werbung können Sie folgende Schritte unternehmen:
Es empfiehlt sich außerdem, statischen Speicherplatz zu reservieren, wenn Sie iFrames, eingebettete Inhalte und dynamische Inhalte wie Handlungsaufforderungen (CTAs) implementieren möchten.
Beim Herunterladen und Rendern von Webfonts durch Browser kann es kurzzeitig zu unformatiertem Text (FOUT) oder unsichtbarem Text (FOIT) kommen. Ersteres tritt auf, wenn eine Ausweichschriftart durch eine neue Schriftart ersetzt wird, während Letzteres durch eine Verzögerung beim Rendern der neuen Schriftart verursacht wird.
Beide Probleme lassen sich durch folgende Verwendung lösen: Der Preload-Scanner wird angewiesen, die Webfonts schneller zu laden. Vorgeladene Fonts haben eine höhere Wahrscheinlichkeit, beim ersten Rendering korrekt angezeigt zu werden.
Weitere Lösungsansätze finden sich im CLS-Fehlerbehebungsleitfaden sowie in dessen ausführlicher Anleitung zur Verwendung von Preload zur Verhinderung von FOIT .
Wenn Sie die Ladegeschwindigkeit Ihrer Website verbessern möchten und immer noch eine traditionelle Hosting-Lösung mit einem einzigen Server nutzen, dann ist es wahrscheinlich an der Zeit, über einen Wechsel zu einem Content Delivery Network (CDN) nachzudenken.
Ein CDN (Content Delivery Network) besteht aus einem Netzwerk von Servern in verschiedenen Rechenzentren weltweit, die Website-Inhalte verteilen, um die Performance zu verbessern. Zwar liefern sowohl ein einzelner Server – auch lokales Hosting genannt – als auch ein CDN Website-Inhalte an Besucher aus, aber nur ein CDN kann den geografischen Standort des Nutzers berücksichtigen und den nächstgelegenen Server auswählen, um die Ladezeiten zu verkürzen.
Geografische Gegebenheiten sind jedoch nicht der einzige Vorteil, da CDNs auch besser für die Bewältigung plötzlicher Verkehrsspitzen sowie für die Verwaltung von Root-Server-Ressourcen wie Bandbreite gerüstet sind.
Letztendlich sendet ein schnelleres Surferlebnis ein starkes CWV-Signal an Google. Cloudflare ist zwar einer der bekanntesten CDN-Anbieter auf dem Markt, es gibt aber eine Reihe ernstzunehmender Konkurrenten .
Unabhängig davon, welchen Hosting-Anbieter Sie nutzen, unterliegen dessen Server bestimmten Hardwarebeschränkungen.
Server enthalten größtenteils dieselben Schlüsselkomponenten wie Ihr Laptop/Desktop-PC – nämlich CPU und RAM –, die alle Aufgaben Ihres Accounts verarbeiten. Über das Dashboard Ihres Hosting-Anbieters können Sie die auf Ihrem Server installierte CPU und den RAM überprüfen und gegebenenfalls zusätzliche Ressourcen anfordern, um die Leistung Ihrer Website zu verbessern.
Wenn Sie die CPU Ihres Servers betrachten, ist es wichtig zu wissen, dass nur ein einziger Kern zur Bearbeitung der Anfrage eines Besuchers nach einer Webseite verwendet wird. Das bedeutet, dass höhere Taktraten einzelner Kerne immer von Vorteil sind. Mehrkern-CPUs können mehrere Seitenaufrufe und andere Serverdienste gleichzeitig verarbeiten.
Das ist eine weitere Aufgabe für Ihren Entwickler.
Überprüfen Sie Ihre Datenbank regelmäßig, um sicherzustellen, dass sie nicht mit ungenutzten Fotos und Dateien überladen ist. Durch das Löschen unnötiger Dateien wird die Datenbank aufgeräumt und die durchschnittlichen Ladezeiten der Seiten verkürzt.
Sehr große Bilder können Ihre Website verlangsamen. Wie groß muss ein Bild sein? Alles über 1 MB ist schlichtweg zu groß.
Wie wir bereits wissen, führen längere Ladezeiten zu höheren Absprungraten und senden unerwünschte Signale an Google.
Für WordPress-Nutzer gibt es zahlreiche Plugins zur Bildoptimierung , die eine ansonsten mühsame manuelle Aufgabe erheblich vereinfachen. Viele bieten darüber hinaus weitere Funktionen wie Lazy Loading und automatische Größenanpassung.
Ob eine Website mobilfreundlich ist oder nicht, hängt davon ab, ob Sie Ihre Website für das mobile Surferlebnis vereinfacht und optimiert haben.
Mobile Nutzer interagieren anders mit Webseiten und haben deutlich weniger Geduld mit langen Ladezeiten und unübersichtlichen Seiten. Falls Ihre Webseite den oben beschriebenen Test auf Mobilfreundlichkeit nicht bestanden hat oder Sie, selbst wenn sie ihn bestanden hat, noch weitere Optimierungen anstreben, besprechen wir im Folgenden einige bewährte Vorgehensweisen.
Dies sollte für jeden Verlag oberste Priorität haben. Um die Benutzerfreundlichkeit zu verbessern, kann man sich beispielsweise folgende Fragen stellen:
Diese Antworten helfen Ihnen maßgeblich dabei, die Probleme Ihrer Nutzer zu identifizieren. Beispielsweise möchten Sie vermeiden, dass Ihre Nutzer ihre Bildschirmeinstellungen anpassen müssen, um Ihre Inhalte anzuzeigen. Das folgende Beispiel verdeutlicht dies.
Um Ihre Inhalte für mobile Geräte zu optimieren, gibt es drei Entwicklungsoptionen:
Wir haben sie nach ihrer Implementierungsfreundlichkeit geordnet und empfehlen die Verwendung eines responsiven Designs, da dies die am wenigsten anspruchsvolle der drei Optionen ist.
Entwickler fügen einfach das Meta-Tag name="viewport" zum bestehenden Code einer Webseite
Der Vorteil hierbei ist, dass Sie nur eine Website pflegen müssen, die sich problemlos auf jedem Bildschirmtyp anzeigen lässt.
Dynamische Designs funktionieren hingegen, indem sie je nach Gerät des Nutzers unterschiedlichen HTML-Code ausliefern. Seiten müssen den HTTP-Header „Vary“ verwenden, um zu verhindern, dass der falsche Code an das falsche Gerät ausgeliefert wird.
Schließlich gibt es noch mobile Subdomains, von denen wir aufgrund des hohen Aufwands für eine effektive Implementierung abraten. Mobile Subdomains sind komplett separate Websites mit separaten Hosting-Anforderungen. Damit Crawler die Beziehung zwischen Domain und Subdomain verstehen, müssen Sie das rel="canonical" -Tag einfügen.
Da responsives Design die einfachste Option ist, empfehlen wir es Publishern. Weitere Informationen zum responsiven Design finden Sie im Implementierungsleitfaden von Google .
Hier eine kurze Liste technischer Überlegungen für jedes Design:
Dieser letzte Schritt ist nicht nur die einfachste Möglichkeit, die Benutzerfreundlichkeit der Seite zu verbessern, sondern trägt auch wesentlich dazu bei, das Wohlbefinden Ihrer Nutzer zu steigern.
Die Umstellung auf HTTPS schützt und verschlüsselt die Daten Ihrer Nutzer und hilft zudem, Man-in-the-Middle-Angriffe (MitM) zu verhindern. Darüber hinaus beseitigt ein SSL-Zertifikat Browserwarnungen bezüglich Sicherheitslücken.
Ihr Hosting-Anbieter sollte Ihnen HTTPS-Sicherheit bieten können. Falls nicht, lohnt sich ein Wechsel zu einem Anbieter mit HTTPS-Verschlüsselung. Es gibt bereits mehrere namhafte Hosting-Anbieter, die HTTPS kostenlos anbieten . Darüber hinaus nutzen diese Anbieter eigene SSL-Zertifikate anstelle externer Anbieter, was die Implementierung noch einfacher und schneller macht.
Wenn Sie ein SSL-Zertifikat von Zertifizierungsstellen (CAs) anfordern und installieren möchten, müssen Sie vier Schritte befolgen. Diese sind:
Bei der Umstellung Ihrer Website auf HTTPS ist es wichtig sicherzustellen, dass Ihre Werbeeinnahmenstrategie nicht beeinträchtigt wird. Das Problem besteht darin, dass HTTPFunktioniert nicht auf einer Website, die HTTPS verwendet.
Wir empfehlen Ihnen, sich mit Ihren Ad-Tech-Partnern abzusprechen, bevor Sie Änderungen an Ihrer Website vornehmen.
Weitere Details finden Sie in Googles ausführlichem Leitfaden zu diesem Thema.
Aufdringliche Werbeanzeigen und Dialogfelder erschweren es Suchmaschinen, den Inhalt einer Webseite zu verstehen, was die Leistung in den Suchergebnissen beeinträchtigen kann.
Es wäre ideal, wenn man Interstitials erstellen könnte, die das Nutzererlebnis nicht stören, aber genau das ist ja der Sinn solcher Anzeigen. Sie füllen den gesamten Bildschirm in Inhaltspausen aus, um die Aufmerksamkeit des Nutzers zu gewinnen.
Daher wäre es für Publisher ratsamer, Bannerwerbung anstelle von Interstitial-Anzeigen zu verwenden, da diese nur einen geringen Teil des Bildschirms einnehmen. Lieber das Risiko der Bannerblindheit eingehen als die Frustration der Nutzer.
Publisher können browserkompatible Banner oder einfache HTML-Banner verwenden, die auf die Zielseite des CTA verlinken.
Dialogfelder können auch für Werbekampagnen genutzt werden, sollten aber so gestaltet sein, dass sie unaufdringlich wirken. Wichtig ist, dass Nutzer ungestört auf die Inhalte zugreifen können.
Es gibt keine wirklichen Abkürzungen zur Optimierung Ihrer Seitennutzung, und es ist unerlässlich, dass Sie die oben genannten Punkte beheben. Allerdings sei angemerkt, dass WordPress zwar die mit Abstand beliebteste Publishing-Plattform der Welt ist, dies aber nicht zwangsläufig bedeutet, dass es das beste CMS zur Steigerung der CWV-Performance ist.
Ein Blick in den CWVs Technology Report zeigt, dass nur etwa 29 % der WordPress-Websites gute CWVs haben, während 41 % der Wix-Websites das grüne Häkchen erhalten.
Es lohnt sich abzuwägen, ob ein Wechsel zu einem spezialisierten CMS Ihre CWVs nativ verbessern könnte.
Die Optimierung der Nutzererfahrung auf einer Webseite ist ein weites Feld, und der Einstieg kann etwas entmutigend wirken. Wichtig ist jedoch, sich vor Augen zu halten, dass man auch große Herausforderungen Schritt für Schritt meistert.
Ein „guter“ Wert in allen CWV-Metriken ist nicht zwingend erforderlich, um das Ranking Ihrer Website in den Suchergebnissen zu verbessern. Mehr noch: Solche hochgesteckten Ziele können kontraproduktiv sein, da sie demotivierend wirken.
Konzentrieren Sie sich bei Ihren CWVs stattdessen auf kleine Erfolge und beheben Sie „schlechte“ Ergebnisse, ohne sich zu sehr um die „Verbesserungsbedürftig“-Marke zu sorgen. Das kann später erfolgen, wenn Sie mehr Zeit und Ressourcen dafür haben.
Wir haben bereits über die verbesserte CLS-Bewertung von Yahoo! JAPAN gesprochen, schauen wir uns nun ein paar andere Websites an, von denen wir einige Lehren ziehen können.
Die indische Tageszeitung The Economic Times, die monatlich mehr als 45 Millionen aktive Nutzer erreicht, senkte ihren CLS-Wert um 250 % von 0,25 auf 0,09 und ihre LCP-Zeit um 80 % von 4,5 Sekunden auf 2,5 Sekunden.
Zwischen Oktober 2020 und Juli 2021 senkte der Verlag die LCP-Werte im „Mangelhaften“ Bereich um 33 %, während die CLS-Werte im „Mangelhaften“ Bereich um 65 % zurückgingen. Dank dieser Verbesserungen konnte die Economic Times die CWV-Schwellenwerte in allen Ursprungsgebieten überschreiten und gleichzeitig die Absprungrate um 43 % reduzieren.
Der Verlag erreichte dies auf verschiedene Weise. Zunächst wurden die Downloadprioritäten für Assets mithilfe von Prioritätshinweisen festgelegt. Außerdem wurden lange Aufgaben optimiert, indem Codeabschnitte aufgeteilt wurden, um sicherzustellen, dass die für das Rendern des sichtbaren Seitenbereichs kritischen Ressourcen zuerst geladen wurden.
Die britische Nachrichtenwebsite verbesserte ihren CLS-Wert von 0,25 auf 0,1 und erhöhte gleichzeitig den Anteil der URLs, die eine positive Bewertung erhielten, von 57 % auf 72 %.
The Telegraph nutzte die Chrome-Entwicklertools, um einzelne Fälle von Layoutverschiebungen zu identifizieren.
Anschließend wird mit WebPageTest ermittelt, an welcher Stelle im Zeitablauf die Layoutverschiebung aufgetreten ist.
Mit diesen Daten begann das Team, sich auf die Reduzierung von Layoutverschiebungen zu konzentrieren, indem es diese Bereiche anging
Für Anzeigen reservierte The Telegraphed feste Werbeflächen und verwendete die gängigste Anzeigengröße zur Festlegung der Abmessungen. Dies trug auch dazu bei, dass Anzeigen auf Tablets nicht mehr zusammengeklappt wurden.
Das Team befasste sich mit einem ähnlichen Problem bei eingebetteten Bildern am Anfang der Artikel, die keine festgelegten Abmessungen hatten.
Der Telegraph nahm weitere Anpassungen vor, wie etwa das Verschieben der Kopfzeile an den Anfang des Markups und die Verwendung von Platzhaltern für eingebettete Videos, beschrieb den Prozess aber letztendlich als „ziemlich einfach“, obwohl er dennoch erhebliche Auswirkungen hatte.
Die Verbesserung der Nutzererfahrung muss nicht kompliziert sein. Messen Sie die vier Säulen der Nutzererfahrung und entscheiden Sie dann, welche Ressourcen Sie für die Optimierung Ihrer Ergebnisse einsetzen können.
Für kleinere Verlage ist ein ausgewogener Ressourceneinsatz entscheidend. Wir empfehlen Ihnen daher, für Ihr erstes Projekt relativ leicht umsetzbare Projekte zu identifizieren.
Der Ansatz des Telegraph zeigt, dass dieser sich auf einen Aspekt der CWVs anstatt auf alle drei konzentrierte und dadurch deutliche Verbesserungen erzielte. Die Economic Times fokussierte sich auf zwei der drei Aspekte und lieferte beeindruckende Ergebnisse.
