Das PageSpeed ​​Insights Assessment von Google meistern

Wenn Sie ein Geschäftsinhaber sind, sind Sie daran interessiert, bessere Suchrankings für Ihre Website zu erhalten. Wenn Sie ein Entwickler sind, müssen Sie auf die Bedürfnisse des Kunden eingehen und eine Website erstellen, die ein gutes Ranking erzielen kann. Google berücksichtigt Hunderte von Merkmalen, wenn es die Reihenfolge von Websites in seiner Search Engine Ranking Page (SERP) bestimmt.

Die Seitengeschwindigkeit wurde Mitte 2018 offiziell als wichtiges Ranking-Attribut genannt. In diesem Artikel erklären wir Leistungswerte, auf die Geschäftsinhaber achten sollten: PageSpeed ​​Insights. Wir werden auf einige technische Details eingehen, die Softwareentwicklern helfen, Verbesserungen in komplizierten Fällen vorzunehmen, beispielsweise bei Single-Page-Anwendungen.

Warum der PageSpeed ​​Insights-Test von Acing von Bedeutung ist

Als Google 2010 die PageSpeed ​​Tools einführte, wurden die meisten Website-Besitzer damit bekannt. Diejenigen, die dies nicht getan haben, sollten PageSpeed ​​Insights öffnen, um ihre Websites zu überprüfen.

Der Dienst bietet Details zur Leistung einer Website sowohl auf Desktop- als auch auf mobilen Browsern. Es ist leicht zu übersehen, dass Sie mit den Registerkarten „Mobil“ und „Desktop“ oben in der Analyse zwischen ihnen wechseln können:

Da mobile Geräte kompakt sind und darauf abzielen, die Batterielebensdauer zu verlängern, weisen ihre Webbrowser tendenziell eine geringere Leistung auf als Geräte mit Desktop-Betriebssystemen. Erwarten Sie also, dass die Desktop-Bewertung höher ist.

Große Technologieunternehmen werden in keinem Bereich rote Zahlen schreiben, kleinere Websites mit knapperen Budgets jedoch möglicherweise. Geschäftsinhaber können PageSpeed ​​Insights auch auf den Websites ihrer Mitbewerber ausführen und die Ergebnisse mit ihren eigenen vergleichen, um zu sehen, ob sie in die Verbesserung der Leistung investieren müssen.

Welche Punktzahl reicht aus, um das PageSpeed-Assessment zu bestehen?

PageSpeed ​​verwendet Metriken von Core Web Vitals, um eine Pass/Fail-Bewertung bereitzustellen.

Dieses Tool hat drei Punkte:

1. PageSpeed ​​zeigt den Leistungswert gut sichtbar in einem farbigen Kreis im Abschnitt „Diagnose von Leistungsproblemen“ an. Es wird mithilfe der integrierten virtuellen Maschinen von PageSpeed ​​berechnet, deren Eigenschaften dem durchschnittlichen Mobil- oder Desktop-Gerät entsprechen. Bitte beachten Sie, dass dieser Wert für das Laden von Seiten und für die virtuelle Maschine von PageSpeed ​​gilt und von der Google-Suchmaschine nicht berücksichtigt wird.

   Diese Zahl ist nützlich, wenn Entwickler Änderungen an einer Website vornehmen, da sie die Auswirkung der Änderungen auf die Leistung überprüfen können. Die Suchmaschine von Google berücksichtigt jedoch nur die detaillierten Bewertungen.

2. Ausführliche Bewertungen für eine bestimmte Seite – und für Seiten, die PageSpeed ​​der analysierten Seite als ähnlich erachtet – werden aus Statistiken berechnet, die Chrome-Browser auf echten Computern sammeln und an Google senden. Das bedeutet, dass die Leistung in Firefox, Safari und anderen Nicht-Chromium-Browsern nicht berücksichtigt wird.

3. Die Zusammenfassung für alle Seiten der Website ergibt sich auf die gleiche Weise wie der Single-Page-Score. Um darauf zuzugreifen, wählen Sie die Registerkarte Ursprung statt der Registerkarte Diese URL. Die unter der Registerkartenleiste aufgeführte URL ist anders, da Origin die Hauptseite der Site anzeigt (nur Domain).

Google aktualisiert ständig die Liste der von PageSpeed ​​berücksichtigten Metriken, daher ist die beste Quelle für das, was wichtig ist, der Abschnitt Experience / Core Web Vitals in der Google Search Console, vorausgesetzt, Sie haben Ihre Website dort bereits hinzugefügt.

