Google PageSpeed Insights wurde grundlegend aktualisiert. Was wird sich ändern? PageSpeed Insights: Ladegeschwindigkeit als Rankingfaktor Geschätzte Eingabelatenz.
Hallo, liebe Leser der Blogseite. Heute möchte ich mit Ihnen über ein so wichtiges Thema wie die Ladegeschwindigkeit von Websites sprechen. Sie haben wahrscheinlich bereits gehört, dass Suchmaschinen dies neben vielen anderen Faktoren, die die Werbung für ein Webprojekt beeinflussen, seit Kurzem auch berücksichtigen. Und die Bremsen auf der Website irritieren Besucher, insbesondere diejenigen, die daran gewöhnt sind, wirklich.
Dennoch ist die Ladegeschwindigkeit für viele Webmaster kein Thema, über das man sich sofort den Kopf zerbrechen sollte; normalerweise wird es auf später verschoben, und es treten dringende Probleme auf, die mit dem Füllen der Ressource mit einzigartigen Materialien und deren Verbesserung durch interne Optimierung verbunden sind im Vordergrund. , sondern die gesamte Reihe von Einflussfaktoren. Wie man so schön sagt: Eine Kette ist nur so stark wie ihr schwächstes Glied...
Online-Dienste zur Messung der Ladegeschwindigkeit von WebsitesAuf jeden Fall hatte ich bis vor Kurzem das gleiche Gefühl, als ich versuchte, meine Ressourcen zu beschleunigen. Mir kam jedoch der Gedanke, dass es besser ist, nicht auf unangenehme Trends zu warten (nämlich einen Rückgang des Datenverkehrs von , da die Ladegeschwindigkeit kritischer ist), sondern den offensichtlichen Mangel sofort zu beheben.
Sie müssen sich nur darüber im Klaren sein, dass die Geschwindigkeit, mit der Ihre Website, Ihr Blog oder Ihr Forum geladen wird, ein sehr wichtiger Indikator ist. Wenn Ihr Projekt mit diesem Indikator nicht gut läuft, kann das durchaus unangenehme Folgen haben. Und das Wichtigste davon ist, dass Besucher sich möglicherweise weigern, mit Ihrer Ressource zu arbeiten, weil... Das Laden von Seiten dauert sehr lange. Darüber hinaus berücksichtigen Suchmaschinen, insbesondere Google, dies bei der Beurteilung des Gesamtnutzens einer bestimmten Ressource.
Um zu verstehen, wie schnell die Seiten Ihrer Ressource geladen werden, können Sie beispielsweise deren Möglichkeiten nutzen, die im Artikel unter dem angegebenen Link ausführlich beschrieben werden. Oder Sie nutzen die dafür vorgesehenen Dienste. Im Folgenden werde ich einige Beispiele dafür nennen.
Als Ergebnis wird ein Diagramm der Downloadzeit einzelner Webseitenobjekte sowie deren URL und Gewicht angezeigt. Je weniger Gegenstände geladen werden und je leichter jeder von ihnen wiegt, desto besser. Zu diesem Zweck habe ich zum Beispiel:
Tatsächlich können Sie einige Probleme und den Verlauf der Messung der Geschwindigkeit Ihrer Website auf den angrenzenden Registerkarten im oberen Menü von Pingdom verfolgen.
In einem Popup-Fenster werden Sie aufgefordert, den permanenten Link zum abgeschlossenen Test zu kopieren und ebenfalls per E-Mail oder Twitter zu versenden. Sie können die Verfügbarkeit auch unten im Fenster abonnieren. Wenn Ihre Ressource ausfällt (für Besucher nicht mehr verfügbar ist), erhalten Sie eine Nachricht per E-Mail oder SMS an Ihr Mobiltelefon. Dieser Service ist jedoch kostenpflichtig, es besteht jedoch die Möglichkeit einer kostenlosen Testversion.
Um Traceroute auf Ihrer Website anzuzeigen, müssen Sie ganz oben auf der Seite die Registerkarte „Ping und Traceroute“ auswählen. Geben Sie die URL ohne http in das bereitgestellte Formular ein, aktivieren Sie das Kontrollkästchen „Traceroute“ oder „Ping“ unter diesem Formular und klicken Sie auf „Jetzt testen“.
Achten Sie im ersten Diagramm auf die Position der violetten vertikalen Linie – diese wird angezeigt Fertigstellungszeit des Site-Renderings. Die zweite vertikale Linie (blau) bedeutet volle Ladezeit. Es ist gut, wenn die erste Zeile 1–1,5 Sekunden nach dem Laden der Website steht und die zweite Zeile vor 4 Sekunden. Dann können die folgenden Absätze „als Referenz“ gelesen werden. Wenn das Laden der Website länger als 4 Sekunden dauert, müssen Sie sich darum kümmern, diese Situation zu beheben.
Wie Sie dem obigen Screenshot entnehmen können, liefert Google PageSpeed Insights eine umfassende Bewertung – für einen Computerbrowser und für einen mobilen. Darüber hinaus finden Sie unten eine Bewertung der Benutzerfreundlichkeit Ihrer Ressource auf verschiedenen Gadgets. Wenn Sie sich noch nicht darum gekümmert haben, wird die Punktzahl dort sehr niedrig sein (und auf dem Screenshot Ihrer Website rechts im Smartphone-Fenster ist alles deutlich sichtbar).
Aber das Wichtigste ist, dass Google PageSpeed Insights Empfehlungen gibt, wie Sie den Score Ihrer Website steigern können, d. h. wie man es beschleunigt. Man muss natürlich ganz oben beginnen, denn diese Korrekturen tragen am meisten zur Beschleunigung bei.
Ich hatte zum Beispiel ein Problem mit der Einrichtung der GZIP-Komprimierung und der Einstellung der Caching-Zeit für statische Dateien (Bilder, CSS-Dateien und Skripte) in Benutzerbrowsern, da Apache mit Nginx zusammenarbeitet, ich aber nicht weiß, wie ich damit arbeiten soll Es. Ich musste an den technischen Support von Infobox schreiben und ihn bitten, alles einzurichten – sie haben es getan und nicht einmal das Geld genommen (dank ihnen!). Ursprünglich wurde die Cache-Speicherzeit übrigens auf 1 Stunde festgelegt, aber Google PageSpeed Insights beschwerte sich trotzdem:
Ich musste mich mit den Anweisungen für diesen Onlinedienst befassen und dort lesen, dass die Mindestspeicherung der Statik im Cache 1 Tag beträgt. Ich habe den technischen Support des Hostings gebeten, eine Woche Reserve bereitzustellen, was sie auch getan haben. Jetzt ist die Bewertung etwas gestiegen und Google hat hinsichtlich der Ladegeschwindigkeit keine größeren Beschwerden über meine Ressource, was gut ist.
Einfach und geschmackvoll, wie man sagt. Für Änderungen können Sie den Newsletter abonnieren.
Ich habe darüber bereits ausführlich geschrieben und werde mich daher nicht wiederholen, um einen ohnehin schon umständlichen Artikel nicht zu überladen (wer bis zum Ende liest, kann sich als Held bezeichnen).
Aber kehren wir von der Messung der Geschwindigkeit zurück zur Suche nach Möglichkeiten, sie zu steigern. Zuvor gab es eine experimentelle Registerkarte „Site-Leistung“, auf der eine Bewertung der Ladegeschwindigkeit der Site gegeben wurde.
Generell ist die dort angegebene Ladegeschwindigkeit nichts Kriminelles, aber die Tatsache, dass meine Blog-Seite langsamer als 84 Prozent aller Webressourcen im Internet geladen hat, ist schon ein Alarmsignal, auf das hätte reagiert werden müssen. Aber da Google der Meinung ist, dass mein Blog in Sachen Geschwindigkeit ein Außenseiter ist, lohnt es sich, dieses Problem ernst zu nehmen und sich ernsthaft mit der Frage zu befassen, wie man es steigern kann.
Eigentlich musste man sich nichts Besonderes einfallen lassen, da Google selbst die optimalste Lösung vorschlägt. Genauer gesagt schlägt er vor, ein Tool zu verwenden, das Ihnen wiederum hilft zu verstehen, was genau getan werden muss, um Ihre Website ein wenig (oder viel) zu beschleunigen. Ich spreche vom Online-Dienst Page Speed (zuvor gab es auch gleichnamige Browser-Erweiterungen für FireFox und Chrome, die ich hauptsächlich nutzte).
Lassen Sie mich gleich einen Vorbehalt anbringen, dass dieses Tool mit recht komplexen und für normale Webmaster nicht ganz verständlichen Dingen arbeitet, die hauptsächlich mit den Feinheiten und Nuancen des Webserverbetriebs zusammenhängen. Wenn Sie noch nie einen Server verwaltet haben, wird es schwierig.
Es gibt einen Ausweg: Fordern Sie Ihren Hoster auf, die von Page Speed vorgeschriebenen Aktionen auszuführen. Ob er zustimmt oder nicht, ist eine andere Frage. Ich habe es nicht gewagt, weil es umständlich ist, jedem den Zugriff auf den Server zu gewähren (so misstrauisch bin ich).
Auf der Hauptseite schlägt PageSpeed sogar vor, das Modul auf Ihrem Server zu installieren, wenn dieser Apache oder Nginx ausführt (was bei mir der Fall ist):
Aber ich verstehe immer noch nicht, wie das geht, da ich mich überhaupt nicht mit Serveradministration auskenne und noch nie mit Unix-ähnlichen Systemen gearbeitet habe. Dies ist viel schwieriger als die Installation eines Programms oder das Hochladen eines Plugins in WordPress. Eine weitere Ebene des Eintauchens. Auch Hoster wagte es nicht, ihn damit zu belästigen. Im Allgemeinen habe ich dieses Modul nicht getestet – es ist möglich, dass Sie es bereits ausprobiert haben und etwas zu sagen haben ...
Im Allgemeinen habe ich Page Speed zum ersten Mal als Browsererweiterung verwendet (jetzt funktioniert es, soweit ich weiß, nicht mehr). Zuvor war es in Entwicklertools in Firefox und Chrome integriert. Zwar habe ich zunächst (vor einigen Jahren) nur kurz angeschaut, welchen Rat er mir gab, und da ich fast nichts verstand, entschied ich, dass dies nichts für mich war, woraufhin ich leichten Herzens den PageSpeed löschte Plugin als unnötiges und fremdes Element für mich.
Tatsache ist, dass ich, selbst wenn ich verstand, worüber sich dieses Plugin beschwert, nicht wirklich wusste, was getan werden musste, um das alles zu beheben und meinen Blog irgendwie zu beschleunigen. Im Allgemeinen habe ich sofort viel Wichtigeres zu tun gefunden, im Vergleich dazu wirkte der Aufwand der Maus mit den Webserver-Einstellungen (zumal ich sie nicht besonders verstehe) kleinlich und unbedeutend.
Zwar habe ich auch einmal die Lösung des Sicherheitsproblems auf Eis gelegt und dafür mit dem Verlust all dieses Geldes bezahlt. In Anbetracht dessen, was passiert ist, habe ich neulich beschlossen, mich an das Problem der Erhöhung der Ladegeschwindigkeit der Website zu wenden, obwohl dieses Problem für mich unverständlich und schwierig war.
Kurz gesagt, ich habe Page Speed in Mazila neu installiert (jetzt muss ich das nicht mehr tun), habe mir angesehen, worüber es sich am meisten beschwert hat, und es ist mir trotzdem gelungen, einige Dinge zu verbessern, und ich hoffe, bei Erhöhen Sie zumindest die Geschwindigkeit etwas.
P.S. Jetzt kann Page Speed nur online verwendet werden und muss nicht mehr im Browser installiert werden (dieses Plugin ist auf jeden Fall nicht mit neuen Versionen von Chrome kompatibel), was jedoch nichts am Wesen ändert.
Früher mussten Sie also ein Plugin in Ihrem Browser installieren, aber jetzt müssen Sie nur noch hierher gehen und die URL der Seite eingeben, die Sie analysieren möchten (verschiedene Seitentypen können unterschiedliche Probleme mit der Ladegeschwindigkeit haben, daher ist dies sinnvoll um alle Optionen in diesem Tool zu überprüfen) und klicken Sie auf die blaue Schaltfläche „Analysieren“.
Nachdem Sie auf die Ergebnisse des Verifizierungsprozesses gewartet haben, sehen Sie ein Fenster, das dem ähnelt, das ich bereits im Screenshot oben im Text gezeigt habe (in Absatz 3 der Beschreibungen von Online-Diensten zur Überprüfung der Ladegeschwindigkeit von Websites). Das. Als Ergebnis sehen Sie eine ganze Liste von Beschwerden, die dieser Online-Dienst über Ihre Ressource hat, insbesondere über deren Ladegeschwindigkeit. Gleichzeitig gibt er Ihnen einige Hinweise zur Optimierung des Betriebs des Webservers in Verbindung mit der von Ihnen verwendeten Engine.
Darüber hinaus werden ganz oben im Page Speed-Fenster Kommentare und Empfehlungen angezeigt, die Sie sich zuerst ansehen und ändern sollten („unbedingt beheben“), da dies den größten Effekt hinsichtlich der Erhöhung der Auslastung erzielt Geschwindigkeit und erfordert von Ihrer Seite keinen allzu großen Aufwand. Lassen Sie mich Ihnen ein Beispiel einer Analyse eines meiner kleineren Projekte geben, zu dem ich nicht wirklich dazu komme:
Diese. Empfehlungen und erkannte Probleme, die mit einem roten Rechteck mit einem Ausrufezeichen markiert sind und sich ganz oben in der Liste befinden, sind die wichtigsten und es ist ratsam, mit ihnen mit der Optimierung zu beginnen (billig und fröhlich, wie sie sagen), um so das zu erreichen größte Wirkung.
Die Behebung orange markierter Probleme erfordert mehr Aufwand Ihrerseits, führt jedoch möglicherweise nicht zu einer erheblichen Geschwindigkeitssteigerung. Leider können Sie sie vorerst zurückstellen und mit den vorrangigen Aufgaben fortfahren, die dazu beitragen, das Projekt erheblich zu beschleunigen.
Mein erstes Bild vor ein paar Jahren (auch bei Verwendung des Plugins – jetzt ist das Gleiche in http://gtmetrix.com/ zu sehen, da es die PageSpeed-API verwendet) für https://site sah so aus:
Ich habe mich dann entschieden, mit dem allerersten Punkt „Browser-Caching nutzen“ (jetzt heißt es „Browser-Cache nutzen“) zu beginnen, da diese Empfehlungen nach der Logik des Page Speed zur größten Beschleunigung meines Blogs führen sollen.
Wenn Sie auf den Spoiler neben dieser Aufschrift klicken, wird eine Liste verschiedener Dateien angezeigt, die nicht die optimalen Anforderungen für die Zwischenspeicherung statischer Objekte (Skripte, CSS-Dateien, auf einer Webseite verwendete Bilddateien) in Benutzerbrowsern (d. h. Readern) erfüllen. :
Diese. Um die Ladegeschwindigkeit zu erhöhen, empfiehlt uns PageSpeed Insights, das Caching verschiedener Elemente von Webseiten in Benutzerbrowsern optimal zu konfigurieren, damit diese statischen Elemente beim Anzeigen anderer nicht vom Server neu geladen werden. Theoretisch klingt das alles ziemlich verwirrend, da ich keine Ahnung von den von Browsern verwendeten Caching-Mechanismen habe (lesen Sie mehr darüber und wie Sie es löschen können).
Darüber hinaus optimieren wir das Caching statischer Objekte mithilfe der Mechanismen Ihres Hosting-Servers. Es ist ziemlich verwirrend, aber ich biete Ihnen vorgefertigte Lösungen aus dem russischen Internet an, und Sie werden sie in Aktion ausprobieren und entscheiden, welche für Ihr Hosting am besten geeignet ist.
Optimierung des Browser-Cachings und Überprüfung seiner FunktionStimmt, das funktionierte bei meinem aktuellen Hosting nicht, da ich jetzt eine Kombination aus Apache und Nginx habe (letzteres muss ich konfigurieren, was der Hoster auf eine mir unbekannte Weise für mich erledigt hat). Wenn Sie jedoch reines Apache haben, könnte die unten vorgeschlagene Methode funktionieren.
Im Allgemeinen werden wir versuchen, den Server, auf dem Ihr Projekt gehostet wird, so zu beeinflussen, dass er Befehle an Browser ausgibt, die darauf abzielen, das Caching statischer Elemente zu optimieren. Wir werden dies mit einem ziemlich bekannten Remote-Server-Verwaltungstool tun – der .htaccess-Datei. Wissen Sie, dass es so etwas gibt?
Es befindet sich normalerweise im Stammordner. Natürlich funktioniert alles, was im Folgenden beschrieben wird, nur auf Servern, auf denen Apache läuft, aber in der Regel sind das die meisten. Nachdem Sie über FTP () eine Verbindung zu Ihrer Ressource hergestellt haben, öffnen Sie den Stammordner (normalerweise entweder PUBLIC_HTML oder HTDOCS) und suchen Sie darin nach der .htaccess-Datei.
Von nun an tun Sie alles auf eigene Gefahr und Gefahr. Stellen Sie daher sicher, dass Sie eine Kopie dieser Datei auf Ihren Computer herunterladen, damit Sie, falls etwas passiert, schnell ein Problem beheben können.
Wenn .htaccess nicht sichtbar ist, versuchen Sie es im FileZilla-Programm und wählen Sie im oberen Menü „Server“ – „Versteckte Dateien erzwingen“. Wenn es auch danach nicht im Stammverzeichnis angezeigt wird, erstellen Sie auf Ihrem Computer in einem beliebigen Editor (ich verwende NotePad Plus Plus) eine leere Textdatei, benennen Sie sie und kopieren Sie sie in das Stammverzeichnis.
Benennen Sie diese Datei anschließend in FileZilla in .htaccess um. Jetzt müssen Sie es zum Bearbeiten öffnen und den folgenden Code hinzufügen. Aber lassen Sie mich zunächst etwas erklären.
Die gängigsten Möglichkeiten, diese Option auf einem Webserver mit Apache zu aktivieren, sind die Module mod_headers oder mod_expires. Der folgende Code hilft Ihnen, statisches Caching im Browser zu aktivieren, wenn der Onlinedienst mindestens eines dieser Apache-Module auf Ihrem Server installiert hat.
Zuerst gebe ich den Code für das Modul mod_headers. Bitte beachten Sie, dass überprüft wird, ob Ihr Hoster über dieses Modul verfügt. Wenn er nicht gefunden wird, wird der Code nicht ausgeführt und verursacht keine Fehler. Ich empfehle jedoch noch einmal dringend, dass Sie zuerst die ursprüngliche .htaccess-Datei (bevor Sie den folgenden Code hinzufügen) auf Ihren Computer kopieren, um Zwischenfälle zu vermeiden.
#HTML- und HTM-Dateien für einen Tag zwischenspeichern. Header-Set Cache-Control „max-age=43200“ #CSS-, Javascript- und Textdateien für eine Woche zwischenspeichern. Header-Set Cache-Control „max-age=604800“ #Cache-Flash und Bilder für Monat Header gesetzt Cache-Control „max-age=2592000“ #disable caching Header nicht gesetzt Cache-Control
Sie können Kommentare löschen (ihre Zeilen beginnen mit einem Rautezeichen), sie haben jedoch keinerlei Auswirkungen auf die Funktion des Codes.
Es wird auch möglich sein, einen Codeblock hinzuzufügen, der für das Modul mod_expires entwickelt wurde, das wiederum eine Prüfung auf sein Vorhandensein auf Ihrem Server durchführt, was die Sicherheit der Verwendung dieses Codestücks gewährleistet:
Ablauft aktiv ein Zugriff plus 2592000 Sekunden“ ExpiresByType image/gif „Zugriff plus 2592000 Sekunden“ ExpiresByType application/x-shockwave-flash „Zugriff plus 2592000 Sekunden“ #cache CSS-, Javascript- und Textdateien für eine Woche ExpiresByType text/css „Zugriff plus 604800 Sekunden“ ExpiresByType text/javascript „Zugriff plus 604800 Sekunden“ ExpiresByType application/javascript „Zugriff plus 604800 Sekunden“ ExpiresByType application/x-javascript „Zugriff plus 604800 Sekunden“ #html- und htm-Dateien für einen Tag zwischenspeichern ExpiresByType text/html „Zugriff plus 43200 Sekunden " #XML-Dateien zehn Minuten lang zwischenspeichern ExpiresByType application/xhtml+xml "Zugriff plus 600 Sekunden"
Kommentare können später wieder gelöscht werden.
Wenn es nicht funktioniert, Sie aber auf ein Wunder hoffen, finden Sie hier noch ein paar weitere Variationen desselben Codes, aber probieren Sie sie einzeln aus, nicht alle auf einmal:
Nachdem Sie nun Code in .htaccess eingefügt haben, mit dem Sie die Geschwindigkeit erhöhen können, indem Sie das Caching im Browser auf Besucherseite optimieren, und die vorgenommenen Änderungen gespeichert haben, überprüfen Sie Ihre Ressourcenseite erneut in PageSpeed Insights und stellen Sie sicher, dass das Problem vorliegt gegangen:
Wie Sie sehen, ist „Verwenden Sie Ihren Browser-Cache“ in meinem Fall kein kritischer Fehler mehr, der das Laden verlangsamt, und das Symbol neben diesem Hinweis hat sich in Orange, aber nicht in Grün geändert. Leider habe ich keinen Einfluss auf die Dienste von Drittanbietern, von denen meine Website statische Inhalte lädt (z. B. Yandex, Google, Feedburner und Aptulaik).
Q.E.D. So haben wir einfach eines der bedeutendsten und bedeutsamsten Probleme bei Page Speed herausgefunden.
So aktivieren Sie die Komprimierung statischer Objekte auf dem ServerEin sehr häufiges Problem, über das sich der GTmetrix-Dienst beschwert, ist außerdem die fehlende Komprimierung von Dateien auf dem Server vor der Übertragung an die Browser der Benutzer.
Es wird in diesem Fall verwendet, über den ich bereits geschrieben habe. Wenn Sie nicht direkt über PageSpeed Insights, sondern über GTmetrix analysieren, heißt „Komprimierung aktivieren“ im PageSpeed-Bereich „gzip-Komprimierung aktivieren“ und in YSlow „Komponenten mit gzip komprimieren“.
Um dieselbe Gzip-Komprimierung auf Hostings zu aktivieren, auf denen der Apache-Server verwendet wird, reicht es aus, den entsprechenden Codeabschnitt zur .htaccess-Datei hinzuzufügen (es handelt sich um eine Remote-Server-Steuerungsdatei). Apache verfügt über zwei Module zur Komprimierung und eines davon wird von Ihrem Hoster installiert (obwohl dies keine Tatsache ist).
Die häufigste – fangen wir damit an. Wir fügen dem Code erneut eine Prüfung auf das Vorhandensein dieses Moduls hinzu, um keinen 500-Fehler für die gesamte Site zu erhalten.
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
Der etwas weniger beliebte Code zum Aktivieren der Gzip-Komprimierung für die erforderlichen Dateitypen sieht folgendermaßen aus:
mod_gzip_on yes mod_gzip_dechunk yes mod_gzip_item_include Datei \. ZIP_ item_exclude rSpheader ^ Inhaltskodierung:.*gzip.*
Versuchen Sie tatsächlich, die Seite in PageSpeed Insights zu überprüfen, nachdem Sie den Code installiert haben. Wenn das Problem verschwindet, können Sie sich glücklich schätzen. Aufgrund der Anwesenheit von Apache mit Nginx hat mir das alles nicht geholfen (der Hoster sagte, dass Nginx für die Statik verantwortlich ist, in dieser Situation muss es konfiguriert werden – ich weiß nicht, wie er das gemacht hat).
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Messen und Erhöhen der Website-Geschwindigkeit in GTmetrix sowie Einrichten des Ladens der jQuery-Bibliothek von Google CDN 
Gzip-Komprimierung zur Beschleunigung des Website-Ladens – So aktivieren Sie sie für Js, HTML und CSS mithilfe der .htaccess-Datei 
So maximieren Sie die Ladegeschwindigkeit der Website und optimieren die Serverlast 
Website-Beschleunigung – was sie bewirkt, wie man sie misst und wie man die Website selbst beschleunigt 
Erstellen von CSS-Sprites im Online-Generator Sprites Me, um die Anzahl der Anfragen an den Server zu reduzieren 
CSS-Optimierung und -Komprimierung in Page Speed – So deaktivieren Sie externe Stylesheet-Dateien und führen sie zu einer zusammen, um das Laden zu beschleunigen 
So erhalten Sie eine schnelle Website – Optimierung (Komprimierung) von Bildern und Skripten sowie Reduzierung der Anzahl von HTTP-Anfragen
PageSpeed Insights (PSI) berichtet über die Leistung einer Seite sowohl auf Mobil- als auch auf Desktop-Geräten und liefert Vorschläge, wie diese Seite verbessert werden kann.
PSI stellt sowohl Labor- als auch Felddaten zu einer Seite bereit. Labordaten sind für die Fehlerbehebung bei Leistungsproblemen hilfreich, da sie in einer kontrollierten Umgebung erfasst werden. Es kann jedoch sein, dass reale Engpässe möglicherweise nicht erfasst werden. Felddaten sind nützlich, um echte, reale Benutzererfahrungen zu erfassen, verfügen jedoch über einen begrenzteren Satz an Metriken. Weitere Informationen zu den beiden Datentypen finden Sie unter.
LeistungsbewertungOben im Bericht stellt PSI eine Bewertung zur Verfügung, die die Leistung der Seite zusammenfasst. Dieser Wert wird durch die Ausführung von Daten zum Sammeln und Analysieren der Seite ermittelt. Ein Wert von 90 oder mehr gilt als schnell, 50 bis 90 als durchschnittlich. Unter 50 gilt man als langsam.
Felddaten aus der realen WeltWenn PSI eine URL erhält, sucht es diese im (CrUX-)Datensatz. Sofern verfügbar, meldet PSI die (FCP)- und (FID)-Metrikdaten für den Ursprung und möglicherweise die spezifische Seiten-URL.
Klassifizierung von schnell, durchschnittlich, langsamPSI klassifiziert Felddaten außerdem in drei Kategorien und beschreibt Erfahrungen, die als schnell, durchschnittlich oder langsam gelten. PSI legt basierend auf unserer Analyse des CrUX-Datensatzes die folgenden Schwellenwerte für schnell/durchschnittlich/langsam fest:
| FCP | (1000 ms, 2500 ms] | über 2500ms | |
| FID | (50 ms, 250 ms] | über 250ms |
Im Allgemeinen befinden sich schnelle Seiten ungefähr in den oberen 10 %, durchschnittliche Seiten in den nächsten 40 % und langsame Seiten in den unteren 50 %. Zur besseren Lesbarkeit wurden die Zahlen gerundet. Diese Schwellenwerte gelten sowohl für Mobilgeräte als auch für Desktops und wurden auf der Grundlage der menschlichen Wahrnehmungsfähigkeiten festgelegt.
Verteilung und ausgewählter Wert von FCP und FIDPSI präsentiert eine Verteilung dieser Metriken, damit Entwickler den Bereich der FCP- und FID-Werte für diese Seite oder diesen Ursprung verstehen können. Diese Verteilung ist ebenfalls in drei Kategorien unterteilt: Schnell, Durchschnittlich und Langsam, gekennzeichnet durch grüne, orangefarbene und rote Balken. Wenn beispielsweise 14 % innerhalb des orangefarbenen FCP-Balkens angezeigt werden, bedeutet dies, dass 14 % aller beobachteten FCP-Werte zwischen 1.000 ms und 2.500 ms liegen. Bei diesen Daten handelt es sich um eine aggregierte Ansicht aller Seitenladevorgänge in den letzten 30 Tagen.
Oberhalb der Verteilungsbalken meldet PSI das 90. Perzentil „First Contentful Paint“ und das 95. Perzentil „First Input Delay“, jeweils in Sekunden und Millisekunden dargestellt. Mithilfe dieser Perzentile können Entwickler die frustrierendsten Benutzererlebnisse auf ihrer Website nachvollziehen. Diese Feldmetrikwerte werden durch Anwendung derselben oben gezeigten Schwellenwerte als schnell/durchschnittlich/langsam klassifiziert.
FeldAus den Feldmetrikwerten wird ein Gesamtlabel berechnet:
- Schnell: Wenn sowohl FCP als auch FID schnell sind.
- Langsam: Wenn entweder FCP oder FID langsam ist.
- Durchschnitt: Alle anderen Fälle.
Der Unterschied zwischen den Felddaten in PSI und dem Chrome User Experience Report auf BigQuery besteht darin, dass die PSI-Daten für den Zeitraum der letzten 30 Tage täglich aktualisiert werden. Der Datensatz auf BigQuery wird nur monatlich aktualisiert.
LabordatenPSI verwendet Lighthouse, um die angegebene URL zu analysieren und einen Leistungswert zu generieren, der die Leistung der Seite anhand verschiedener Metriken schätzt, darunter: , und .
Warum widersprechen sich Feld- und Labordaten? Die Felddaten sagen, dass die URL langsam ist, aber die Labordaten sagen, dass die URL schnell ist!
Die Felddaten sind ein historischer Bericht darüber, wie eine bestimmte URL ausgeführt wurde, und stellen anonymisierte Leistungsdaten von Benutzern in der realen Welt auf verschiedenen Geräten und Netzwerkbedingungen dar. Die Labordaten basieren auf einer simulierten Auslastung einer Seite auf einem einzelnen Gerät und festen Netzwerkbedingungen. Dadurch können die Werte abweichen.
Warum wird für FCP das 90. Perzentil und für FID das 95. Perzentil gewählt?
Unser Ziel ist es sicherzustellen, dass die Seiten für die Mehrheit der Benutzer gut funktionieren. Durch die Konzentration auf die Werte des 90. und 95. Perzentils für unsere Metriken stellen wir sicher, dass die Seiten auch unter den schwierigsten Geräte- und Netzwerkbedingungen einen Mindestleistungsstandard erfüllen.
Warum hat der FCP in Version 4 und Version 5 unterschiedliche Werte?
V5 FCP betrachtet das 90. Perzentil, während v4 FCP den Median (50. Perzentil) meldet.
Was ist ein guter Wert für die Labordaten?
Jeder Green-Score (90+) gilt als gut.
Warum ändert sich der Leistungswert von Lauf zu Lauf? Ich habe an meiner Seite nichts geändert!
Variabilität bei der Leistungsmessung wird über eine Reihe von Kanälen mit unterschiedlichem Wirkungsniveau eingeführt. Mehrere häufige Ursachen für Metrikvariabilität sind die Verfügbarkeit des lokalen Netzwerks, die Verfügbarkeit der Client-Hardware und der Konflikt um Client-Ressourcen.
Mehr Fragen?Wenn Sie eine spezifische und beantwortbare Frage zur Verwendung von PageSpeed Insights haben, stellen Sie Ihre Frage auf Englisch auf Stack Overflow.
Wenn Sie allgemeines Feedback oder Fragen zu PageSpeed Insights haben oder eine allgemeine Diskussion starten möchten, starten Sie einen Thread in der Mailingliste.
RückmeldungWar diese Seite hilfreich?
Ja, großartig! Danke für die Bewertung. Wenn Sie eine spezifische, beantwortbare Frage zur Verwendung von PageSpeed Insights haben, stellen Sie die Frage auf Englisch auf der Stack Overflow-Mailingliste. Nein, tut mir leid, das zu hören. Wenn Sie eine spezifische, beantwortbare Frage zur Verwendung von PageSpeed Insights haben, stellen Sie die Frage auf Englisch auf Stack Overflow. Für allgemeine Fragen, Feedback und Diskussionen starten Sie einen Thread im
Die Seitenladegeschwindigkeit ist mittlerweile ein sehr starkes Signal für Suchmaschinen. Und für Benutzer ist dies ein wichtiger Faktor, den man bei Problemen nur schwer außer Acht lassen kann. Durch die Verbesserung der Website-Geschwindigkeit können Sie nicht nur Rankingvorteile erzielen, sondern auch mehr Vertrauen und Konversionsraten erzielen. Nachfolgend finden Sie eine Liste der nützlichsten Tools, mit denen Sie die Schwachstellen Ihrer Website in Bezug auf die Geschwindigkeit analysieren und identifizieren können.
1. Google PageSpeed InsightsGoogles Tool zur Geschwindigkeit beim Laden von Seiten. Zeigt einen Wert von 0 bis 100 für Desktop- und Mobilgeräte an. Er weist sofort auf die Schwachstellen der Seite hin und gibt Empfehlungen zur Geschwindigkeitsoptimierung.
2. Pingdom-Tools
Gibt eine Einschätzung der Geschwindigkeit, zeigt die Anzahl der Aufrufe an den Server und die durchschnittliche Ladezeit an. In der Übersichtstabelle werden die Daten für jede Anfrage an den Server detailliert angezeigt (Stile, Skripte, Bilder usw.). Es ist leicht zu beurteilen, was genau auf der Website den Ladevorgang verlangsamt.
3.WhichLoadFaster
Laden Sie zwei Websites zum Vergleich (Sie selbst und ein Mitbewerber) und beobachten Sie visuell, welche schneller lädt (praktisch, um sie den Kunden zu demonstrieren). Am Ende des Downloads wird angezeigt, welche Seite gewonnen hat und wie oft sie schneller geladen wurde.
4. Webseiten-Leistungstest
Lädt die Seite zweimal, vergleicht die Anzahl der Treffer – zeigt an, wie gut das Caching organisiert ist, und zeigt detaillierte Statistiken für jeden Test an. Speichert bei jeder Ladesekunde Screenshots davon, wie die Website aussieht. Außerdem wird in komfortabler Form angezeigt, welche Gruppe von Anfragen die meiste Zeit in Anspruch genommen hat. Der Server befindet sich in Dallas (USA).
5. GTmetrix
Ein weiteres nützliches Tool zum Testen der Website-Geschwindigkeit. Zeigt viele zusammenfassende Informationen an und speichert auch einen Verlauf, sodass Sie vergleichen können, um wie viel sich Ihre Download-Geschwindigkeit verbessert oder verschlechtert hat. Lädt Yahoo- und Google-Empfehlungen zur Geschwindigkeitsoptimierung und sortiert sie nach Priorität. Der Testserver befindet sich in Vancouver (Kanada).
6. Lastaufprall
Der Dienst testet, wie stark die Site der Belastung standhält (leichtes DDOS). Es werden mehrere Dutzend Benutzer und mehr als hundert aktive Verbindungen emuliert. Da der Test mehrere Minuten dauert, können während dieser Ladezeit andere Tools verwendet werden, um die Seitenladegeschwindigkeit während der Hauptverkehrszeit zu bewerten. Am Ende des Tests können Sie in einer Grafik sehen, wie sich die Download-Geschwindigkeit abhängig von der Anzahl der aktiven Benutzer ändert.
7. Monitis-Tools
Analysiert das Laden von Websites aus verschiedenen Teilen der Erde – Server in den USA, Europa und Asien. Zeigt zusammenfassende Statistiken für jeden Test an.
8.SiteSpeed.me
Sendet Anfragen von verschiedenen Rechenzentren (ca. 30 Server) an die analysierte Seite und bestimmt die Geschwindigkeit für jeden von ihnen. Hebt die beste, schlechteste und durchschnittliche Leistung in Bezug auf Zeit und Geschwindigkeit hervor.
9. PR-CY
Massen-Website-Geschwindigkeitscheck. Sie können bis zu 10 Adressen angeben und so die Ladezeit und Dokumentgröße für jede Ressource vergleichen.
10. Webseitenanalysator
Berichten Sie über das Laden der Seite und alle zusätzlichen Skripte/Stile/Bilder. Ein einfaches und oft notwendiges Werkzeug.
Wenn Sie andere kostenlose Online-Tools verwenden, um die Ladegeschwindigkeit von Website-Seiten zu überprüfen, teilen Sie diese bitte in den Kommentaren mit.
Viele von Ihnen haben wahrscheinlich schon den wunderbaren Service von Google genutzt: PageSpeed Insights? Du möchtest die begehrten 100 von 100 erreichen?
Bild, um Aufmerksamkeit zu erregen
Aber es liegt an der Kleinen.
Hier also die Ergebnisse meines Tests. Nehmen wir zum Beispiel eine beliebige Website. Ich habe eine kostenlose, vorgefertigte adaptive Website-Vorlage genommen, sie auf mein Hosting übertragen und mit dem Testen begonnen: Ergebnis des ersten Tests (Link zur Website):- Geschwindigkeit für Mobilgeräte - 79/100;
- Geschwindigkeit für einen Computer - 93/100;
Beschwert sich über:
Korrigieren Sie unbedingt:Entfernen Sie JavaScript und CSS, die das Rendern blockieren, oben auf der Seite.
Anzahl blockierender CSS-Ressourcen pro Seite: 3. Sie verlangsamen die Anzeige von Inhalten.
Der gesamte Inhalt oben auf der Seite wird erst angezeigt, nachdem die folgenden Ressourcen geladen wurden. Erwägen Sie, das Laden dieser Ressourcen zu verzögern, sie asynchron zu laden oder ihre wichtigsten Komponenten direkt in den HTML-Code einzubetten.
Wir machen ein paar kleine Tricks. Wir übertragen Stile aus der Datei in den Code:
War:
Wurde:
Article, Aside, Details, figcaption, Figure, Footer, Header, Hgroup, Nav, Section ( display:block; ) /* und andere Stile */
Und – Hurra! - Wir haben höhere Ergebnisse (Link zur Website):
- Geschwindigkeit für Mobilgeräte – 99/100;
- Geschwindigkeit für einen Computer - 99/100;
HTML kürzen
Durch die Komprimierung von HTML-Code (einschließlich Inline-JavaScript- oder CSS-Code) wird die Datenmenge reduziert, was zu schnelleren Lade- und Verarbeitungszeiten führt. Dieses Problem kann jedoch durch Komprimieren des Codes gelöst werden. Hat nichts mit diesem Thema zu tun.
Und wir vergessen auch nicht, dass wir das oben beschriebene Problem immer noch nicht gelöst haben:
Der gesamte Inhalt oben auf der Seite wird erst angezeigt, nachdem die folgenden Ressourcen geladen wurden. Erwägen Sie, das Laden dieser Ressourcen zu verzögern, sie asynchron zu laden oder ihre wichtigsten Komponenten direkt in den HTML-Code einzubetten. So viel wie sie in der Datei gewogen haben, so viel wiegen sie auch im Code!
Und jetzt die wichtigste Frage: Bug oder Feature?
Danke!
