Heim > Web-Frontend > CSS-Tutorial > Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet

Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet

William Shakespeare
Freigeben: 2025-03-24 10:19:14
Original
536 Leute haben es durchsucht

Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet

Es ist leicht zu vergessen, dass Google als Suchmaschine nicht nur Keywords vergleicht, um Suchergebnisse zu generieren. Google weiß, dass Menschen, wenn sie ihre Erfahrungen auf einer Webseite nicht genießen, nicht lange genug auf der Seite bleiben, um den Inhalt zu konsumieren - egal wie relevant es ist.

Infolgedessen hat Google mit Möglichkeiten experimentiert, die Benutzererfahrung von Webseiten mithilfe quantifizierbarer Metriken zu analysieren. Wenn man diese in seine Suchmaschinenrankings berücksichtigt, ist es gehofft, den Benutzern nicht nur mit großartigen, relevanten Inhalten, sondern auch mit großartigen Benutzererlebnissen zu versehen.

Googles bald eingestrebter Seitenerlebnis-Update von Google ist ein wichtiger Schritt in diese Richtung. Website-Eigentümer mit bildlebigen Websites müssen besonders wachsam sein, um sich an diese Veränderungen anzupassen oder auf der Strecke zu riskieren. In diesem Artikel werden wir über alles sprechen, was Sie über dieses Update wissen müssen und wie Sie es voll ausnutzen können.

Hinweis: Google hat im Mai 2020 seine Pläne für Seitenerfahrungen eingeführt und im November 2020 angekündigt, dass es im Mai 2021 beginnen wird. Google hat jedoch seitdem seine Pläne für eine schrittweise Einführung ab Mitte Juni 2021 verzögert. Dies geschah, um der Website zuerst die Zeit zu geben, um die Website der Website zu bewältigen.

Ein Hintergrund

Bevor wir uns mit der neuesten Iteration von Änderungen befassen, wie Google Factors User Experience -Metriken in Suchmaschinen -Rankings einen Kontext erhalten. Im April 2020 hat Google in diese Richtung gedrängt, indem er eine neue Initiative einführte: Kern -Web -Vitals.

Core Web Vitals (CWV) wurden eingeführt, um Webentwicklern zu helfen, mit den Herausforderungen umzugehen, um die Suchmaschinenrangliste mit prüfbaren Metriken zu optimieren - etwas, das schwierig mit einer sehr subjektiven Sache wie der Benutzererfahrung zu tun hat.

Dazu identifizierte Google drei wichtige Metriken (was es als „benutzerorientierte Leistungsmetriken“ bezeichnet). Diese sind:

  1. LCP (größte inhaltliche Farbe): Das größte Element über der Falte, wenn eine Webseite ursprünglich geladen wird. In der Regel ist dies ein großes Bild oder einen Kopfball. Wie schnell spielt das größte Inhaltselementlast eine große Rolle, wie schnell der Benutzer die Gesamtladungsgeschwindigkeit der Seite wahrnimmt.
  2. FID (erste Eingabedelegel): Die Zeit, die zwischen einem Benutzer zum ersten Mal mit der Seite interagiert und wenn der Haupt -Thread kostenlos ist, damit der Browser das Ereignis verarbeitet. Dies kann auf eine Schaltfläche, einen Link oder die Interaktion mit einem anderen dynamischen Element klicken/tippen. Verzögerungen bei der Interaktion mit einer Seite können für Benutzer offensichtlich frustrierend sein. Deshalb ist es entscheidend, FID niedrig zu halten.
  3. Cumulative Layout -Verschiebung (CLS): Dies berechnet die visuelle Stabilität einer Seite, wenn sie zum ersten Mal geladen wird. Der Algorithmus berücksichtigt die Größe der Elemente und die Entfernung, die sie für das Ansichtsfenster relevant bewegen. Seiten, die mit hoher Instabilität geladen werden, können zu Fehlern von Benutzern führen, was auch zu frustrierenden Situationen führt.