Um das Core Web Vitals Assessment zu bestehen, müssen alle Punkte grün sein:

Damit die Werte grün sind, muss die Seite im Test mindestens 75 % erreichen, und viele Benutzer müssen gleiche oder bessere Werte erleben. Der Schwellenwert ist für jede Punktzahl unterschiedlich und für FID deutlich höher.

Um die Werte besser zu verstehen, klicken Sie auf den Partiturtitel:

Dies ist ein Link zu einem Blogbeitrag, in dem die Schwellenwerte für die jeweilige Kategorie ausführlicher erläutert werden.

Die Daten werden 28 Tage lang gesammelt, und es gibt zwei weitere wesentliche Unterschiede zu dem, was echte Benutzer möglicherweise erleben:

1. Die Leistung realer Geräte und Internetgeschwindigkeiten variieren, sodass dieser Test andere Ergebnisse liefert als die Ergebnisse der virtuellen Maschine von PageSpeed.
2. Detaillierte Bewertungen werden während der gesamten Lebensdauer der Seite berechnet, wobei die schlechtesten Werte aus jedem Fünf-Sekunden-Intervall genommen werden, in dem die Seite geöffnet ist.

Wenn viele Benutzer einer Website in Regionen mit langsamem Internetzugang leben und veraltete oder leistungsschwache Geräte verwenden, kann der Unterschied überraschend sein. Dies ist keine der Verbesserungsempfehlungen von PageSpeed ​​Insights. Auf den ersten Blick ist es nicht offensichtlich, wie man mit diesem Problem umgeht, aber wir werden versuchen, es später zu erklären.

Verbesserung der Punktzahlen mithilfe von PageSpeed ​​Insights-Empfehlungen

Der Hauptteil der Bewertung ergibt sich daraus, wie die meisten Benutzer die Seite öffnen. Trotz der Tatsache, dass nicht alle Benutzer eine Website über einen längeren Zeitraum besuchen und die meisten gelegentlich eine Website besuchen, werden alle Benutzer in den Bewertungen berücksichtigt, sodass die Verbesserung der Seitenladegeschwindigkeit, die alle betrifft, ein guter Anfang ist.

Empfehlungen finden Sie im Abschnitt „Möglichkeiten“ unter den Bewertungsergebnissen.

Wir können jeden Punkt erweitern und erhalten detaillierte Empfehlungen für Verbesserungen. Es gibt viele Informationen, aber hier sind die grundlegendsten und wichtigsten Tipps:

• Verbessern Sie die Antwortgeschwindigkeit des Servers. Wenn Sie beispielsweise Shared Hosting verwenden, aktualisieren Sie Ihren Plan oder migrieren Sie auf einen virtuellen privaten Server (VPS) oder sogar einen dedizierten Server. Außerdem sind nicht alle Gastgeber gleich. Versuchen Sie, zuverlässiges Hosting mit guter Hardware und Verfügbarkeitsgarantien zu wählen.
• Verringern Sie das Verkehrsaufkommen, das zum Öffnen Ihrer Website erforderlich ist. Um dies zu erreichen, können Sie Bilder durch optimierte ersetzen: Ändern Sie ihr Format, passen Sie Auflösung und Komprimierung an, ersetzen Sie bei Bedarf animierte Bilder durch statische Bilder usw. Gängige Content-Management-Systeme verfügen über Plug-Ins, die diesen Vorgang vereinfachen.
• Mehr Daten zwischenspeichern. Der einfachste Weg, dies zu tun, ist die Verwendung eines Content Delivery Networks (CDN) wie Cloudflare für statische Inhalte (Bilder, Stile, Skripte, Seiten, die sich nicht ändern). Sie können Caching-Regeln konfigurieren, um die Leistung zu optimieren.

Schauen wir uns nun kompliziertere Faktoren an, bei denen ein erfahrener Programmierer helfen kann.

So debuggen Sie Ergebnisse während der Lebensdauer einer Seite

Wie bereits erwähnt, berücksichtigt die Google Search Console durchschnittliche Punktzahlen, die von Chromium-basierten Browsern für die letzten 28 Tage erhalten wurden, und enthält auch Werte für die gesamte Lebensdauer der Seite.

