Ladezeit-Optimierung mit Google PageSpeed Insights – Einblicke, Tipps und Beispiele

Ladezeit-Optimierung mit Google PageSpeed InsightsGoogle hat mittlerweile bekannt gegeben, dass die Ladezeit einer Website Einfluss auf das Ranking hat.

Aber nicht nur deshalb sollte man die Ladezeit der eigenen Website hin und wieder überprüfen und optimieren.

Ich stelle heute ein Tool von Google vor, welches man zur Analyse nutzen kann. Und ich zeige Beispiele, was die Optimierung bringt.

Warum Ladezeit-Optimierung?

Google nimmt die Ladezeit immer wichtiger. Letztens wurden sogar erste Experimente durchgeführt, bei denen die Info ‘Slow’ bei langsamen Websites in den mobilen Suchergebnisse angezeigt wurde.

In Zukunft wird die Ladezeit sicher noch wichtiger werden. Aber nicht nur für Google sollte man die eigene Website schneller machen. Die Nutzer merken den Unterschied zwischen langsamen und schnellen Websites sehr stark, wenn auch oft unbewusst.

So haben Studien gezeigt, dass die Ladezeit direkten Einfluss auf den Umsatz hat. Viele Nutzer sind heute recht ungeduldig.

Ich selber habe den Einfluss der Ladezeit mehrmals feststellen können. So konnte ich meine Besucherzahlen um rund 25% steigern, nur weil ich auf ein besseres Caching Plugin umgestiegen bin. Das hat sich positiv auf die Ladezeiten ausgewirkt.

Ladezeiten

In selben Zug stiegen die Besucherzahlen deutlich an:

Besucherzahlen gestiegen

Und auch mein neues Layout, welches seit letztem Herbst online ist, hat sich positiv auf die Ladezeiten und damit auch auf den Traffic ausgewirkt.

Ladezeit optimieren

Es gibt also viele Gründe sich mit der Ladezeit der eigenen Website zu beschäftigen und diese zu optimieren.

Analyse mit Google PageSpeed Insights

Eine sehr gutes Tool zur Analyse der eigene Website stammt von Google selbst. Google PageSpeed Insights ist Teil einer größeren Familie von Tools zur Ladezeit-Optimierung.

Dabei misst das Tool eigentlich gar nicht die Ladezeit. Zumindest geht es hier nicht darum die Ladezeit millisekundengenau anzuzeigen.

Stattdessen analysiert das Tool den Ladevorgang und schaut sich dabei diverse Faktoren genau an. Am Ende der Analyse gibt es einen Gesamtwert, der von 0 bis 100 reicht. Dieser Wert zeigt an, wie gut die Ladezeit der Website insgesamt bereits optimiert ist.

Das allein wäre aber nur bedingt hilfreich. Das Tool bietet allerdings zusätzlich sehr genaue Tipps und Vorschläge, was optimiert werden sollte.

Tipps und Vorschläge

Zu jedem Optimierungsvorschlag kann man eine Detailansicht aufklappen. Dort bekommt man nochmal genauer gesagt, was man optimieren sollte und welche Dateien es ggf. betrifft.

Umsetzung der Tipps

Diese konkreten Handlungsvorschläge sind das große Plus dieses Google-Tools.

Während andere Tools vielleicht die Ladezeit sehr genau analysieren, so gibt es hier konkrete Handlungsempfehlungen. Hällt man sich man diese, kann man Schritt für Schritt die Probleme beheben und den Gesamtwert verbessern.

Eine Übersicht der Optimierungstipps enthält ausführliche Informationen, wie man diese umsetzt.

In dieser CaseStudy wurde die mobile Version einer bekannten Website optimiert.

Braucht man 100 Punkte?

Immer wieder fragen Leser, ob man bei Google PageSpeed Insights 100 Punkte erreichen muss. Auch wenn manche Entwicklung stolz ihre 100 Punkte zeigen, so ist das meiner Meinung und Erfahrung nach nicht notwendig.

Zum einen ist es recht schwer 100 Punkte zu erreichen. Das liegt nicht nur daran, dass manche Kritikpunkte nur durch viel Know How oder z.B. einen eigenen Server zu behehen sind. Hier muss man die Kirche im Dorf lassen.