Diese Metriken haben sich aus rudimentäreren, die seit einiger Zeit verwendet werden, wie SI (Speed ​​Index), FCP (erster inhaltlicher Farbe), TTI (Zeit-zu-Interaktiv) usw.

Der Grund dafür ist wichtig, dass Bilder eine wichtige Rolle bei der Bewertung der CWVS Ihrer Website spielen können. Zum Beispiel ist die LCP häufiger ein über dem Faltes Bild oder zumindest muss mit einem Bild konkurrieren, um zuerst geladen zu werden. Bilder, die nicht korrekt verwendet werden, können sich auch negativ auf CLS auswirken. Langsamladende Bilder können sich auch auf die FID auswirken, indem die Gesamtwiedergabe der Seite weitere Verzögerungen hinzufügt.

Darüber hinaus stand dies auf der Rückseite des erneuten Fokussiers von Google auf die mobile Indexierung. Daher sind diese Metriken nicht nur für Ihre Website wichtig, sondern Sie müssen auch sicherstellen, dass Ihre Seiten auch auf mobilen Geräten gut punkten.

Was wird sich ändern? Seitenerfahrung für die Google -Suche

Es ist klar, dass Google im Allgemeinen die Benutzererfahrung in Bezug auf Suchmaschinenrankings zunehmend priorisiert. Das bringt uns zum neuesten Update-Google nun plant, die Seitenerfahrung als Ranking-Faktor einzubeziehen, beginnend mit einem frühen Rollout Mitte Juni 2021.


Also, was ist Seitenerfahrung? Kurz gesagt, es ist ein Ranking -Signal, das Daten aus einer Reihe von Metriken kombiniert, um zu versuchen, festzustellen, wie gut oder schlecht die Benutzererfahrung einer Webseite ist. Es besteht aus den folgenden Faktoren:

  • Kern -Web -Vitals: Verwenden Sie dieselben, unveränderten Kern -Web -Vitals. Google hat Richtlinien und empfohlene Ranglisten festgelegt, die Sie hier finden können. Sie benötigen eine allgemeine „gute“ CWV -Bewertung, um sich für eine "gute" Seitenerlebnisbewertung zu qualifizieren.
  • Mobile Usability: Eine URL muss keine mobilen Usability -Fehler haben, um sich für eine "gute" Seitenerlebnis -Punktzahl zu qualifizieren.
  • Sicherheitsprobleme: Alle markierten Sicherheitsprobleme disqualifizieren Websites.
  • HTTPS: Seiten müssen über HTTPS serviert werden, um sich zu qualifizieren.
  • Anzeigenerfahrung: Maßnahmen inwieweit, inwieweit Anzeigen die Benutzererfahrung auf Ihrer Webseite negativ beeinflussen, indem sie beispielsweise aufdringlich, ablenkend usw. sind, usw.

Im Rahmen dieser Änderung kündigte Google seine Absicht an, einen visuellen Indikator oder einen Abzeichen aufzunehmen, der Webseiten hervorhebt, die seine Seitenerfahrungskriterien überschritten haben. Dies ähnelt den früheren Abzeichen, die die Suchmaschine zum Förderung von AMP (beschleunigte mobile Seiten) oder mobilfreundliche Seiten verwendet hat.

Diese offizielle Anerkennung bietet leistungsstarke Webseiten einen massiven Vorteil in der wettbewerbsintensiven Arena, die Googles SERPs ist. Dieser visuelle Hinweis wird zweifellos die CTRs und den organischen Verkehr steigern, insbesondere für Standorte, die bereits gut rangieren. Diese Funktion kann so schnell wie Mai sinken, wenn es seine aktuelle Versuchsphase überschreitet.

Eine weitere gute Nachricht für Nicht-Ampere-Benutzer ist, dass alle Seiten jetzt sowohl in der Browser- als auch in der Google News-App für Top-Geschichten berechtigt sind. Obwohl Google angibt, dass sich Seiten für Top -Stories qualifizieren können, „unabhängig von seinem Kern -Web -Vitals -Score oder -Seitenerfahrungsstatus“, ist es schwer vorstellbar, dass dies keine Rolle für die Berechtigung oder in der Lage ist.

