Die Ladezeit der eigene Website wird immer wichtiger und da wird oft auf Analyse-Tools wie PageSpeed Insights von Google gesetzt, um Probleme zu finden.
Doch was genau bedeuten denn die Meldungen von PageSpeed Insights eigentlich?
Dieser Frage gehe ich in diesem Artikel nach und erkläre die wichtigsten Meldungen des Performance-Tools und wie man damit umgeht.
Zudem schaue ich mir an, wie aussagekräftig das Tool überhaupt ist und wie man damit umgehen sollte.
Was ist Google PageSpeed Insights?
Nicht erst seit die mobile Nutzung so stark zugenommen hat, wurde von Google immer wieder betont, wie wichtig die Ladezeit im Netz ist. Trotz DSL gibt es immer noch viele Situationen, wo man nicht die beste Internet-Anbindung hat und da ist die Ladezeit um so wichtiger.
Vor allem die Absprungrate steigt bei höheren Ladezeiten, was laut Studien von Amazon und Co. deutlich in den Umsätzen zu sehen ist. Generell bekommt man einfach weniger Besucher unter dem Strich.
Mittlerweile hat Google die Ladezeit sogar offiziell zu einem Ranking-Faktor (wenn auch erstmal kleinen) gemacht. Schaut man sich den immer stärkeren Trend hin zur mobilen Nutzung an, dann wird die Bedeutung sicher nicht geringer in Zukunft.
Das Online-Tool Google PageSpeed Insights (hier zu finden) gibt es schon lange, aber es wurde immer wieder überarbeitet. Erst in diesem Jahr kamen neuen interessante Features hinzu, auf die ich weiter unten genauer eingehe.
Das mag nicht das ausführlichste Tool in diesem Bereich sein, aber es ist eben von Google selbst, was es so spannend macht. Darin gibt es eine Analyse von typischen Problemen auf Websites. Mit dem Update vor einigen Monaten wird nun auch stärker die reale Ladezeit ausgewertet.
Als Ergebnis bekommt man verschiedene Probleme aufgelistet, die das Tool für die analysierte Seite gefunden hat. Zudem bekommt man Tipps zur Optimierung bzw. Behebung dieser Probleme. Auch wenn Profis Google PageSpeed Insights immer etwas abschätzig betrachten, so bietet es dennoch gerade für Einsteiger und “normale” Website-Betreiber wichtige Infos zur Optimierung ihrer Website. Schließlich zeigt das Tool an, was Google grundsätzlich stört und das sollte man, soweit es geht und Sinn macht, beheben.
So analysierst du deine Website mit Google PageSpeed Insights
Die Benutzung des Tools ist recht einfach und sollte für Einsteiger kein Problem sein. Nach dem Aufruf der Seite gibt man einfach eine URL ein, die man analysieren will. Das kann z.B. die Startseite sein, aber natürlich auch eine Unterseite.
Die Analyse wird dann für die konkrete URL durchgeführt und nicht für die gesamte Website. Deshalb lohnt es sich die Startseite und mehrere wichtige Unterseiten zu analysieren. Auf diese Weise kommt man teilweise Problemen auf die Schliche, die nicht auf allen Seiten auftreten.
Nach der Analyse werden ein paar grundsätzliche Infos angezeigt und konkrete Probleme aufgelistet.
Grundsätzliche Infos über die eigene Website
Zum einen gibt Google PageSpeed Insights ein paar grundlegende Informationen zur analysierten Seite aus. Diese sind jeweils für die Mobile Ansicht und die Desktop-Ansicht verfügbar und unterscheiden sich da durchaus.
Seitengeschwindigkeit
Diese Analyse ist relativ neu und basiert auf realen Nutzungsdaten aus dem Browser Google Chrome. Hier wird die durchschnittliche Ladezeit angegeben und zudem auch noch in FCP und DCL unterteilt.
FCP bedeutet “First Contentful Paint” und gibt an, wann die ersten sinnvollen Inhalte für die Nutzer im Browser angezeigt werden. DCL steht für “DOM Content Loaded” und beschreibt die Zeit, die es dauert, bis das HTML Dokument komplett geladen wurde. Bilder etc. sind da nicht inbegriffen.
Die Seitengeschwindigkeit ist allerdings bei kleineren und/oder neuen Websites teilweise nicht verfügbar. Das liegt einfach daran, dass Google dann noch nicht genug Daten über seinen Browser von dieser Website sammeln konnte. Alternativ empfiehlt Google, dass man auf Lighthouse zurückgreifen soll, welches ich hier auch schon mal vorgestellt habe.
Mit dieser Angabe der Seitengeschwindigkeit versucht Google vor allem eine Abbildung der wahrgenommenen Ladezeit zu erreichen. Schließlich ist es für den Nutzer ja erstmal wichtig, dass er was lesen und schon mit der Website interagieren kann. Ob da im Hintergrund noch irgendein anderes Bild etc. geladen wird, ist dem Nutzer egal.
Optimierung
Dieser Wert gibt die Optimierung der Seite an, basierend auf den Best Practices, die Google für wichtig hält und mit diesem Tool analysieren kann. Ab 85 Punkten wird dieser Wert grün, aber auch darunter muss er nicht schlecht sein.
Nicht umsonst basiert die Gesamtbewertung der mobilen bzw. der Desktop-Ansicht mittlerweile auf der Seitengeschwindigkeit, die Google ermittelt. Dennoch sollte man hier bei einem orangenen und ganz besonders bei einem roten Wert genauer hinschauen, welche Probleme Google festgestellt hat und welche Lösungen empfohlen werden.
Seitenaufbauverteilungen
Anschließend folgt noch eine Darstellung der Seitenladezeiten, unterteilt in FCP und DCL. Die Balken zeigen einfach an, wie oft die Website im Chrome-Browser von realen Nutzern schnell, mittel und langsam aufgerufen wurde. Je größer der grüne Bereich hier ist, umso besser.
Seitenstatistiken
Als letzte generelle Angabe folgen noch die Seitenstatistiken. In diesem Text wird angegeben, wie viele sogenannte Roundtrips es gebraucht hat, um die Seite komplett zu laden.
Diese Roundtrips bezeichnen einfach die zusätzliche Kommunikation mit dem Server bzw. mit externen Servern. Im Idealfall ist das nur einmal nötig, aber wenn man dynamische Inhalte hat und externe Scripte einbindet, dann sind mehrere Roundtrips notwendig. Oft hat es auch was mit dem CMS zu tun, bei dem man ja nun auch nicht viel ändern kann.
Diese Roundtrips kosten Zeit, benötigen mehr Daten und blockieren ggf. das Laden anderer Ressourcen.
5 Problem-Meldungen und was sie bedeuten
Nach den generellen Angaben listet Google zudem gefundene Probleme auf, die man optimieren soll. Das sind mehr Best Practices, als konkrete individuelle Tipps, da Google nur ein gutes Dutzend dieser Punkte kennt. Dennoch sind es oft wichtige Hinweise auf Probleme, die Google stören und die man deswegen beheben oder zumindest verbessern sollte.
Hier nun die nach meiner Erfahrung 5 häufigsten Probleme, die PageSpeed Insights ausgibt.
- JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen
Das ist zumindest bei mir die häufigste Meldung, die Google PageSpeed Insights ausgibt. Standardmäßig laden vielen Themes, Plugins und teilweise auch Content Management Systeme JavaScript- und CSS-Dateien im Header, anstatt im Footer. Letzteres würde dafür sorgen, dass die Website an sich erstmal lädt und erst danach diese Scripte.
Allerdings ist es teilweise auch unumgänglich CSS oder JavaScript früh zu laden. Handelt es sich um eine große Seite, die ein wenig zum Laden benötigt, würden z.B. erstmal manche Elemente “normal” angezeigt werden und erst nach dem Laden der CSS-Datei im Footer dann in der “richtigen” optischen Darstellung. Das sieht nicht schön aus. Ähnlich ist es bei manchen JavaScript-Dateien, die einfach im Header geladen werden müssen, damit die Website sofort ordnungsgemäß funktioniert.
Dennoch sollte man versuchen so wenig wie möglich im Header zu laden, was durchau möglich ist. Teilweise hilft ein Wechsel des Themes oder die Nutzung einer Plugin-Alternative. Mit bestimmten Plugins, wie Scripts To Footer, kann man zumindest einen Teil dieser Dateien vom Header in den Footer verschieben.
- Bilder optimieren
Gerade bei Laien ist das eine häufige Fehler-Meldung. Da werden oft viel zu große Bilder eingebunden, die dann im Browser kleiner skaliert werden. Die Anzeige der Bilder sieht deshalb gut aus, aber dennoch ist die Dateigröße viel größer, als sie sein müsste, was sich negativ auf die Ladezeit auswirkt.
Die Lösung hierfür ist denkbar einfach. Zum einen sollte man nur die Bildgröße einbinden, die auch wirklich angezeigt wird. Zum anderen sollte man mit einem Tool direkt auf dem eigenen PC oder mit einem Plugin in WordPress diese Bilder so gut es geht verkleinern. Die Fotos, wie sie aus der Kamera kommen, sind viel zu groß und auch WordPress selbst schafft keine gute Komprimierung.
Hier habe ich einige Tools und Plugins für die Foto-Komprimierung vorgestellt.
- Antwortzeit des Servers reduzieren
Wenn man sehr günstiges Hosting nutzt, dann sieht man sicher häufiger diese Meldung in PageSpeed Insights. Gerade die Antwortzeit (englisch Response Time) ist sehr wichtig, damit der Nutzer schnell die ersten Inhalte zu sehen bekommt. Hat man aber schlechtes oder zu leistungsschwaches Hosting, dann dauert das deutlich länger und viele Nutzer springen ab.
Am einfachsten kann man die Antwortzeit des Servers verbessern, indem man auf einen besseren Server/Tarif wechselt, der einfach mehr Leistung hat und schneller ist. Aber teilweise habe ich auch schon erlebt, dass Caching-Plugins der Grund für das Problem waren und ein Wechsel des Plugins die Antwortzeit deutlich verbessert hat.
- CSS/HTML/JavaScript reduzieren
Das sind eigentlich 3 unterschiedliche Meldungen, die ich hier aber mal zusammenfasse. Schließlich bedeuten alle drei im Grunde dasselbe. Google zeigt an, welche Einsparungen in KiB bzw. % hier jeweils möglich sind.
Der Einsatz eines Minify-Plugins (z.B. Autoptimize), welches HTML, CSS und JavaScript Code optimiert, ist hier eine gute Lösung. Auch eine aktivierte GZIP-Komprimierung hilft hier auf jeden Fall.
- Browser-Caching nutzen
Zu guter Letzt liest man auch häufig etwas davon, dass man Browser-Caching nutzen sollte. Das betrifft dann oft externe eingebundene Services, die man aber nur bedingt cachen kann. Aber auch interne Scripte, Dateien etc. kann man für das Browser-Caching optimieren. Dazu bieten sich Caching-Plugins, wie WP Super Cache oder WP Fastest Cache an, die entsprechende Einstellungen in der htaccess-Datei vornehmen.
Das sind nicht alle Angaben, die Google PageSpeed Insights ausgibt, aber sicher die häufigsten.
Was PageSpeed Insights bringt und was nicht?
PageSpeed Insights wird, wie schon gesagt, durchaus kritisch gesehen. Während manche hier schon fast fanatisch versuchen auf 100 Punkte zu kommen, halten andere das Tool für unbrauchbar. Ich liege da irgendwo in der Mitte.
Mit der Integrierung der realen Ladezeiten-Daten ist das Tool sicher nützlicher und aussagekräftiger geworden. Gerade für Einsteiger und alle, die sich nicht zu sehr in die technischen Details begeben wollen, bietet das Tool hilfreiche Tipps.
Es schadet sicher nicht die genannten Probleme anzugehen und sinnvoll zu verbessern. Dabei muss natürlich immer eine Abwägung hinsichtlich des Aufwandes und der gewünschten Website-Features geschehen. Schließlich könnte man die JavaScript- und CSS-Probleme einfach damit beheben, dass man auf ein schönes Layout, interaktive Möglichkeiten und z.B. Tracking verzichtet. Aber das macht in der Regel wirtschaftlich keinen Sinn. Also muss man einen guten Mittelweg finden.
Um mehr über den Ladeprozess der eigenen Website zu erfahren und zu erkennen, wann genau was geladen wird und welches Element ggf. eine Blockierung verursacht, sind dann aber andere Tools notwendig, wie z.B. Pingdom.com.
Zudem sind die Tipps von Google PageSpeed Insights auf bestimmte Dinge beschränkt. Generelle Optimierungsmaßnahmen, wie strukturelle Änderungen an der Website, Datenbank-Optimierung, weniger Plugins, der Server selbst, Caching-Maßnahmen, ein anderes Theme und so weiter werden davon nicht abgedeckt.
Deshalb sollte man Google PageSpeed Insights nur als ein Tool und mehreren (plus manueller Analysen) nutzen und sich nicht allein darauf verlassen.
Fazit
Auch wenn PageSpeed Insights nur eine eingeschränkte Aussagekraft hat und es nicht notwendig ist 100 Punkte hier zu erreichen, ist es doch recht nützlich für Hobby-Website-Betreiber und ähnliche Anbieter. Unter dem Strich sollte es aber nur eine Analyse von mehreren sein.
Nutzt ihr Google PageSpeed Insights und wenn ja wie?
Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.
Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.
- Danke für 16 tolle Jahre - 13. Juli 2023
- So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
- Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023
Bei der Analyse mit beiden Tools (google page speed und pingdom) kommen bei mir verschiedene Ergebnisse raus. Bei pingdom erreicht eine Seite von mir einen Performance grade von “90” während die gleiche Seite bei google page speed bei der Seitengeschwindigkeit in der Desktop Version nur 33 von 100 Punkt erreicht. Anscheinend arbeiten beide Tools mit verschiedenen Parameter…
Zum einen arbeitet jedes Tool anders, zum anderen werden auch unterschiedliche Schwerpunkte gesetzt. Pingomd analysiert vor allem die Ladezeit, während Pagespeed Insights primär verschiedene Aspekte einer Website analysiert und nicht die Ladezeit.
Deshalb nutze ich verschiedene Tools, um in der Summe alle wichtigen Probleme zu finden und zu beheben.
Vielen Dank für den hilfreichen Beitrag und den wichtigen Hinweis mit dem Mittelweg. Beispielsweise bietet das Tool optimierte Bilder zum Download, die dann häufig zu einer verpixelten Darstellung des Webdesigns führen. Ähnliches gilt auch für andere Stellen. Nur mit einem guten Mittelweg, können schnelle und schöne Webseiten erreicht werden. In beiden Feldern 100% erreichen zu wollen ist leider nicht immer möglich.
Bei kleineren Seiten empfehle ich die Kombination Borlabs Cache / W2E Image Optimizer.
Borlabs Cache sorgt “Out of the box” schon für recht gute Ergebnisse und verkleinert die Skripte sehr schön.
Mit W2E Image Optimizer kann man nicht nur die Bilder verlustfrei optimieren lassen (das machen viele Plugins), sondern auch Webp-Dateien erzeugen lassen und an passende Browser ausgeben lassen. Macht meistens für Chrome-Nutzer viel mehr aus, als an anderen sehr technischen Stellschrauben zu drehen und man reduziert die Dateigrößen meist um mindestens 1/3.
Für Above the fold-Optimierung würde ich dann entsprechend meistens zu ‘nem Profi gehen, in Eigenarbeit bringt das meist nur Frustration, wenn viele Plugins/Skripte im Einsatz sind.
PS: GTMetrix bietet auch noch mal einige zusätzliche Vorschläge, wo man ansetzen kann.
Seit heute Abend behauptet Page Speed das man http2 verwenden soll ^^ “Verwenden Sie HTTP/2” Ganz seltsam…