Es ist auch teilweise schwer bis unmöglich externe Scripte zu optimieren. Andere JS- und CSS-Scripte dagegen müssen im Header geladen werden, da sonst die entsprechende Funktion nicht korrekt funktioniert.

Dagegen sind andere Tipps, wie die Optimierung von Bildern oder die Komprimierung der gesamten Seite, meist recht einfach und schnell möglich.

Zum anderen ist es für ein gutes Ranking nicht notwendig 100 Punkte zu haben. Mir reicht es z.B., wenn die Punkte-Anzeige grün ist, was ab 85 Punkte der Fall ist. Das schaffe ich mit meinem Blog gerade so, was die Desktop-Ansicht angeht. 🙂

90+ Punkte bekommt man in der Regel nur, wenn man alle externe Skripte und interaktiven Funktionen deaktiviert, die JavaScript benötigen. Zudem muss man z.B. die Bild-Menge stark senken. Das würde in vielen Fällen die Nutzbarkeit und den Inhalt der Website einschränken. Hier sollte man abwägen, was einem besonders wichtig ist.

Die konkrete Ladezeit sollte man zudem nicht außer acht lassen. Ist diese Okay, ist man auf jeden Fall gut aufgestellt, auch wenn man nicht alle Optimierungsvorschläge umgesetzt hat.

Nutzererfahrung

Ein weiterer wichtiger Faktor ist die Nutzererfahrung, die Google PageSpeed Insights mittlerweile separat bei der mobilen Analyse ausgibt.

Damit will Google zeigen, wie gut die mobile Ansicht der eigenen Website ist, was nicht direkt mit den technischen Aspekten zusammenhängt.

Nutzt man ein responsive Layout ist dieser Wert meist schon sehr gut. Neben der technischen Optimierung sollte man auf diesen Wert viel Wert legen.

Tipps und Vorschläge

Google bietet inzwischen ein spezielles Tool zur Analyse mobiler Websites an, welches ausführlichere Tipps bietet.

Weitere Tipps und Tools

In einem früheren Artikel habe ich bereits Tools zur Ladezeiten-Messung und -Optimierung vorgestellt.

Zudem kann man konkrete Ladezeiten in Google Analytics sehen und Problemstellen entdecken.

Fazit

Um die eigene Website für die Besucher noch attraktiver und besser nutzbar zu machen, sollte man die Ladezeit und die Nutzererfahrung aus jeden Fall hin und wieder mal analysieren und optimieren.

Google PageSpeed Insights bietet sich dafür an, da es konkrete Verbesserungstipps gibt und damit auch Einsteigern hilft.

Zudem stammt dieses Tool von Google selbst und da wir bei Google ja auch gut ranken wollen, ist es ein weiterer Grund die Empfehlungen des Tools ernst zu nehmen.

Optimiert Ihr die Ladezeit eurer Website(s)?

Ergebnis anschauen

Peer Wandiger