Key Takeaway: Was bedeutet das für Bilder auf Ihrer Website?

Google stellte einen Anstieg der Verbrauchernutzung von Leuchtturm- und PageSpeed ​​-Insight -Tools fest und zeigt, dass Website -Eigentümer die Bedeutung der Optimierung ihrer Seiten einholen. Dies bedeutet, dass Standards im Wettbewerb mit anderen Websites für Suchmaschinenrankings immer höher werden .

Google hat bekräftigt, dass der Inhalt trotz dieser Veränderungen immer noch König ist . Inhalte sind jedoch mehr als nur der Text auf Ihren Seiten, und wirklich ansprechende und benutzerfreundliche Inhalte besteht auch aus sorgfältig verwendeten Medien, von denen die meisten wahrscheinlich Bilder sein werden.

Mit den vorgeschlagenen Seitenerlebnisabzeichen und den Top -Geschichten, die zu gewinnen waren, waren die Einsätze noch nie höher, um mit dem Google -Suchalgorithmus hoch zu rangieren . Sie brauchen jeden Vorteil, den Sie bekommen können. Und wie ich zeigen möchte, kann das Optimieren Ihrer Bildgüter einen konkreten Einfluss auf die gute Bewertung nach diesen Metriken haben.

Was können Sie tun, um mitzuhalten?

Bevor ich meine Lösung vorschlage, um die Bildgüter für Kern -Web -Vitals zu optimieren, schauen wir uns an, warum Bilder oft nachteilig auf die Leistung sind:

  • Bilder aufblähen die Gesamtgröße Ihrer Website -Seiten, insbesondere wenn die Bilder nicht optimiert sind (dh unkomprimiert, nicht richtig dimensioniert usw.)
  • Bilder müssen auf verschiedene Geräte reagieren. Sie benötigen viel kleinere Bildgrößen, um die gleiche visuelle Qualität auf kleineren Bildschirmen zu erhalten.
  • Verschiedene Kontexte (Browser, OSS usw.) haben unterschiedliche Formate für optimal rendernde Bilder. Die meisten Bilder werden jedoch noch im .jpg/.png -Format verwendet.
  • Website -Eigentümer wissen nicht immer die Best Practices, die mit der Verwendung von Bildern auf Website -Seiten verbunden sind, z.

Mit herkömmlichen Methoden kann es viel Blut, Schweiß und Tränen erfordern, um diese Probleme anzugehen. Die meisten Lösungen wie manuelles Bearbeiten von Bildern und hartkodierende reaktionsschnelle Syntax haben inhärente Probleme mit der Skalierbarkeit, die Fähigkeit, sich auf Änderungen leicht zu aktualisieren/anzupassen und Ihre Entwicklungspipeline aufzublähen.

Um Ihre Bildgüter zu optimieren, insbesondere mit dem Fokus auf die Verbesserung der CWVs, müssen Sie:

  • Reduzieren Sie Bildnutzlasten
  • Effektives Caching implementieren
  • Beschleunigung der Lieferung
  • Verwandeln Sie Bilder in optimale Formate der nächsten Generation
  • Stellen Sie sicher, dass die Bilder reagieren
  • Implementieren Sie die Laufzeitlogik, um die optimale Einstellung in verschiedenen Kontexten anzuwenden

Glücklicherweise gibt es eine Klasse von Tools, die speziell zur Lösung dieser Herausforderungen und zur Bereitstellung dieser Lösungen - Image CDNs, entwickelt wurden. Insbesondere möchte ich mich auf Imagegine konzentrieren, das andere CDNs auf Seitenleistungstests, die ich durchgeführt habe, konsequent übertroffen hat.