Die Unfähigkeit zu sehen, was während der Lebensdauer der Seite passiert, ist ein Problem. Die virtuelle Maschine von PageSpeed ​​kann nicht berücksichtigen, wie die Seite nach dem Laden funktioniert und Benutzer damit interagieren, was bedeutet, dass Website-Entwickler keinen Zugriff auf Empfehlungen für Verbesserungen haben.

Die Lösung besteht darin, die Google Chrome Web Vitals-Bibliothek in die Entwicklerversion eines Websiteprojekts aufzunehmen, um zu sehen, was passiert, während ein Benutzer mit der Seite interagiert.

Verschiedene Optionen zum Einbinden dieser Bibliothek finden Sie in der Datei README.md auf GitHub. Am einfachsten ist es, das folgende Skript hinzuzufügen. Es ist optimiert, um Werte über die Lebensdauer der Seite im <head> der Hauptvorlage anzuzeigen:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Beachten Sie, dass die Berechnung von Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP) nur für Chromium-basierte Browser verfügbar ist, einschließlich Chrome, Opera, Brave (deaktivieren Sie Brave Shields, damit die Bibliothek funktioniert) und die meisten anderen modernen Browser, außer Firefox , das auf einer Mozilla-Engine basiert, und dem Safari-Browser von Apple.

Nachdem Sie das Skript hinzugefügt und die Seite neu geladen haben, öffnen Sie die Entwicklertools des Browsers und wechseln Sie zur Registerkarte Konsole.

Um zu sehen, wie diese Werte für die mobile Version berechnet werden, wechseln Sie mithilfe der Gerätesymbolleiste zum mobilen Gerät. Um darauf zuzugreifen, klicken Sie in den Entwicklertools Ihres Browsers auf die Schaltfläche Toggle Device Toolbar (Gerätesymbolleiste umschalten).

Dies hilft, Probleme zu lokalisieren. Wenn Sie die Zeile in der Konsole erweitern, werden Details darüber angezeigt, was die Änderung der Punktzahl ausgelöst hat.

Meistens reicht die automatische Empfehlung für andere Scores aus, um eine Idee zu bekommen, wie man sie verbessern kann. CLS ändert sich jedoch, nachdem die Seite mit Benutzerinteraktionen geladen wurde, und es gibt möglicherweise einfach keine Empfehlungen, insbesondere für Single-Page-Anwendungen. Möglicherweise sehen Sie im Abschnitt Leistungsprobleme diagnostizieren eine Punktzahl von perfekten 100, auch wenn Ihre Seite die Bewertung der von der Suchmaschine berücksichtigten Faktoren nicht besteht.

Für diejenigen von uns, die mit CLS zu kämpfen haben, wird dies hilfreich sein. Erweitern Sie den Protokolldatensatz, dann Einträge, spezifischer Eintrag, Quellen, spezifische Quelle, und vergleichen currentRect mit previousRect :

Jetzt, da wir sehen können, was sich geändert hat, können wir einige Möglichkeiten finden, es zu beheben.

Reduzierung der kumulativen Layoutverschiebung

Von allen Ergebnissen ist CLS am schwierigsten zu verstehen, aber es ist entscheidend für die Benutzererfahrung. Eine Layoutverschiebung tritt auf, wenn ein Element zum Dokumentobjektmodell (DOM) hinzugefügt oder die Größe oder Position eines vorhandenen Elements geändert wird. Es bewirkt, dass sich Elemente unterhalb dieses Elements verschieben, und der Benutzer hat das Gefühl, dass er nicht kontrollieren kann, was vor sich geht, was dazu führt, dass er die Website verlässt.

Es ist relativ einfach, dies auf einer einfachen HTML-Seite zu handhaben. Legen Sie Breiten- und Höhenattribute für Bilder fest, damit der Text darunter beim Laden nicht verschoben wird. Dies wird wahrscheinlich das Problem lösen.

Wenn Ihre Seite dynamisch ist und Benutzer damit wie mit einer Anwendung arbeiten, ziehen Sie die folgenden Schritte in Betracht, um CLS-Probleme zu beheben:

1. Stellen Sie die Seite so ein, dass Inhalt 500 Millisekunden, nachdem der Benutzer auf eine Schaltfläche oder einen Link geklickt hat, angezeigt wird, ohne dass CLS ausgelöst wird.
2. Ändern Sie Parameter, die keine Verschiebung anderer DOM-Elemente bewirken: Hintergrund, Farbe usw.
3. Stellen Sie sicher, dass sich andere Elemente nicht verschieben, wenn Sie die Größe oder Position eines Elements ändern.