29 Gedanken zu „Ladezeit-Optimierung mit Google PageSpeed Insights – Einblicke, Tipps und Beispiele“

  1. Ladezeit ist echt ein Thema, was ich ein bisschen vor mir herschiebe. Wir legen viel Wert auf unser Erscheinungsbild und gute Artikel, aber du hast Recht: Das sollte man nicht außer Acht lassen!

    Besonders für die NSC natürlich interessant. Danke für die Erinnerung! 😉

    Grüße von LBN
    Dennis

    Antworten
  2. Performance Optimierung ist ein Thema, mit dem sich jeder dringend beschäftigen sollte. Nicht erst seit Google es als Ranking Faktor bekannt gegeben hat.

    Besonders im eCommerce Bereich ist Performance im wahrsten Sinne des Wortes bares Geld wert. Laut Schätzungen verringert eine lange Ladezeit die Conversion Rate um ca. 1% pro 0,1 Sekunden.

    Oft reichen zum Anfang ja auch die rudimentärsten Verbesserungen, um einen großen Effekt zu erreichen.

    Antworten
  3. Vorsicht vor Pagespeed. Mit normalen Anzeigen und Scripten ist die 100 wirklich unmöglich. Außerdem sind nicht alle Empfehlungen sinnvoll. Manchmal empfiehlt Google Pagespeed auch Dinge, die bewusst anders gemacht wurden, um Performance einzusparen. Außerdem wird jedes Script gleich negativ eingestuft und es wird eben keine Rücksicht auf die individuelle Performance genommen. Kann nur abraten pauschal alles umzusetzen was Google Pagespeed sagt, manchmal macht ein anderer Weg mehr Sinn.

    Antworten
  4. Toll beschrieben und trifft den Punkt.
    100/100 ist nur dann möglich, wenn man sein Theme selbst erstellt und alle Funktionalitäten einbaut, ohne später auf Plugins zurück greifen zu müssen.
    Ansonsten sollte man schauen, dass man die Ladezeit auf unter 2 Sekunden bringt. Mit Plugins und Bildoptimierung geht das. Mehr dazu von mir im Rahmen der NSC.
    Grüsse
    Roby

    Antworten
  5. Ein bisschen AdSens oder Amazon-Script und schon reduziert sich die Punktezahl. Eine Verbesserung der Punktzahl hatte auch bei uns eine Verbesserung der Besucherzahl als Ergebnis. Und ich denke auch im GoogleRanking haben wir uns verbessert.

    Antworten
  6. Ich kann ebenfalls bestätigen, dass eine Ladezeitoptimierung immer Vorteile bringt – das Ranking steigt, die Besucher sind zufriedener, bleiben länger auf der Seite. Und dann wären wir schnell beim immer wichtiger werdenden Thema UI/UX.

    Zu erwähnen wäre hier, dass ich einige Kunden habe, denen ich teilweise helfe halbwegs schnelle Seiten zu haben. Viele Seiten haben aber ein dermaßen schlechtes Gerüst, altes Theme, duzende Plugins und langsame Server – da kann man einfach nicht viel machen! Teilweise werden bei solchen harten Fällen dann direkt 100/100 bei den Insights gefordert – das ist natürlich nicht machbar.

    Meine eigenen kleinen Nischenseiten haben 100/100 und < 1 Sek. Ladezeit – aber auch nur, weil es genau so ist, wie Peer oben sagt: 1. ich habe einen eigenen (NGINX)-Server und kann serverseitig alles kontrollieren 2. ich programmiere CMS und Theme alles selbst und kenne mich mit der Materie aus.

    Allgemein passt der Artikel auch zu den Beobachtungen, die ich bei diversen Kunden machen konnte: schnellere/bessere Seite führt zu mehr Besuchern

    Antworten
  7. Mein Meinung nach ist Googles PageSpeed absolut überbewertet. Wirklich relevante Informationen über die Ladezeit und den Grad der Performance gibt da eher Pingdom von sich.

    Eine kleine Anmerkung noch bzgl. 100 Punkte bei PageSpeed: Thorben Leuschners Webseite hat die volle Punktzahl und das wird (neben optimierten Bildern und Browser Caching) anscheinend durch die Eingliederung der CSS-Dateien direkt in den HTML-Code erreicht. Seine Webseiten hostet er bei All Inkl (Shared Hosting, glaube ich).

    Antworten
    • Hallo Lukas,

      jetzt im Moment kann dir der PageSpeed auch egal sein, allerdings wird Google den PageSpeed ab April mit in die Rankings einfließen lassen. Spätestens dann bekommst du richtig Probleme; die Rankings lassen sich dann nur schwer halten.

      LG

      Antworten
  8. Ich schaffe 96/100 nur mit einem eigenen “Template” welches ich auch bei der NSC verwenden werde (Geschwindigkeit ist auch ein Grund warum ich kein CMS mehr verwende): Minimales HTML, minimales CSS (inline), optimierte Bildgrößen – und kein eigenes “responsive” Design sondern so “mobile-first”-gebaut damit es auch aufm Desktop OK aussieht. Was ein befreundeter Programmierer meint: “Man muss natürlich dazu sagen, dass reines HTML bereits von Haus aus responsive ist.”

    Antworten
  9. Also Google pagespeed’s tipps haben meiner Erfahrung ab einem gewissen grad nichts mehr mit der tatsächlichen Performance zu tun. Bspw. hatte ich früher pagespeed 93, die seite hat aber langsamer geladen als jetzt, bei einem pagespeed von irgendwas mit 80.

    Ich optimiere inzwischen lieber auf echte ladezeit, gemessen mit pingdom oä.

    Antworten
  10. Hallo,

    Super, dass ich das jetzt hier gefunden habe! Ich wollte mich schon seit einiger Zeit den Ladezeiten widmen. Habe mir ein Bookmark gemacht und werde es heute mal angehen!

    Merci dafür!

    Antworten
  11. Kann mich da Tobi nur anschließen.

    Manche Tips und Empfehlungen sind echt etwas fragwürdig.

    Allein das man teilweise immer noch Optimierungspotential bei wahnwitzig kleinen Datenmengen bekommt. Ich habe da durchaus schon gelesen, dass ich meine Bilder doch bitte noch um 603 Bytes komprimieren sollte.

    Naja,ich gehe da meist auch nach der Devise vor hauptsache im grünen Bereich zu sein.

    Antworten
  12. Schon witzig, weil die Benutzer-Erfahrung nahe 100 ist, soll man trotzdem den Speed verbessern… gibt noch so viele ohne mobile Seite.

    Antworten
  13. Hallo Peer,

    mal wieder ein toller, verständlicher und aktueller Artikel zum Thema “Wie wird meine Homepage besser”!

    Vielen Dank dafür!

    Gruß
    Matthias

    Antworten
  14. Als eine sehr gute Alternative zu PageSpeed, kann ich euch das Browser-Putin YSlow von Yahoo empfehlen. Wenn ich es jetzt richtig im Kopf habe, gibt es bei YSLOW ein paar mehr Punkte die getestet werden und zu denen es auch umfangreiche Hinweise gibt.

    Antworten
  15. 100% / 100% bei PageSpeed Insights zu erreichen kann bei manchen Inhalten und Websites eine echte Herausforderung sein – unmöglich ist es allerdings nicht. Problematisch wird es meistens mit externen Widgets/Ads und Ähnlichem.

    Antworten
  16. Diesen Dienst von Google nutze ich auch, und es hat mir sehr geholfen. Kann ich nur bestätigen!!

    Antworten
  17. Je nach dem, welchen Zweck die Seite dient bzw. welche Nutzer man ansprechen möchte ist das Ranking mehr oder weniger interessant.
    Ich habe nach einer Lösung, die Ladezeiten durch Komprimierung der Webseite zu verringern und konnte das dann mittels Google PageSpeed Insights testen.
    Der Erfolg durch nur einen Eintrag in der .htaccess war sofort subjektiv spürbar und wurde mittels Google PageSpeed Insights objektiv bestätigt.
    Da meine Nutzer eher einen kleinen Kreis betrifft, ist dass dann auch ausreichend.
    Deshalb sehe ich auch nicht für jeden Webmaster die Notwendigkeit, alle “Tipps” von Google PageSpeed Insights befolgen zu müssen

    Antworten
  18. Hallo,

    ich habe seit kurzem einen google pagespeed von 100. Ich benutze ein WordPress Twenty Twelve als Theme. Als Ergänzung habe ich noch WP Super Cache und Autooptimize im Einsatz.
    Bei gtmetrix erziele ich mit diesen Einstellungen einen A(97%) score und einen B(84%) score.

    Antworten
  19. Hallo,

    ein Pagespeed 100 in allen 3 Bereichen ist machbar und meiner Meinung nach trennt sich da die Spreu vom Weizen bzgl. der Template Anbieter.

    Grundsätzlich gilt:

    1. Dein Javascript im Head sollte komplett asynchron geladen werden, damit eine unnötige Blockierung der Anzeige deiner Seite ausbleibt und der Seitenaufbau schneller vonstatten gehen kann. Sprich die Seite wird angefordert => Seite wird dem Besucher angezeigt => im Hintergrund wird das Javascript nachgeladen.

    2. Halte deine CSS so klein wie möglich. Google unterscheidet zwischen “above the fold” und “below the fold” Bereichen. Auf Deutsch sind das Bereiche, die direkt sichtbar sind und Bereiche, die durch scrollen der Seite sichtbar werden. Hier empfiehlt Google in seiner Dokumentation die CSS, die fuer den “above the fold” Bereich benötigt wird, als Inline CSS einzubinden und die CSS, die fuer den Rest der Seite benötigt wird, asynchrone einzubinden.

    3. Nutze ein “Lazy Load” Plugin, dass die Bilder, die fruehestens durch Scrollen auf deiner Seite zu sehen sind, nachlädt. Das spart Anfragen an den Server und der Browser kann die Seite schneller ausliefern und die Wartezeit auf zusätzliche Bilder bleibt aus. Natuerlich solltest du die gesamten Bilder auf deiner Seite komprimieren.

    4. Nutze Gzip und Cache.

    So erreichst du einen Pagespeed von 100.

    PS: Wer mit Joomla unterwegs ist, kann gerne auf meinen Namen klicken 😉

    Antworten
    • Bei der mobilen Suche spielt die Performance eine wichtige Rolle, aber auch bei der Desktop-Suche spielt es sicher mit rein.

      Fast noch wichtiger ist die Performance für die Besucher der eigenen Site. Es springen weniger Besucher ab, wenn die Seiten schnell laden und die Conversion Rate ist höher.

      Antworten
      • Was meinst Du mit mobiler Suche? Ich ging bisher immer davon aus, dass hier die gleiche Reihenfolge angezeigt wird, wie auf einem Desktop-PC. Falls das nicht so sein sollte: Welche Faktoren spielen denn sonst noch eien Rolle für die mobile Suche von Google?

        Antworten
        • Nein, die mobile Suche wird mittlerweile separat von der Desktop-Suche von Google behandelt.

          Hier haben schnelle Websites mit mobilem Layout Vorteile.

          Antworten
  20. Hallo Peer,

    bei ‘Google PageSpeed Insights’ erziel(t)e ich bereits (dazumal) einen 100/100 (Desktop-)Score; beim Mobile-Score erhielt resp. erhalte ich in Bezug auf ‘Geschwindigkeit’ ebenfalls einen 100/100 Score – leider stand ich seinerzeit was die (mobile) ‘Benutzbarkeit’ anbelangt im Mobile-Score wortwörtlich im ‘roten Bereich’ … !

    Nun, endlich, seit ich meine Seite ‘mobile-friendly’ konzipiert habe erhalte ich auch in der Sektion (mobile) ‘Benutzbarkeit’ 100/100 Punkte.
    Es hat auf die Platzierungen in den Suchergebnissen eine enorme Auswirkung – ebenso wie die HTTPS-Verschlüsselung.

    Mittlerweile stehe ich ‘jetzt’ (endlich) nach ‘Jahren’, in den (deutschen) Google-Suchergebnissen für das Keyword ‘grep’ um Platz 30 rum – dass ist recht gut wenn man bedenkt das meine Konkurrenten Wikipedia, GNU, usw. sind welche schon ewig existieren und viele Millionen (perfekte) Backlinks haben, etc. !

    Meine Inhalte werden statisch via nginx, gzip-komprimiert über einen eigenen Server ausgeliefert (Standort: Straßburg) ausgeliefert; Dokumentenzugriffe erfolgen recht fix da betreffende Inhalte (u. a.) im RAM gehalten werden, etc. – DNS-Server liefern extrem schnell eine Antwort.
    Inhalte sind massiv minifiziert, usw. – optimierte HTML-Auszeichnungen, etc. !

    Man kann sagen dass man in etwa um eine Google-Ergebnis-Seite nach oben rutscht wenn man bei Google PageSpeed Insights ‘perfekt’ abschneidet und zudem HTTPS anbietet.

    Ciao, Sascha.

    Antworten
  21. Hi,

    bin bei 86 und jetzt bräuchte ich echt hilfe ! wenn könnte ich dafür beauftragen das meine Katana ein käufer finden ?

    gruß Silvio

    Antworten
  22. Ladezeiten sind definitv ein wichtiges Thema und auch kann man mit jeder Seite bei Google Insight i.d.R. über 90-100/100 Punkten Gtmetrix, Pingdom etc. kommen. Auch mit WordPress.

    Hier spielen aber mehrere Faktoren eine Role, aber möglich ist das definitv. Z.B. Google Skripte (Analytics etc.) sollten local auf dem eigenen Server gespeichert werden, weil nnur so hat man Einfluss auf die Caching Time. Lazy Load aktivieren. htaccess optimieren und und und.

    Auch 100/100 sind möglich

    Antworten
  23. Guten Abend, das tool an sich ist schon Klasse. Mit den optimierungs Vorschlägen konnte ich fast 3 Sekunden rausholen. Und habe bei der Desktop Version einen Score von 97!

    Antworten

Schreibe einen Kommentar