Imagegine ist ein intelligentes, von Geräte bewusstes Bild-CDN, mit dem Sie Ihre Website-Bilder (einschließlich GIFs) bedienen können. Imagegine verwendet die WURFL -Geräteerkennung, um den Kontext zu analysieren, auf das auf Ihre Website -Seiten (Gerät, Bildschirmgröße, DPI, Betriebssystem, Browser usw.) zugegriffen werden, und Ihre Bildvermögen entsprechend optimieren. Basierend auf diesen Kriterien kann es Bilder optimieren, indem sie intelligent die Größe, neu formatieren und komprimieren.

Es ist eine vollständig automatische Lösung, die nach dem Einrichten nur wenig bis gar keine Intervention erfordert. Die CDN verfügt über über 20 globale Pops, wobei die Logik in den Kantenservern in verschiedenen Regionen schneller eingebaut ist. Imagegine behauptet, Cache-Hit-Verhältnisse von bis zu 98% zu erreichen und die Bildnutzlast um 75% zu senken.

Schritt-für-Schritt-Test, wie Sie Imagegine verwenden, um die Seitenerfahrung zu verbessern

Um den Unterschied zu veranschaulichen, wie ein Bild -CDN wie Imagegine ausmachen kann, zeige ich Ihnen einen praktischen Test.

Schauen wir uns zunächst an, wie eine Seite mit einer riesigen Menge an Bildinhaltswerten mithilfe von PageSpeed ​​-Erkenntnissen. Es ist eine einfache Seite, besteht aber aus einer großen Anzahl hochwertiger Bilder mit einigen interaktiven Elementen wie Schaltflächen und Links sowie Text.

FID ist eindeutig, da es auf Daten aus realen Interaktionen mit Ihrer Website beruht. Infolgedessen kann FID nur "im Feld" gesammelt werden. Wenn Sie eine Website mit ausreichend Verkehr haben, können Sie die FID erhalten, indem Sie einen Seitenerlebnisbericht in der Google -Konsole generieren.

Für Laborergebnisse können wir jedoch aus Tools wie Lighthouse oder PageSpeed ​​-Erkenntnissen die Auswirkungen von Blockierressourcen vermuten, indem wir TTI und TBT betrachten.

Oh ja, und ich konzentriere mich auch aus mehreren Gründen auf die Ergebnisse einer mobilen Prüfung:

  1. Google selbst priorisieren mobile Signale und die mobile Indexierung
  2. Optimierung von Webseiten und Bildern sind für mobile Geräte/allgemeine Reaktionsfähigkeit häufig die schwierigsten
  3. Es bietet die Möglichkeit, die maximale Verbesserung zu zeigen, die ein Bild -CDN bieten kann

In diesem Sinne sind hier die Ergebnisse für unsere Seite:

Wie Sie sehen, haben wir also einige Probleme. PageSpeed ​​Insights markiert die beiden anwesenden CWVs, LCP und CLS. Wie Sie sehen können, haben wir aufgrund der riesigen Bildnutzlast (ungefähr 35 MB) eine lächerliche LCP von fast 1 Minute.

Aufgrund des unkomplizierten Layouts und der Tatsache, dass ich ausdrücklich Bilder von Breiten und Höhenattributen gegeben habe, war unsere Seite zufällig mit einem 0 CLS stabil. Es ist jedoch wichtig zu erkennen, dass langsame Ladebilder auch die wahrgenommene Stabilität Ihrer Seiten beeinflussen können. Selbst wenn Sie die CLS nicht direkt verbessern können, desto schneller beträchtliche Elemente wie Bildern laden Sie die Gesamterfahrung für reale Benutzer.

TTI und TBT waren auch unterdurchschnittlich. Es dauert mindestens zwei Sekunden ab dem Moment, in dem das erste Element auf der Seite angezeigt wird, bis die Seite interaktiv werden kann.

Wie Sie aus den Möglichkeiten zur Verbesserung und Diagnostik erkennen können, waren fast alle Probleme im Zusammenhang mit dem Bild:

Imagegine einrichten und die Ergebnisse testen