Ausführlichere Empfehlungen sind auf der Google Developers Optimize CLS-Seite verfügbar.

Wie 500 Millisekunden CLS reduzieren können

Um zu veranschaulichen, wie der Schwellenwert von 500 Millisekunden verwendet wird, verwenden wir ein Beispiel mit einem Bildupload.

Wenn ein Benutzer eine Datei hochlädt, fügt das Skript normalerweise ein <img> -Element zu DOM hinzu, und dann lädt der Client-Browser das Bild vom Server herunter. Das Abrufen eines Bildes von einem Server kann mehr als 500 Millisekunden dauern und kann zu einer Layoutverschiebung führen.

Es gibt jedoch eine Möglichkeit, das Bild schneller abzurufen, da es sich bereits auf dem Clientcomputer befindet, und so das <img> -Element zu erstellen, bevor die Frist von 500 Millisekunden abgelaufen ist.

Hier ist ein universelles Beispiel für reines ECMAScript ohne Bibliotheken, das auf den meisten modernen Browsern funktioniert:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Wie wir bereits gesehen haben, erfordert die Behebung dieser Art von Problemen möglicherweise geistige Beweglichkeit. Mit mobilen Geräten, insbesondere billigen, und mit langsamem mobilem Internet wird die Kunst der Leistungsoptimierung der 90er Jahre nützlich, und Ansätze der Webprogrammierung der alten Schule können unsere Technik inspirieren. Moderne Browser-Debug-Tools helfen dabei.

Aktualisieren Sie die Google Search Console

Nach dem Finden und Beheben von Problemen kann es einige Zeit dauern, bis die Google-Suchmaschine die Änderungen registriert. Um die Ergebnisse etwas schneller zu aktualisieren, teilen Sie der Google Search Console mit, dass Sie die Probleme behoben haben.

Wählen Sie die Seite, an der Sie gerade arbeiten, mithilfe des Sucheigenschaftenfelds in der oberen linken Ecke aus. Navigieren Sie dann im linken Hamburger-Menü zu Core Web Vitals:

Klicken Sie oben rechts im mobilen oder Desktop-Bericht auf die Schaltfläche Bericht öffnen. (Wenn bei beiden Probleme aufgetreten sind, denken Sie daran, die gleichen Aktionen später für den zweiten Bericht zu wiederholen.)

Gehen Sie als Nächstes zum Abschnitt Details unter dem Diagramm und klicken Sie auf die Zeile mit der Warnung zur fehlgeschlagenen Validierung.

Klicken Sie dann für dieses Problem auf die Schaltfläche Details anzeigen.

Klicken Sie abschließend auf Neue Validierung starten.

Erwarten Sie keine sofortigen Ergebnisse. Die Validierung kann bis zu 28 Tage dauern.

Optimierung ist ein kontinuierlicher Kampf

Die SEO-Optimierung ist ein kontinuierlicher Prozess, und das gilt auch für die Leistungsoptimierung. Wenn Ihr Publikum wächst, erhalten Server mehr Anfragen und Antworten werden langsamer. Steigende Nachfrage bedeutet normalerweise, dass Ihrer Website neue Funktionen hinzugefügt werden, die sich auf die Leistung auswirken können.

Wenn es um den Kosten-Nutzen-Aspekt der Leistungsoptimierung geht, ist es notwendig, die richtige Balance zu finden. Entwickler müssen nicht immer auf allen Seiten die besten Werte erzielen. Konzentrieren Sie sich auf die Ursachen der größten Leistungsprobleme; Sie erhalten Ergebnisse schneller und mit weniger Aufwand. Große Unternehmen können es sich leisten, viele Ressourcen zu investieren und alle Punkte zu holen, aber das gilt nicht für kleine und mittelständische Unternehmen. In Wirklichkeit muss ein kleines Unternehmen höchstwahrscheinlich nur die Leistung seiner Konkurrenten erreichen oder übertreffen, nicht Branchenschwergewichte wie Amazon.

Geschäftsinhaber sollten verstehen, warum die Website-Optimierung entscheidend ist, welche Aspekte der Arbeit am wichtigsten sind und welche Fähigkeiten bei den Mitarbeitern gesucht werden müssen, die sie dafür einstellen. Entwickler ihrerseits sollten die Leistung jederzeit im Auge behalten und ihren Kunden dabei helfen, Websites zu erstellen, die sich nicht nur für Endbenutzer schnell anfühlen, sondern auch in PageSpeed ​​Insights gut abschneiden.