Das Material, dessen Übersetzung wir heute veröffentlichen, ist der Geschwindigkeitsbewertung der Website gewidmet, die mit Google PageSpeed Insights berechnet werden kann.
Es ist kein Geheimnis, dass die Geschwindigkeit einer Site in unserer Zeit zu einem ihrer wichtigsten Merkmale geworden ist. Je schneller die Site geladen wird und sich auf die Arbeit vorbereitet, desto höher kann das Einkommen sein, das sie ihrem Eigentümer bringt. Eine Website zu beschleunigen bedeutet, die Anzahl der Benutzer zu verringern, die diese Website kaum besucht haben und sie verlassen, weil sie es satt haben, auf den Download ihrer Materialien zu warten. Von besonderer Bedeutung für die Website-Leistung ist die Tatsache, dass jetzt Google PageSpeed-Indikatoren als einer der Faktoren verwendet werden, die Websites in den Suchergebnissen bewerten. Infolgedessen achten viele Unternehmen heute genau auf die Geschwindigkeit ihrer Standorte.
Änderungen in den Site-Ranking-Algorithmen
Im vergangenen Jahr hat Google zwei wesentliche Änderungen an den Algorithmen für die Suchindizierung und das Website-Ranking vorgenommen.
- Im März basierte die Indizierung auf der mobilen Version der Seite und nicht auf dem Desktop.
- Im Juli wurde der SEO-Ranking-Algorithmus aktualisiert . Bei der Berechnung für Handy- und Werbeseiten wurde die Bewertung der Seitengeschwindigkeit verwendet.
Diese Tatsachen erlauben es uns, die folgenden Schlussfolgerungen zu ziehen:
- Die Geschwindigkeit der mobilen Version der Website wirkt sich auf das gesamte SEO-Ranking aus.
- Wenn die Seiten der Website langsam geladen werden, verringert dies den Anzeigenqualitätsfaktor und Anzeigen kosten mehr.
Dazu sagt Google Folgendes: „Schnellere Websites verbessern nicht nur die Nutzererfahrung. Aktuelle Daten zeigen, dass eine Erhöhung der Geschwindigkeit der Website zusätzlich zu einer Senkung der Supportkosten führt. Wir schätzen die Geschwindigkeit sehr. Gleiches gilt für unsere Nutzer. Aus diesem Grund haben wir beschlossen, bei der Berechnung der Suchranking-Indikatoren auch die Geschwindigkeit der Website zu berücksichtigen. “
Um zu verstehen, wie sich diese Änderungen auf unsere Projekte auswirken, um deren Leistung zu optimieren, müssen wir die Technologien verstehen, die der Bewertung der Standortgeschwindigkeit zugrunde liegen.
PageSpeed 5.0 ist eine vollständig überarbeitete Version dieses Systems. Jetzt basiert es auf Lighthouse und
CrUX (Chrome User Experience Report).
Dieses Update brachte außerdem einen neuen Bewertungsalgorithmus mit sich, der die Erzielung einer hohen Punktzahl in PageSpeed erheblich erschwert.
Was hat sich in PageSpeed 5.0 geändert?
Vor Version 5.0 überprüfte das PageSpeed-Tool die Seite und analysierte ihre Konformität mit einer Reihe heuristischer Regeln. Wenn die Seite große unkomprimierte Bilder enthält, kann PageSpeed dem Webentwickler empfehlen, diese Bilder zu komprimieren. Keine Cache-Header? Das System könnte ihnen raten, etwas hinzuzufügen.
Mit diesen Seitenprüfungen waren Empfehlungen verbunden. Das Befolgen von Empfehlungen kann zu einer besseren Seitenleistung führen. Heuristische Regeln waren jedoch eher oberflächlich. Sie zielten nicht darauf ab zu untersuchen, welche Eindrücke das Laden und Rendern einer Seite bei einer Seite einen echten Besucher einer Website hervorrufen würde.
In PageSpeed 5.0 werden Seiten in einen echten Chrome-Browser geladen, der von Lighthouse gesteuert wird. Lighthouse zeichnet die vom Browser erhaltenen Metriken auf, wendet das Bewertungsmodell auf sie an und zeigt eine Gesamtleistungsbewertung an. Empfehlungen zur Verbesserung der Leistung werden auf der Grundlage der Punkte gegeben, die auf der untersuchten Seite für einzelne Indikatoren erzielt wurden.
Lighthouse verfügt wie PageSpeed über ein System zur Leistungsbewertung der Website. In PageSpeed 5.0 wird die Leistungsbewertung direkt von Lighthouse übernommen. Die von PageSpeed ausgegebene Leistungsbewertung entspricht jetzt der von Lighthouse erstellten Bewertung.
Die Leistungsbewertung von PageSpeed basiert auf der von Lighthouse generierten BewertungNachdem wir nun wissen, woher der PageSpeed-Score stammt, wollen wir darüber sprechen, wie dieser Score berechnet wird und was getan werden kann, um die Geschwindigkeit der Website zu verbessern.
Was ist Google Lighthouse?
Lighthouse ist ein Open-Source-Projekt, das von einem speziellen Team verwaltet wird, das unter den Entwicklern von Google Chrome ausgewählt wurde. In den letzten Jahren hat sich Lighthouse zum kostenlosen Standardwerkzeug für die Analyse der Site-Leistung entwickelt.
Lighthouse verwendet das Chrome Remote Debugging-Protokoll (Chrome Remote Debugging Protocol), um Informationen zu Netzwerkanforderungen zu lesen, die Leistung von JavaScript-Code zu messen und die Einhaltung der Standards für den Zugriff auf Seiteninhalte zu überprüfen. Dieses Tool misst Zeitindikatoren, die sich auf die Wahrnehmung der Seite durch Benutzer konzentrieren. Dazu gehören beispielsweise
First Contentful Paint ,
Time to Interactive und Speed Index.
Wenn Sie sich für Lighthouse interessieren, schauen Sie sich
dieses Material aus dem offiziellen Projekt-Repository an, das der allgemeinen Beschreibung seiner Architektur gewidmet ist.
Berechnung der Standortleistungsbewertung in Lighthouse
Im Rahmen einer Seitenleistungsstudie schreibt Lighthouse viele Metriken, die sich darauf konzentrieren, zu bewerten, was der Benutzer sieht und was der Benutzer während der Arbeit mit der Seite erlebt. Hier sind sechs Metriken, die verwendet werden, um eine Gesamtleistungsbewertung abzuleiten:
- Zeit für die Interaktion (TTI, Download-Zeit für die Interaktion).
- Geschwindigkeitsindex.
- Erster inhaltlicher Anstrich (FCP, Downloadzeit des ersten Inhalts).
- Erster CPU-Leerlauf.
- Erste aussagekräftige Farbe (FMP, Download-Zeit für genügend Inhalt).
- Geschätzte Eingangslatenz.
Jeder dieser Indikatoren wird auf einer Skala von 0 bis 100 bewertet. Die Bewertung erfolgt durch Abrufen des 75. und 95. Perzentils für mobile Seiten aus dem
HTTP-Archiv und unter Verwendung der
log normal .
Wenn Sie diesem Algorithmus folgen und die zur Berechnung des TTI verwendeten Daten berücksichtigen, können Sie sehen, dass der TTI 92/100 beträgt, wenn die Seite in 2,1 Sekunden „interaktiv“ und für die Benutzerinteraktion geeignet wird.
TTINachdem jeder der Indikatoren berechnet wurde, wird ihm ein bestimmtes Gewicht zugewiesen, das als Modifikator bei der Berechnung des Gesamtindikators verwendet wird. Hier sind die Gewichte aufgeführt, die den verschiedenen Metriken zugewiesen sind.
Die Gewichte geben an, wie sich die einzelnen Indikatoren auf die Erfahrung des mobilen Benutzers mit der Seite auswirken.
In Zukunft kann dieser Satz um Indikatoren aus dem Chrome User Experience Report-Dataset erweitert werden, die sich auf die Wahrnehmung von Websites durch Benutzer beziehen.
Möglicherweise möchten Sie erfahren, wie sich die Verwendung von Gewichten auf die endgültige Leistungsbewertung auswirkt. Wenn ja, schauen Sie sich
diese Tabelle an, die vom Lighthouse-Team erstellt wurde. Nach der Analyse können Sie diesen Prozess besser verstehen.
Fragment einer Tabelle, die die Berechnung der Seitenleistungsbewertung demonstriertWenn Sie die
interactive Metrik im obigen Beispiel (dies wird hier als TTI bezeichnet) von 5 Sekunden auf 17 Sekunden ändern (dh auf das Niveau des globalen durchschnittlichen TTI für mobile Seiten), sinkt die Seitenbewertung auf 56% ( das heißt - sie wird 56 von 100 möglichen Punkten bekommen).
Wenn Sie die Anzeige für die
first-contentful-paint auf 17 Sekunden setzen, sinkt die Bewertung auf 62%.
Infolgedessen können wir den Schluss ziehen, dass die TTI-Metrik den größten Einfluss auf die endgültige Standortbewertung hat. Daraus folgt, dass Sie einen anständigen TTI nachweisen müssen, um eine hoch bewertete PageSpeed-Seite zu erhalten.
TTI-Verbesserung
Wenn wir das Problem der Verbesserung des TTI allgemein betrachten, können wir sagen, dass es zwei Faktoren gibt, die diesen Indikator extrem stark beeinflussen:
- Die Menge des auf die Seite geladenen JavaScript-Codes.
- Die Zeit, die benötigt wird, um verschiedene JavaScript-Aufgaben im Hauptthread auszuführen.
Hier finden Sie Details zu TTI. Wenn Sie jedoch schnell und ohne zusätzliche Nachforschungen den TTI Ihrer Website verbessern möchten, empfehlen wir Ihnen, die Menge an JavaScript-Code zu reduzieren.
Entfernen Sie nach Möglichkeit nicht verwendeten JavaScript-Code oder stellen Sie sicher, dass auf der Seite nur die auf dieser Seite verwendeten Skripts geladen werden. Die Erfüllung dieser Empfehlung kann bedeuten, alte Polyfills zu entfernen oder Bibliotheken von Drittanbietern durch kompaktere und modernere Alternativen zu ersetzen.
Es ist wichtig, sich daran zu erinnern, dass der sogenannte "
JavaScript-Preis " nicht nur die Zeit ist, die zum Herunterladen des Codes benötigt wird. Der Browser muss den geladenen JavaScript-Code entpacken, analysieren, kompilieren und schließlich ausführen. Alle diese Vorgänge können viel Zeit in Anspruch nehmen. Besonders auf mobilen Geräten.
Unter den wirksamen Maßnahmen zur Reduzierung der Menge an JS-Code, die von den Seiten verwendet wird, kann Folgendes festgestellt werden:
- Analyse der verwendeten Polyfills und Ablehnung derjenigen, die von Ihrem Publikum nicht mehr benötigt werden.
- Ermittlung der „Kosten“ für jede der verwendeten Bibliotheken von Drittanbietern. Um mehr über die Größe der im Projekt verwendeten Bibliotheken zu erfahren, können Sie Tools wie den Webpack-Bundle-Analyzer und den Source-Map-Explorer verwenden .
- Moderne JavaScript-Tools (wie Webpack) können große JS-Anwendungen in Gruppen kleiner Bundles aufteilen, die bei Bedarf automatisch geladen werden. Insbesondere, wenn ein Benutzer von Seite zu Seite einer Site wechselt. Dieser Ansatz zur Optimierung der Site-Leistung wird als Code-Aufteilung bezeichnet . Seine Verwendung hat einen sehr guten Effekt auf TTI.
- Verwenden Sie Servicemitarbeiter, die Bytecode zwischenspeichern, der sich aus dem Parsen und Kompilieren von Skripten ergibt. Wenn Sie solche Caching-Mechanismen in Ihr Projekt aufnehmen können, werden die Systemressourcen der Site-Besucher nur dann für das Parsen und Kompilieren des Codes verwendet, wenn Sie zum ersten Mal zur Ressource gehen. Bei wiederholten Besuchen der Site werden die erforderlichen Materialien aus dem Cache entnommen.
TTI-Überwachung
Um erfolgreich zu untersuchen, wie Ihre Website von Benutzern wahrgenommen wird, die sie anzeigen, empfehlen wir die Verwendung von Website-Leistungsüberwachungssystemen wie
Calibre . Wir sprechen insbesondere über die Tatsache, dass Websites auf mindestens zwei Geräten getestet werden - auf einem schnellen Desktop-Computer und auf einem Mobiltelefon, dessen Leistung auf dem Niveau langsamer Geräte der Mittelklasse liegt.
Mit diesem Ansatz verfügen Sie über Daten für die beste Option für die Arbeit mit Ihrer Site und für die schlechteste. Gleichzeitig müssen Sie sich daran gewöhnen, dass Besucher Ihrer Website nicht dieselben leistungsstarken Geräte verwenden, die Ihr Team verwendet.
Sorgfältige manuelle Profilerstellung
Um das Profiling der JS-Codeleistung optimal nutzen zu können, werden Testseiten auf speziell verlangsamten Mobilgeräten getestet. Wenn Sie ein altes Telefon in Ihrer Schreibtischschublade haben, kann die Verwirklichung dieser Idee ihm ein wunderbares zweites Leben geben.
Ein guter Ersatz für echte Geräte sind die Funktionen der Chrome Developer Tools.
Hier finden Sie Informationen zur Profilerstellung von React-Anwendungen mit diesen Tools.
Andere Metriken
Metriken wie Geschwindigkeitsindex, First Contentful Paint und First Meaningful Paint basieren darauf, wie der Browser die Seite rendert. Sie werden von Faktoren beeinflusst, die denen ähneln, über die wir bereits gesprochen haben. Die Auswirkungen auf diese Faktoren führen häufig zu einer Verbesserung aller dieser Indikatoren.
Objektiv gesehen ist die Verbesserung dieser Metriken einfacher als TTI. Tatsache ist, dass die Grundlage für ihre Berechnung die Geschwindigkeit der Seitenwiedergabe durch den Browser ist. Diese Metriken können verbessert werden, indem genau die Richtlinien befolgt werden, die nach der Seitenanalyse mit Lighthouse angegeben wurden.
Wenn Sie die Schriftarten nicht vorladen oder die Seite nicht unter Berücksichtigung der Merkmale kritischer Abfragen optimieren, können Sie die Renderleistung Ihrer Website sehr gut aus diesen beiden Richtungen verbessern. In
diesem Artikel finden Sie detaillierte Informationen zum Laden und Anzeigen der kritischen Ressourcen, die beim Erstellen von Webseiten verwendet werden.
Ergebnisse: zur Überwachung von Standorten und zur konkreten Verbesserung ihrer Arbeit
Die aktualisierte Google-Suchkonsole, Lighthouse und PageSpeed Insights sind hervorragende Tools, mit denen Sie die Gesamtleistung der Website sofort bewerten können. Sie eignen sich jedoch nicht für Teams, die die Leistung ihrer Projekte kontinuierlich überwachen und verbessern müssen.
Die kontinuierliche Überwachung der Leistung ist ein wesentlicher Bestandteil eines Workflows, der darauf abzielt, die Leistung des Standorts ständig auf einem hohen Niveau zu halten. Mit diesem Ansatz lernt das Projektteam sofort Leistungsprobleme kennen. Mit manuellen Leistungstests ist eine unerwartete Streuung der Ergebnisse möglich. Ohne die Erstellung einer speziellen Testumgebung ist es daher fast unmöglich, die Standortleistung mit verschiedenen Geräten zu testen oder andere sich ändernde Parameter der Systeme potenzieller Benutzer zu simulieren.
Die Seitengeschwindigkeit ist zu einem entscheidenden Faktor im Seiten-SEO-Ranking geworden. Diese Aussage ist heutzutage besonders stark, wenn fast 50% des Webverkehrs von Mobilgeräten generiert wird.
Um sicherzustellen, dass Ihre Website ihre Position in den Suchergebnissen nicht verliert, versuchen Sie, mithilfe moderner Versionen von Tools die Leistung der wichtigsten Seiten zu analysieren und die Geschwindigkeit auf einem für Sie geeigneten Niveau zu halten.
Liebe Leser! Optimieren Sie Ihre Webprojekte unter Berücksichtigung der Verbesserung von Indikatoren, die die Noten von Google PageSpeed beeinflussen?