OK, jetzt ist es Zeit, Imagegine in die Mischung hinzuzufügen und zu sehen, wie es die Leistungsmetriken auf derselben Seite verbessert.

Das Einrichten von Imagegine auf nahezu jeder Website ist relativ einfach. Gehen Sie zuerst zu Imagegine.io und melden Sie sich für eine kostenlose Testversion an. Befolgen Sie einfach den einfachen 3-Stufen-Anmeldevorgang, bei dem Sie:

  1. Geben Sie die Website an, die Sie optimieren möchten.
  2. Der Webstandort, an dem Ihre Bilder gespeichert sind, und dann
  3. Kopieren Sie die Zustelladresse, die Sie zugewiesen haben.

Letzteres befindet sich im Format von {zufälliger String} .cdn.imgeng.in, kann jedoch innerhalb des Imagegine -Dashboards aktualisiert werden.

Um Bilder über diese Domain zu servieren, kehren Sie einfach zu Ihrer Website -Markup zurück und aktualisieren Sie die SRC -Attribute Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet. Zum Beispiel:

Aus:

 <img  src="%E2%80%9Dmywebsite.com/images/header-image.jpg%E2%80%9D/" alt="Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet" >
Nach dem Login kopieren

Zu:

 <img  src="%E2%80%9Dmyimages.cdn.imgeng.in/images/Header-image.jpg%E2%80%9D/" alt="Was das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet" >
Nach dem Login kopieren


Das ist alles, was Sie tun müssen. Imagegine zieht jetzt automatisch Ihre Bilder an und optimiert sie dynamisch, um die besten Ergebnisse zu erzielen, wenn Besucher Ihre Website -Seiten anzeigen. Sie können die offiziellen Integrationsführer in der Dokumentation zur Verwendung von Imagegine mit Magento, Shopify, Drupal und mehr überprüfen. Es gibt auch ein offizielles WordPress -Plugin.

Hier sind die Ergebnisse für meine Imagegine -Testseite, sobald sie eingerichtet ist:

Wie Sie sehen können, sind die Ergebnisse nahezu makellos. Alle Metriken wurden verbessert und punkten im grün - sogar im Geschwindigkeitsindex und im LCP, die von den großen Bildern signifikant beeinflusst wurden.

Infolgedessen gab es keine Verbesserungsmöglichkeiten mehr. Und wie Sie sehen können, reduzierte Imagegine die Gesamtseite die Nutzlast auf 968 kb und senkte den Bildinhalt um rund 90%:

Abschluss

Bis zu einem gewissen Grad ist es von Google mehr davon, der sich durchweg in eine mobile Richtung bewegt und eine wachsende Liste von Metriken verwendet hat, um das bestmögliche „Seitenerlebnis“ für die Suchmaschinenbenutzer zu verbessern. Neben der Bestätigung ihrer Bewegung in diese Richtung erklärte Google, dass sie ihre Liste der Signale weiterhin testen und überarbeiten werden.

Andere Metriken, die in ihren Tools aufgetaucht werden können, wie TTFB, TTI, FCP, TBT oder möglicherweise völlig neue Metriken, spielen bei zukünftigen Updates möglicherweise noch größere Rollen.

Lösungen zu finden, mit denen Sie jetzt und in Zukunft für diese Messdaten hoch punkten können, ist der Schlüssel, um in diesem hoch wettbewerbsfähigen Umfeld weiter zu bleiben. Während die Bildoptimierung nur eine Facette ist, kann sie erhebliche Auswirkungen haben, insbesondere auf bildlebige Websites.

Ein Bild -CDN wie Imagegine kann fast alle Probleme im Zusammenhang mit Bildinhalten mit minimaler Zeit und Anstrengung sowie zukünftiger Beweise Ihrer Website gegen zukünftige Updates lösen.

Das obige ist der detaillierte Inhalt vonWas das neue Seitenerlebnis -Update von Google für Bilder auf Ihrer Website bedeutet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage