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 sie wichtig sind und wie jede einzelne optimiert werden kann, um sowohl die Benutzererfahrung Ihrer Website als auch ihre SEO 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 – einschließlich Core Web Vitals (CWVs), Mobilfreundlichkeit, HTTPS und aufdringliche Interstitial-Richtlinien – die Google verwendet, um die Benutzererfahrung auf einer Website zu extrapolieren.
Die Seitenerfahrung ist eine Bewertung der Leistung einer Website und nicht ihres Inhalts. Während Google bei der Beantwortung von Benutzeranfragen immer noch die Relevanz von Inhalten priorisiert, ist die Seitenerfahrung effektiv ein Entscheidungskriterium, wenn mehrere Websites ein ähnliches Maß an Abdeckung bieten.
Die vier Seitenerfahrungssignale sind:
CWVs messen die Benutzererfahrung, indem sie sich darauf konzentrieren, wie schnell eine Seite geladen wird, wie sie auf Benutzereingaben reagiert und auch ihre visuelle Stabilität. Dafür gibt es drei Metriken:
Das Update im April 2015 im April 2015 führte die mobilfreundliche Metrik des Suchgiganten vor, die die Rangliste mobiler freundlicher Seiten auf mobilen SERPs erhöht.
Effektiv wird Google jene Websites priorisieren, die sicherstellen, dass ihre Inhalte auf mobilen Geräten leicht lesbar sind. Dies bedeutet, dass keine Zoomen erforderlich ist. Berührungsziele wie Anmeldetasten sind nicht zu nahe beieinander, sondern es wird kein horizontales Scrollen und nicht spielbare Inhalte vermieden.
Das Update gilt für einzelne Seiten und nicht für nicht ganze Websites und wirkt sich auch nicht auf den Inhalt aus, der in Desktop-/Laptop -Browsern angezeigt wird.
HTTPS oder Hypertext Transfer Protocol Secure ist eine sichere Version des HTTP -Internet -Kommunikationsprotokolls.
HTTPS oder HTTP bilden den ersten Teil jeder URL, die als „Schema“ bezeichnet wird. Dies kommt vor dem Domainnamen, der das Segment der URL ist, die als „Autorität“ bekannt ist.
Der Unterschied zwischen HTTPS und HTTP besteht darin, dass ersterer sicher ist, während letzteres nicht ist. In der Praxis bedeutet dies, dass Benutzer, die sich über eine HTTP -Verbindung an einer Website anmelden, ihre persönlichen Daten in unverschlüsselten Klartext senden.
HTTPS sichert diese Verbindung, was bedeutet, dass alle Daten zwischen dem Browser des Benutzers und dem Server der Website auf dem Weg verschlüsselt werden. Websites, die sichere Verbindungen wünschen, benötigen ein SSL -Zertifikat, das der Browser des Benutzers überprüft und überprüft.
Interstitials sind nur ein mobiles Anzeigenformat, das nur in natürlichen Pausen im Inhalt angezeigt wird - z.
Interstitials werden als aufdringlich angesehen, wenn sie die Sicht der Benutzer auf den Inhalt blockieren oder teilweise verdecken. Dialogfelder auf mobilen Websites, die sich ähnlich verhalten, fallen auch unter diese Kategorie.
Die stärksten Fähigkeiten der Verlage sind in der Regel in der Erstellung, Veröffentlichung und Marketing von Inhalten und lassen wenig Raum, um die verschiedenen Seitenerfahrungssäulen zu verstehen und zu optimieren.
Endliche Ressourcen bedeuten, dass Verleger Schwierigkeiten haben, die Zeit und das Geld zu rechtfertigen, die für die Eingrabung in den Backend einzelner Webseiten erforderlich sind, geschweige denn eine ganze Website.
Auch wenn Verlage in der Lage sind, Zeit für das Problem zu widmen, wie wir von oben sehen können, ist die Seitenerfahrung ein vielfältiges Problem, das einen ganzheitlichen Ansatz erfordert, um sinnvolle Leistungsgewinne zu erzielen.
Zu wissen, an welcher der vierseitigen Erfahrungssignale Sie anfangen müssen, kann an und für sich Kopfschmerzen haben.
Die Seitenerfahrung ist für den Verlag SEO unglaublich wichtig, da großartige Inhalte nicht ausreichen, um die Top -Platzierung innerhalb der SERPs zu gewährleisten.
Google schätzt immer noch die besten Informationen vor allem, was bedeutet, dass eindeutige Inhalte oder Nachrichten „Scoops“ auch dann gut abschneiden, wenn die Seitenerfahrung „unterdurchschnittlich“ ist . In Fällen, in denen mehrere Verlage eine hervorragende topische Berichterstattung bieten, wird die Seitenerfahrung zu einem wichtigen entscheidenden Faktor, der die SERP -Rangliste beeinflusst.
Jede der Vier -Seiten -Erlebnis -Säulen hat einen anderen Einfluss auf die SEO einer Website. Der unmittelbarste Einfluss besteht darin, sich auf CWVs zu konzentrieren, was sich in eine Website, die schneller lädt, übertragen wird.
Zahlreiche Studien haben gezeigt, dass je länger eine Website zum Laden dauert, desto schneller wird das Publikum an Interesse und je höher die Absprungrate wird.
In einer Google -Studie aus dem Jahr 2018 wurde beispielsweise festgestellt, dass die Absprungwahrscheinlichkeit um 32% gestiegen ist, wenn die Seitenlastzeiten von 1 Sekunden bis 3 Sekunden stiegen.
Eine andere Google -Studie aus dem Jahr 2020 ergab, dass Nachrichtenseiten, die den CWV -Test bestanden haben, eine niedrigere Ablaufrate von 22% als diejenigen, die fehlgeschlagen waren. Yahoo! In Japan verbesserte Japan seinen CLS -Wert um 0,2 und verzeichnete einen Anstieg der Seitenansichten pro Sitzung um 15,1% und eine Steigerung der Sitzungsdauer um 13,3%.
Während Google ausdrücklich gesagt hat, dass es keine Sprungraten als Rangfolge -Signal verwendet , spricht eine hohe Absprungrate für Faktoren, die Google kümmert - nämlich die Lastgeschwindigkeit, die Reaktionsfähigkeit und die visuelle Stabilität einer Seite.
Verlage, die auf das Publikum auf mobilen Geräten abzielen, müssen sicherstellen, dass ihre Website mobile Signale sendet, die sowohl Google als auch Bing abholen können. Beide Suchmaschinen priorisieren freundliche Websites, wenn sie Suchergebnisse an mobile Benutzer liefern.
Im Vergleich zu CWVs und mobiler Freundlichkeit wird die Implementierung von HTTPs einen viel geringeren Einfluss auf die SEO eines Herausgebers haben. Google sagte im Jahr 2014, dass es es als Ranking -Signal nutzen würde, und markierte alle HTTP -Websites in Chrome 2018 als „nicht sicher“. Der größte Vorteil hier ist jedoch, dass die Datensicherheit verbessert wird, insbesondere wenn Ihr Geschäftsmodul auf den Einnahmen von Abonnements basiert.
Aufdringliche interstitielle Anzeigen oder Dialogfelder können inzwischen die Fähigkeit von Webcrawlern einschränken, eine Seite zu kriechen und zu indizieren und zu verhindern, dass Suchmaschinen sogar einstufen werden können, und in Ruhe in den Suchergebnissen zu lassen.
Der erste Schritt zur Verbesserung der Seitenerfahrung beginnt mit der Bewertung der aktuellen Effektivität Ihrer Website.
Es gibt eine breite Palette von Tools für Erste und Drittanbieter, um dies zu erreichen, aber für diesen Leitfaden werden wir uns mit Tools von Google's First Party ansehen.
Wir wissen jetzt, dass CWVs ein wichtiger Rangfaktor sind. Aber wie werden sie gemessen? In der folgenden Tabelle werden die Parameter aufgeführt, in denen optimale CWV -Nummern auf die beste Seitenerfahrung fallen sollten.
Jetzt, da wir wissen, was wir messen müssen und wie viel, können wir uns ansehen, wie man die Seitenerfahrung misst.
Im Folgenden finden Sie eine Liste einiger der am häufigsten verwendeten Methoden.
Die erste Option für Verlage ist bei weitem die technisch herausforderndste und wird nicht nur in Betracht ziehen, es sei denn, Sie haben einen guten Entwickler, der bei der Implementierung unterstützt wird.
Wir sprechen davon, Benutzerdaten von Ihrer Website zu sammeln, einen als Real User Monitoring (RUM) bezeichneten Prozess und dann die Ergebnisse in Google Analytics 4 (GA4). Google verfügt über andere Tools, wie z. B. PageSpeed Insights (PSI), die Datenprobenahme zur Bewertung Ihrer Website verwenden. Wenn das Ziel jedoch darin besteht, ein vollständiges Bild von Benutzererfahrungen für Ihre Website zu haben, benötigen Sie reale Daten, die von Ihrer Website gesammelt werden.
Wir empfehlen, GA4 für diese Aufgabe zu verwenden, aus dem einfachen Grund, dass Google von Mitte 2023 mit dem „Sonnenuntergang“ der vorherigen Generation von Google Analytics, Universal Analytics (UA) beginnen möchte.
Als Verlag sollten Sie bereits ein GA4 -Konto in Erwartung des Schalters einrichten müssen. Wenn Sie dies nicht getan haben, befolgen Sie bitte die Guides von Google, wie Sie es entweder zum ersten Mal einrichten oder wie Sie es einer Website mit UA hinzufügen .
Sobald dies durchgeführt wurde, besteht der nächste Schritt darin, das BigQuery -Data Warehouse von Google mit GA4 vom Analytics Admin zu verknüpfen. Durch das Verknüpfen von BigQuery können Sie Ihre Daten mit SQL abfragen. Hier ist eine Anleitung zum Verknüpfen der beiden .
Mit diesen Schritten können wir jetzt die Web-iRtals-Bibliothek zu Ihrer Website hinzufügen.
Die Bibliothek, eine äußerst kleine modulare JavaScript -Bibliothek für die Datenerfassung, ist auf GitHub verfügbar.
Die Bibliothek kann entweder aus dem Open-Source NPM Online-Repository installiert werden<script> tags on a content distribution network (CDN).
Hier ist ein Beispiel für ein solches Skript:
Sobald die Web-Vitals-Bibliothek installiert wurde, können Benutzerdaten anschließend an Google Tag Manager (GTM) gesendet werden, wobei ein Google-benutzerdefiniertes Vorlagen-Tag, das Simo Ahava erstellt und verwaltet, verwendet werden kann.
Sobald das Tag installiert wurde, können die CWV -Metriken und die zugehörigen Zuschreibungsdaten es dann an GA4 weiterleiten.
Sobald Sie Analytics eingerichtet haben, um die GTM -Daten zu verfolgen, können Sie Ereignisdaten in der BigQuery -Schnittstelle sehen. Diese Daten können dann so abgefragt werden:
Sobald die Abfrage zurückgegeben ist, sollte der Bericht ungefähr so aussehen:
Wir müssen wirklich noch einmal betonen, dass dies eine Entwicklerlösung ist und in der Tat viel komplexer ist als diese. Wenn Sie diese Lösung übernehmen, werden Sie jedoch die genaueste Lektüre auf der Leistung Ihrer Website erhalten.
Eine detailliertere Erläuterung dieses Prozesses finden Sie in Googles Handbuch zum Anzeigen von CWVs in GA4 .
Dies ist zwar der genaueste Ansatz bei der Überwachung von CWVs, aber es gibt einfachere Ansätze, dieses Problem anzugehen.
PSI ist weniger genau als die Verwendung eines GA/Rum -Ansatzes. Es wird jedoch häufig als eines der wichtigsten Werkzeuge bezeichnet, mit denen CWVs gemessen werden können - dank der Benutzerfreundlichkeit des Werkzeugs.
Während es möglicherweise nur Beispiele für echte Benutzererfahrungen verwenden, die aus dem Chrome User Experience Report (CRUX) im vorherigen 28-Tage-Zeitraum entnommen wurden, bietet PSI eine einfache und leicht verständliche Benutzeroberfläche . Dies bedeutet, dass die Interpretation der Daten ein viel einfacherer Prozess ist.
Wie Sie in unserem folgenden Beispiel sehen können, bietet die Untersuchung von Forbes 'Site sofort eine Fülle von Informationen sowohl auf der Desktop- als auch auf der mobilen Website des Herausgebers.
PSI verwendet die grünen, bernsteinfarbenen und roten Kategorien von oben, wenn sie gute, Verbesserungen und schlechte Leistungsstufen zugewiesen werden.
Der Stichprobenansatz von CRUX bedeutet, dass die obige Bewertung von Forbes zwar einige Benutzererfahrungen der Site in der realen Welt aufgenommen hat, die Benutzerdaten der Website jedoch nicht berücksichtigen kann.
Dieser Stichprobenansatz wird für kleinere Standorte problematisch, von denen viele nicht in den Felddaten von Crux enthalten sind.
PSI kann jedoch weiterhin eine virtuelle Diagnose Ihrer Website verwenden, indem Labordaten aus dem Open-Source-Leuchtturm-Tool . Siehe das folgende Beispiel:
Das Problem bei diesem Ansatz ist, dass Lighthouse seine Daten mithilfe vorab festgelegter Geräte- und Netzwerkeinstellungen sammelt, die die Einstellungen Ihrer Benutzer nicht widerspiegeln. Dies bedeutet, dass es ein schlechter Ersatz für die Realität ist.
GSC ist ein Tool, mit dem Verleger die CWV-Probleme ihrer Website mit einem Vogelperspektiven zur Verfügung stellen und die Tür zu einem ganzheitlichen Ansatz zur Verbesserung der Leistung der Website eröffnet.
Dies geschieht, indem die URL -Leistungsberichte basierend auf Status, metrischer Typ oder topischer Ähnlichkeit gruppiert werden. Es werden keine Probleme mit einzelnen Seiten identifiziert und die Möglichkeit verweigert, Korrekturen auf einer granularen Ebene umzusetzen.
Hier kommt PSI ins Spiel. Es ist jedoch erwähnenswert, dass der individuelle Seitenbericht von PSI sich von den Gruppengebnissen des GSC deutlich unterscheiden kann. Das liegt daran, dass die einzelnen Seite nur eine Komponente der aggregierten Gruppenergebnisse von GSC ist.
Wenn Sie sich in GSCs Dashboard anmelden, sehen Benutzer die Registerkarte "Web-Vitals" auf der linken Seite. Wenn Sie auf diese Registerkarte klicken, werden separate Mobil- und Desktop -CWV -Berichte für URL -Gruppen angezeigt.
Obwohl es drei CWV -Metriken gibt - LCP, FID und CLS - erhalten URLs eine Gesamtnote, die auf der schlechtesten Leistung für ein bestimmtes Gerät basiert, das sich auch auf die Gruppenberichte auswirkt.
Wenn beispielsweise eine URL auf Mobilgeräte eine schlechte FID und eine gute LCP erhält, wird sie auf dem Handy als schlecht bezeichnet.
Auch hier ist zu beachten, dass GSC nicht für körnige Korrekturen gedacht ist. Es eignet sich jedoch hervorragend für Verlage, die viele ähnliche Seiten haben. Zum Beispiel können Nachrichtenseiten für ihre Artikelseiten ein relativ Standard -Design und -Layout haben, das ein Bild als größtes Element über der FALT verwendet. In diesem Fall kann GSC schnell dazu beitragen, LCP -Probleme in einer Reihe von URLs zu identifizieren.
Das letzte Tool im Google Performance Messing Toolkit ist der Leuchtturm . Dieses Tool unterscheidet sich völlig von denen, die zuvor entstanden sind, als es die Benutzerleistung basierend auf einer festgelegten Parametersatz nachahmt.
Es wird keine Felddaten verwendet und ist daher in Bezug auf die praktischen Verwendungen eingeschränkt. Beispielsweise werden Felddaten durch die Netzwerkverbindung eines Benutzers und deren Entfernung zu den Servern der Website beeinflusst, während Lighthouse ein Mittelklasse-Gerät nachahmt, um Daten in einer kontrollierten Umgebung zu sammeln.
Es ist auch wichtig zu verstehen, dass Lighthouse's Score nicht nur eine Verschmelzung von CWV -Werten ist. Es schließt FID aus, da Labordaten von Natur aus Endbenutzer-Interaktionen ausschließen, während die Gesamtblockierungszeit (TBT), der Geschwindigkeitsindex (SI) und die Zeit zu interaktiven (TTI) Metriken in den Mix hinzugefügt werden. Für diejenigen, die eine FID -Erfahrung im Labor simulieren möchten, kann TBT als Proxy verwendet werden.
Wir empfehlen jedoch, Leuchtturm als primäre Messressource zu verwenden. Vielmehr sollte es neben PSI als Begleitwerkzeug verwendet werden, um spezifische Seitenprobleme zu beheben.
Verlage, die Lighthouse in ihren Tests verwenden möchten, können dies über Chrome Devtools Erweiterung für diesen Browser oder unter web.dev/measure gebacken werden .
Lighthouse prüft Ihre Webseite und bietet Punktzahlen von 100 in vier Bereichen:
So sieht es aus, wenn wir unsere Homepage über die Option Web.dev einsetzen.
Das mobile Webdesign unterscheidet sich vom herkömmlichen Desktop -Webdesign, in dem mobile Geräte kleinere Bildschirme aufweisen, im Allgemeinen weniger leistungsstarke Hardware und ausschließlich auf Touch -Eingänge beruhen.
Mobilfreundliche Websites priorisieren die Benutzererfahrung, indem wir eine Reihe von Best Practices folgen, die wir etwas später untersuchen werden. Der beste Weg, um zu überprüfen, ob Ihre Seiten mobilfreundlich sind, ist der mobilfreundliche Test .
Die Eingabe einer URL einer mobilfreundlichen Webseite gibt das folgende Ergebnis zurück:
Seiten, die an diesem Test nicht bestehen, werden mit einer Reihe von Fixoptionen angezeigt, die sie verfolgen sollten. Wir werden uns etwas später darauf einlassen.
Überprüfen Sie, ob Ihre Website eine sichere Verbindung hat, ein extrem einfacher Prozess, der Ihren Browser öffnet und das Symbol links von der URL in der Adressleiste betrachtet.
In Chrome wird eine sichere Verbindung über ein geschlossenes Vorhängeschlossymbol wie folgt bezeichnet:
Eine unsichere Verbindung hat ein Info -Symbol wie SO:
Die Feststellung, ob Ihre interstitiellen Anzeigen aufdringlich sind oder nicht, ist nicht so einfach wie die Eingabe Ihrer Website in ein Online -Tool und warten darauf, dass es eine Zecke zurückgibt oder nicht.
Es ist erforderlich, die interstitiellen Anzeigen und Dialoge auf Ihrer Website zu untersuchen und zu entscheiden, ob sie bestimmte Parameter übergeben.
Stellen Sie sich diese Parameter als Fragen vor, zum Beispiel:
Wenn Sie eine dieser Fragen mit Ja beantworten, ist dies wahrscheinlich ein Indikator dafür, dass das Anzeigen- oder Dialogfeld aufdringlich ist.
Jetzt, da wir ein festes Verständnis für die verschiedenen Komponenten der vier Komponenten haben, die auf Seitenerfahrung zählen, sowie über die Mittel zur Überwachung ihrer Leistung gehen, gehen wir weiter, um zu untersuchen, wie genau wir die Ranking -Signale unserer Websites steigern können
Wir werden uns zuerst CWVS ansehen, da das Debuggen und Optimieren von LCP, CLS und FID den größten Einfluss auf Ihre Fähigkeit haben, um Spitzenplätze in stark umkämpften SERP -Rankings zu konkurrieren.
Während mobile Freundlichkeit für Websites, die auf mobile Benutzer abzielen, unglaublich wichtig ist, wird die Verbesserung der CWVs die Leistung für Websites verbessern, unabhängig davon, ob sie auf mobilen Geräten oder Desktops angezeigt werden.
Die Bekämpfung von HTTPs und aufdringlichen Interstitials wurde am Ende überlassen, da sie einfacher und weniger lohnend sind.
Es gibt eine Reihe von Optionen, wenn es um die Verbesserung der CWV -Leistung geht, die wir in der Reihenfolge der Bedeutung, von der wir glauben, dass sie sie verdienen, unterteilt.
Die Optimierung der Kern -Web -Vitale einer Seite ist ein Aktionsspektrum und es ist wichtig zu wissen, wo Sie anfangen sollen, Ihre Ressourcen zu maximieren.
Wie wir bereits oben erwähnt haben, misst der größte inhaltliche Lack (LCP), wie lange es dauert, um den größten Text- oder Bild -Asset, der über der Falte sichtbar ist, vollständig geladen zu werden.
Verwenden Sie PSI, um zu ermitteln, welcher Seiteninhalt den LCP -Test auslöst, indem Sie in den Abschnitt "Diagnose" des Berichts gehen und auf "größtes inhaltliches Lackelement" klicken. Folgendes haben wir auf der SODP -Homepage gesehen:
Eine schlechte LCP-Punktzahl kann normalerweise entweder auf langsame Server-Antwortzeiten, die Renderblockierung von JavaScript und CSS, Ressourcenlastzeiten oder das clientseitige Rendering oder sogar eine Kombination aller vier eingeschränkt werden.
Die Optimierung Ihrer Seite umfasst tatsächlich die Optimierung von vier verschiedenen Unterabschnitten des LCP -Lastprozesses:
Alle diese Schritte müssen für Sie optimiert werden, um eine Verbesserung Ihrer LCP -Punktzahl zu erkennen. Dies bedeutet jedoch nicht, dass alle Unterteilungen gleichermaßen wichtig sind.
Google hat vorgeschlagen, dass die gesamte LCP -Zeit mit TTFB- und Ressourcenlastzeit abgebaut werden sollte, die jeweils rund 40% berücksichtigen, während Ressourcenlast und Elementverzögerungen jeweils weniger als 10% ausmachen.
Im Idealfall sollten die letzten beiden so nahe wie möglich Null sein und in den beiden anderen Phasen Vorrang haben.
Es gibt zwei Möglichkeiten, um die Ressourcenlastverzögerung so nahe wie möglich auf Null zu senken:
Wir werden das sofort sagen, wir empfehlen, uns mit Ihrem Webentwickler zu beraten, bevor wir uns mit diesen Korrekturen befassen. Dies ist eine Backend -Operation und erfordert eine erfahrene Hand, damit sie wie gewünscht funktioniert.
Ressourcenentdeckung
Jeder Webbrowser verfügt über einen Vorspannscanner, dessen Aufgabe es ist, den primären HTML -Parser des Browsers beim Erkennen von Seiteninhalten zu unterstützen.
Während der primäre HTML -Parser das Roh -Markup verarbeitet, bis es in eine Blockierungsressource eingeht - z. B. ein Skript, das kein asynchronisiertes oder aufschiebendes Attribut enthält, spielt der Vorspannungsscanner eine spekulativere Rolle.
Mit anderen Worten, der Vorspannungsscanner sucht nach Ressourcen, um vor dem primären HTML -Parser zu holen, und funktioniert weiterhin, auch wenn der Parser blockiert ist. Der Vorspannungsscanner kann verwendet werden, um die LCP so nahe wie möglich an der anfänglichen Seitenanforderung zu finden und zu laden.
Um sicherzustellen, dass die LCP -Ressource von der HTML -Quelle von der HTML -Quelle erfasst werden kann, haben Entwickler spezifische Optionen.
Wenn das LCP beispielsweise ein Bild ist, müssen seine SRC- oder SRCSet -Attribute im Quellcode vorhanden sein. CSS -Hintergrundbilder können inzwischen durch einbezogen werden im HTML -Markup oder im Header. Schließlich können Schriftarten in ähnlicher Weise über geladen werden .
Es ist jedoch erwähnenswert, dass die Verwendung von Vorspannungen zur Verringerung der Ladungszeiten von LCP neue Probleme in die Mischung einführen kann, wie z . Es gibt einen Grund, warum wir uns dafür einsetzen, mit Ihrem Entwickler darüber zu sprechen.
Weitere Informationen zu diesem Thema finden Sie in der LCP -Optimierung und dem Vorspannungsscanner .
Ressourcenpriorität
Browser versuchen, CSS, Schriftart, Skript, Bild und Iframe so optimal wie möglich herunterzuladen, indem sie Priorität zuweisen. Browser sind hervorragend darin, Prioritäten der Vermögenswerte herauszufinden, aber das bedeutet nicht, dass sie makellos sind.
Um die Priorisierung der Vermögenswerte zu optimieren, können Entwickler für die Markup-basierte Prioritätshinweise für die Signalisierung von Browsern verwenden, welche Vermögenswerte 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 diese bestimmte CWV -Metrik zu beschleunigen.
Es ist erwähnenswert, dass Prioritätshinweise nur für Browser auf Chrombasis wie Google Chrome und Microsoft Edge funktionieren.
Ihr Entwickler hat möglicherweise bereits faules Laden für unterhalb des Faltvermögens implementiert, um sie sicher zu machen, aber es lohnt sich auch, dass sie Prioritätshinweise für Vermögenswerte über der FALF verwenden.
Für weitere Informationen zum Prioritätsladen empfehlen wir dringend, die Google -Anleitung zum Laden von Ressourcen .
Das Dev -Team des Suchgiganten konnte vorrangige Hinweise zur Verbesserung der LCP von 2,6 Sekunden auf 1,9 Sekunden in einem Test von Google Flights verwenden.
FID verfolgt, wie lange der Browser eines Benutzers dauert, um die erste Eingabe zu verarbeiten - ohne Scrollen und Zoom.
In dieser Maßnahme geht es darum, die Erfahrung des Benutzers mit einer Webseite zu erfassen, was bedeutet, dass träge Webseiten schlecht punkten. Das Ziel unter 100 Millisekunden zu halten, ist das Ziel.
Eine schlechte Reaktionsfähigkeit hängt im Allgemeinen auf eine übermäßige Verwendung von JavaScript ab, die Browser vor Eingaben verarbeiten.
Der Code, der den Fokus eines Browsers für 50 Millisekunden oder mehr verbraucht, wird als lange Aufgabe bezeichnet und als Zeichen für JavaScript -Aufblähschaften angesehen. Das Aufteilen dieser langen Aufgaben in kleinere Codebrocken kann die schleppende Leistung aufnehmen und FID verbessern.
Dies ist jedoch nicht der einzige Bereich, der es wert ist, mit Ihrem Entwickler zu diskutieren. Es ist wichtig zu diskutieren, wie sowohl Erstanbieter- als auch Drittanbieter-Skriptausführung Ihre Website verlangsamen können. Das progressive Laden von Code und Funktionen kann dazu beitragen, die Herausforderungen der ersteren zu begegnen, während die Lade- und Ladepriorisierung auf dem Nachfrage bei letzteren helfen kann.
Eine weitere Option wäre die Verwendung von Web Worten , um JavaScript im Hintergrund auszuführen und zu verhindern, dass Ihr Browser festgefahren wird, um die Verarbeitungsskripte abzubauen.
CLS ist im Grunde eine Messung der visuellen Stabilität Ihrer Website. Wenn Ihre Besucher ihren Platz auf einer Seite verlieren, dank des Inhalts, um sich für Anzeigen und Bilder umzuladen, wird Ihre Website schlecht punkten.
Je weniger Ihr Seitenlayout herumspringt, desto besser ist Ihr CLS -Wert. Google beurteilt Websites, indem sie die Störung innerhalb des Ansichtsfensters berücksichtigt und wie weit Vermögenswerte im Verhältnis dazu gesprungen sind.
Das Minimieren unerwarteter Layoutverschiebungen dreht sich im Wesentlichen um die Bestimmung von Raum für Anzeigen, Bilder und eingebettete Videos.
Erinnern Sie sich an die SRC- oder SRCSET -Attribute, die wir uns beim Sprechen über Ressourcenentdeckungen angesehen haben? Nun, das ist ziemlich entscheidend für die Verbesserung der CLS -Werte.
Setzen Sie für statische Bilder die Breite und Höhe mit den SRC -Attributen ein, um den Browser zu sagen, dass sich der Platz für langsamere Ladevermögen reserviert, wodurch Layoutverschiebungen vermieden werden.
Siehe den Beispielcode von Google unten:
Responsive Bilder erfordern ein SRCSet , um die maximale Breite und die Höhengrenzen des Browsers zu definieren. Stellen Sie sicher, dass Sie Bilder mit dem gleichen Seitenverhältnis verwenden.
Hier ist ein weiteres Beispiel:
Beim Umgang mit Anzeigen können Sie einige Schritte unternehmen:
Das Reservieren des statischen Speicherplatzes wird auch empfohlen, wenn Sie beabsichtigen, IFRames, eingebettete Inhalte und dynamische Inhalte, wie z. B. Aktionsaufrufe (CTAs), zu implementieren.
Wenn Browser Web -Schriftarten herunterladen und rendern, besteht die Möglichkeit, dass entweder ein Blitz von nicht styledem Text (FOUT) oder ein Blitz unsichtbarer Text (FOIT) auftritt. Ersteres passiert, als eine Fallback -Schriftart mit einer neuen Schriftart ausgetauscht wird, während letzteres das Ergebnis einer Verzögerung in einer neuen Schriftart ist.
Sie können beide Probleme durch die Verwendung lösen Um dem Vorspannungsscanner zu sagen, er solle sich früher die Web -Schriftarten greifen. Vorausgelagte Schriftarten haben eine größere Chance, die erste Farbe zu treffen.
Es gibt andere Lösungen im CLS -Fehlerbehebungshandbuch sowie in der Verwendung von Vorspannungen, um FOIT zu verhindern .
Wenn Sie nach Verbesserungen der Site-Geschwindigkeit suchen und weiterhin eine herkömmliche Hosting-Option mit Single-Server-Hosting verwenden, ist es wahrscheinlich an der Zeit, in Betracht zu ziehen, zu einem Content Delivery Network (CDN) zu wechseln.
Ein CDN besteht aus einem Netzwerk von Servern in verschiedenen Rechenzentren auf der ganzen Welt, die die Website -Inhalte verteilen, um die Leistung zu verbessern. Während sowohl eine einzelne Serveroption - auch als lokales Hosting bezeichnet - als auch CDN -Inhalte für Besucher von Website -Inhalten liefern, kann nur ein CDN den geografischen Standort des Benutzers berücksichtigen und dann den nächsten Server auswählen, um die Ladezeiten zu verkürzen.
Die Geographie ist jedoch nicht der einzige Vorteil, da CDNs auch besser gerüstet sind, um plötzliche Verkehrspikes sowie Root -Server -Ressourcen wie Bandbreite zu verwalten.
Letztendlich sendet ein schnelleres Browsing -Erlebnis ein starkes CWV -Signal an Google. Während Cloudflare einer der bekanntesten CDN -Anbieter auf dem Markt ist, müssen eine Reihe schwerwiegender Wettbewerber berücksichtigt werden .
Unabhängig davon, welchen Hosting -Anbieter Sie verwenden, werden ihre Server an bestimmte Hardwarebeschränkungen gebunden.
Server enthalten größtenteils dieselben Schlüsselkomponenten, mit denen Ihr Laptop/Desktop - eine CPU und einen RAM - funktionieren kann, die alle Aufgaben Ihres Kontos erledigen. Sie sollten in der Lage sein, das Dashboard Ihres Hosting -Anbieters zu verwenden, um die auf Ihrem Server installierte CPU und RAM zu überprüfen und sogar zusätzliche Ressourcen anzufordern, um die Leistung Ihrer Website zu steigern.
Wenn Sie sich die CPU Ihres Servers ansehen, ist es wichtig zu verstehen, dass nur ein einzelner Kern verwendet wird, um die Anfrage eines Besuchers für eine Webseite zu erfüllen. Dies bedeutet, dass eine schnellere Taktgeschwindigkeit von Einzelkern immer eine. Multi-Cores-CPUs können mehrere Seitenansichten und andere Serverdienste verarbeiten.
Dies ist eine weitere für Ihren Entwickler.
Überprüfen Sie Ihre Datenbank halbfrequent, um sicherzustellen, dass sie nicht mit nicht verwendeten Fotos und Dateien aufgebläht sind. Durch das Löschen unnötiger Dateien werden sie enttäuscht und durchschnittliche Seitenladezeiten beschleunigen.
Die Verwendung von wirklich großen Bildern kann und wird Ihre Website verlangsamen. Wie groß? Alles über 1 MB ist einfach zu groß.
Und wie wir bereits wissen, führen langsamere Ladezeiten zu höheren Absprungraten und senden unerwünschte Signale an Google.
Für diejenigen auf WordPress gibt es eine Reihe von Plugins von Bildoptimierung , aus denen eine ansonsten mühsame manuelle Aufgabe rationalisieren kann. Darüber hinaus sind viele auch mit anderen Funktionen wie faulen Laden und automatischen Auflösungen ausgestattet.
Ob eine Website mobilfreundlich ist oder nicht, dreht sich um, ob Sie Ihre Website für das mobile Browsing -Erlebnis vereinfacht und optimiert haben.
Mobile Benutzer interagieren unterschiedlich mit Seiten und haben viel weniger Geduld für langsame Ladezeiten und schwer zu navigieren. Wenn Ihre Website den oben beschriebenen mobilenfreundlichen Test nicht bestanden hat oder wenn sie auch an weiteren Optimierung interessiert ist, gehen wir einige der besten Praktiken durch.
Dies sollte das Hauptanliegen jedes Verlags sein. Eine einfache Möglichkeit, die Benutzerfreundlichkeit zu besprechen, besteht darin, sich Fragen zu stellen, wie z. B.:
Diese Antworten leisten einen großen Beitrag zur Identifizierung von Schmerzpunkten der Benutzer. Zum Beispiel möchten Sie Ihre Benutzer nicht dazu bringen, ihre Bildschirme so anzupassen, dass Sie Ihre Inhalte angezeigt haben. Sie können sehen, was wir im folgenden Beispiel meinen.
Um Ihre Inhalte für mobile Geräte zu optimieren, gibt es drei Entwicklungsoptionen:
Wir haben sie in Bezug auf die einfache Implementierung bestellt und empfehlen, ein reaktionsschnelles Design anzuwenden, da es die am wenigsten anspruchsvolle der drei Optionen ist.
Entwickler fügen einfach das meta name = "Ansichtsfenster" -Tag zu dem vorhandenen Code einer Webseite
Der Vorteil hier ist, dass Sie nur eine Website verwalten müssen, die einfach über einen beliebigen Bildschirmtyp angezeigt werden kann.
Im Gegensatz dazu werden dynamische Designs funktionieren, indem sie unterschiedlichen HTML -Code basierend auf dem Gerät des Benutzers bedienen. Seiten müssen den variablen HTTP -Header verwenden, um zu verhindern, dass der falsche Code dem falschen Gerät zugestellt wird.
Schließlich gibt es mobile Subdomains, die wir angesichts der Anzahl der Ressourcen, die zur effektiven Umsetzung erforderlich sind, nicht empfehlen. Mobile Subdomains sind vollständig getrennte Websites, die die Hosting -Anforderungen trennen. Um sicherzustellen, dass Crawler die Beziehung zwischen Domain und Subdomain verstehen, müssen Sie das Rel = "Canonical" -Tag einbeziehen.
Da Responsive Designs die einfachste Option sind, empfehlen wir den Verlage. Eine genauere Übersicht über das reaktionsschnelle Design finden Sie in Googles Implementierungshandbuch .
Hier finden Sie eine kurze Liste technischer Überlegungen für jedes Design:
Dieser letzte Schritt ist die einfachste Art, die Seitenerfahrung zu verbessern, aber auch einen langen Weg zur Verbesserung der Sicherheit Ihres Benutzers.
Wenn Sie auf HTTPS wechseln, schützt und verschlüsselt es die Informationen Ihrer Benutzer und hilft auch, den Menschen in den mittleren Angriffen (MITM) zu verhindern. Darüber hinaus beseitigt ein SSL -Zertifikat Browserwarnungen vor mangelnden Sicherheit.
Ihr Hosting -Anbieter sollte Ihnen wirklich in der Lage sein, Ihnen HTTPS -Sicherheit zu bieten. Wenn dies nicht der Fall ist, kann es sich lohnt, einen Umzug zu einem zu erwägen, der dies tut. Es gibt bereits mehrere bemerkenswerte Hosting -Anbieter, die HTTPS kostenlos zur Verfügung stellen . Darüber hinaus nutzen die Hosting -Anbieter, die SSL -Zertifikate anbieten, ihren eigenen Service anstelle des externen Dienstes, wodurch der Prozess noch einfacher und schneller zu implementiert ist.
Wenn Sie ein SSL -Zertifikat von Certificate Authorities (CAS) anfordern und installieren möchten, müssen Sie vier Schritte befolgen. Diese sind:
Es ist wichtig sicherzustellen, dass Sie bei der Migration Ihrer Website auf HTTPS nicht auf Ihre Anzeigeneinnahmenstrategie auswirken. Das Problem ist, dass ein HTTPfunktioniert auf einer Website mit HTTPS nicht.
Wir beraten die Beratung mit Ihren Anzeigen -Tech -Partnern, bevor wir Änderungen an Ihrer Website vornehmen.
Weitere Informationen finden Sie in der umfassenden Anleitung von Google zu diesem Thema.
Aufdringliche interstitielle Anzeigen und Dialogfelder machen Suchmaschinen schwierig, den Inhalt einer Webseite zu verstehen, die die SERP -Leistung untergraben können.
Es wäre großartig, wenn es eine Möglichkeit gäbe, Interstitials zu erstellen, die die Benutzererfahrung nicht störten, aber das ist der gesamte Punkt solcher Anzeigen. Sie übernehmen den gesamten Bildschirm bei Pausen in Inhalten, um die Aufmerksamkeit des Benutzers zu gründen.
Daher wären Verlage besser dran, Banner -Anzeigen anstelle von interstitiellen Anzeigen zu verwenden, da sie nur einen kleinen Teil der Bildschirmimmobilien in Anspruch nehmen. Besser riskieren Bannerblindheit als Benutzerfrustration.
Verlage können von Browser unterstützte Banner oder einfache HTML-Banner verwenden, die auf die Zielseite des CTA verlinken.
Dialogfelder können auch für Werbekampagnen verwendet werden, diese können jedoch als unbeabsichtigt gestaltet werden. Sie müssen sicherstellen, dass Benutzer ohne Unterbrechung auf Inhalte zugreifen können.
Es gibt keine wirklichen Abkürzungen, um Ihre Seitenerfahrung zu optimieren, und es ist wichtig, dass Sie die oben genannten Punkte beheben. Nachdem dies gesagt wurde, lohnt es sich, darauf hinzuweisen, dass WordPress zwar die beliebteste Veröffentlichungsplattform der Welt ist, dies jedoch nicht unbedingt das beste CMS ist, wenn es darum geht, die CWV -Leistung zu steigern.
Wenn Sie sich den CWVS -Technologiebericht ansehen, zeigt nur rund 29% der WordPress -Websites gute CWVs, während 41% der Wix -Websites den grünen Zecken erhalten.
Es lohnt sich, darüber nachzudenken, ob das Umschalten auf ein spezialisiertes CMS Ihre CWVs nativ verbessern könnte.
Wenn es darum geht, die Seitenerfahrung zu optimieren, gibt es viel Boden zu decken, und der Einstieg kann ein wenig entmutigend sein. Es ist jedoch wichtig, sich daran zu erinnern, dass Sie den Elefanten essen, indem Sie jeweils einen Bissen nehmen.
Es ist nicht erforderlich, eine „gute“ Punktzahl in all Ihren CWV -Metriken zu erreichen, um Ihre Website auf die SERPs zu steigern. Darüber hinaus kann es jedoch produktiv kontert werden, solche hohen Ziele zu setzen, da es sich um eine demoralisierende Verfolgung handelt.
Ziehen Sie vielmehr kleine Siege in Bezug auf Ihre CWVs ab und konzentrieren Sie sich auf die Bekämpfung der „schlechten“ Ergebnisse, ohne sich über die Bar „Bedürfnisverbesserung“ zu sorgen. Dies kann später kommen, wenn Sie mehr Zeit und Ressourcen für den Prozess haben.
Wir haben bereits über Yahoo! Japans verbesserte CLS -Punktzahl, schauen wir uns noch ein paar Websites an, von denen wir einige Lektionen lernen können.
Indian Daily the Economic Times, die mehr als 45 Millionen monatlich aktive Benutzer bedient, senkte den CLS -Wert von 0,25 auf 0,09 und seine LCP -Zeit von 4,5 Sekunden auf 2,5 Sekunden um 250%.
Zwischen Oktober 2020 und Juli 2021 trimmte der Verlag die LCP -Werte im „schlechten“ Bereich um 33%, während die CLS -Werte im „schlechten“ Bereich um 65%zurückgingen. Diese Gewinne ermöglichten es den wirtschaftlichen Zeiten, CWV -Schwellenwerte über ihren gesamten Ursprung zu bestehen und gleichzeitig die Sprungraten um 43%zu verringern.
Der Verlag hat dies in vielerlei Hinsicht erreicht, wobei der erste davon die Priorität von Asset -Download -Prioritäten mithilfe von Prioritätshinweisen war. Es wurde auch mit langen Aufgaben behandelt, um Codebrocken aufzubrechen, um sicherzustellen, dass Ressourcen, die für das Rendern der Faltenseite von entscheidender Bedeutung sind, zuerst geladen wurden.
Die britische Nachrichten -Website verbesserte den CLS -Wert von 0,25 auf 0,1 und erhöhte die Anzahl der URLs, die eine bestehende Note von 57% auf 72% erhielten.
Der Telegraph verwendete Chrom Devtools, um einzelne Instanzen des Verschiebungslayouts zu identifizieren.
Verwenden Sie zuvor WebPagetest, um zu finden, wo in der Zeitleiste die Layoutverschiebung aufgetreten ist.
Mit diesen Daten in der Hand konzentrierte sich das Team auf die Reduzierung von Layoutverschiebungen, indem sie diese Bereiche in Angriff nehmen
Für Anzeigen begannen die Telegraphen mit der Reservierung von Platz für sie und verwendeten die häufigste Anzeigengröße, um Dimensionen anzugeben. Dies trug auch dazu bei, dass die Anzeigen beim Einblick in ein Tablet zusammenbrechen.
Das Team hat ein ähnliches Problem mit Inline -Bildern oben in den Artikeln angegangen, die keine festgelegten Dimensionen hatten.
Der Telegraph nahm andere Anpassungen vor, wie z. B. das Verschieben des Headers an die Spitze des Markups und die Verwendung von Platzhaltern für eingebettete Videos, bezeichnete jedoch letztendlich den Prozess als „recht einfach“, während sie dennoch einen signifikanten Einfluss hatten.
Die Verbesserung der Seitenerfahrung muss nicht überwältigend sein. Messen Sie die vier Säulen der Seitenerfahrung und entscheiden Sie dann, welche Ressourcen Sie für die Verbesserung Ihrer Ergebnisse widmen können.
Wenn Sie ein kleinerer Verlag sind, ist der Ressourcenausgleich von entscheidender Bedeutung und wir empfehlen, einigermaßen niedrig hängende Früchte für Ihr erstes Projekt zu identifizieren.
Als sie sich den Ansatz des Telegraphen angesehen, konzentrierten sie sich eher auf einen Aspekt der CWVs als auf alle drei und machten signifikante Verbesserungen vor. Die wirtschaftlichen Zeiten konzentrierten sich auf zwei der drei, um einige beeindruckende Ergebnisse zu liefern.
