PageSpeed Optimierung für rasend schnelle Ladezeiten

Eine PageSpeed Optimierung ist für Website-Nutzer und Suchmaschinen-Anbieter wie Google gleichermaßen wichtig. Website-Betreiber und Online Händler sollten also auf schnelle Ladezeiten achten, um eine hohe User Experience (UX) und gute Keyword-Rankings zu ermöglichen. In diesem Blog-Beitrag stelle ich hilfreiche Tools zur PageSpeed-Analyse und 10 garantiert wirksame Tipps für rasend schnelle Ladezeiten vor.

PageSpeed Optimierung - Titelbild

Updates & News

30 November 2016
'

30.11.2016

Wie John Mueller von Google auf Twitter bekannt gab, besteht kein Limit für HTTP Requests beim Laden einer Ressource. Allerdings empfiehlt John das die Ladezeit – also der PageSpeed – einer Seite nicht länger als 3 Sekunden betragen sollte. (Quelle)

22 Februar 2015
'

22.2.2015

Eine relativ neue Methode die Ladezeit von Webseiten für Mobilgeräte zu optimieren, ist das AMP-Projekt. AMP steht für Accelerated Mobile Pages und wird von Google stark forciert. Seit Januar 2016 können Accelerated Mobile Pages bereits in der Search Console aus der Sicht von Google analysiert und bewertet werden.


Der drastische Wandel zum mobilen Surfverhalten erfordert immer intensivere Optimierungsmaßnahmen, um den PageSpeed bzw. die Ladezeit einer Website spürbar zu beschleunigen. Einerseits möchte kein Website-Betreiber seine Besucher mit langen Ladezeiten quälen und negative Nutzersignale aufbauen. Schnelle Websites erfreuen Nutzer und ermöglichen eine effiziente Verarbeitung von Suchmaschinen-Crawlern. Beide Kriterien sind für Google wichtig. Deshalb ist die Ladezeit ein Rankingfaktor in der Google Suche. Schnelle Websites erhalten im mobilen Index einen Rankingbonus.

Google hat sehr schnell erkannt, dass sich die Internet-Nutzung in Richtung Mobilgeräte (Smartphones) verschiebt und richtet seine Dienste und folglich den Google Algorithmus dahingehend immer stärker aus. Hatte im Dezember 2009 die Ladezeit offiziell laut Matt Cutts keinen Einfluss auf das Ranking in der Google Suche (hier), bestätigte das Unternehmen wenige Monate später im April 2010, dass die Ladezeit ein neues Rankingsignal sei (zum Artikel). Im Oktober 2016 berichtete ich darüber, dass Google plant, den Mobilen Index als Hauptindex zu nutzen. Das Thema PageSpeed Optimierung ist bereits allgegenwärtig. Auch auf Konferenzen wird darüber intensiv diskutiert und gute Lösungen ausgetauscht.

Vorteile schneller Ladezeiten

  Bessere UX und geringere Absprungrate

Webseiten mit schnellen Ladezeiten erzeugen ein besseres Nutzungserlebnis/Nutzererfahrung, in der Fachsprache „UX/User Experience“ genannt. Bei einer optimalen Nutzererfahrung surft der Besucher einfach gern auf der Website, wodurch die Absprungrate geringer ausfällt. Bei der Nutzung von Mobilgeräten, besonders dort wo die Netzabdeckung schlecht (ländliche Gebiete) bzw. gering (U-Bahn) ist, wirkt sich ein hoher PageSpeed positiv auf das Nutzungsverhalten aus. Schnelle Websites werden öfter besucht und empfohlen. Auch für Suchmaschinen-Betreiber wie Google sind Websites mit schnellen Ladezeiten wichtig. Diese können Kosten-effizienter gecrawlt werden und die Nutzer-Zufriedenheit steigt durch relevantere Suchergebnisse.

  Höhere Konversionsrate

Besonders für Online Shop-Betreiber ist der PageSpeed eine wichtige Kennzahl zur Umsatz-Maximierung. Wird eine Artikelseite schnell geladen, wirkt sich das positiv auf die User Experience und somit auf die Umsätze aus. Laut einer Berechnung des E-Commerce Riesen Amazon führt ein um 100ms längerer PageSpeed zu einer Verringerung der Konversionsrate um etwa 1 Prozent. [Make Data Useful; Greg Linden; Standford Data Mining; 2006]

  Bessere Crawlability

Performante Websites erzeugen eine bessere Crawlability. Suchmaschinen Crawler können Websites schneller verarbeiten und das kann zu besseren organischen Keyword-Rankings führen. Die Google Search Console (ehemals Webmaster-Tools) bietet eine Übersicht zu den Crawling-Statistiken einer Website für die letzten 90 Tage.

Kostenfreie Tools zur PageSpeed-Prüfung

Es gibt eine Vielzahl kostenfreie PageSpeed Tools, um die Ladezeit einer Webseite aus unterschiedlichen Perspektiven zu analysieren. Im Folgenden stelle ich empfehlenswerte kostenfreie Tools vor:

Google PageSpeed Insights

Das wohl populärste Tool ist Google PageSpeed Insights. Nach Eingabe einer URL führt das Tool einen Live Check durch und stellt eine Bewertung des PageSpeed auf Basis einer Maximal-Punktzahl von 100 Punkten dar, wobei zur Erreichung sehr viele Faktoren perfekt feinjustiert sein müssen. Gut an PageSpeed Insights finde ich die Unterscheidung zwischen Desktop-Systeme und Mobilgeräte. Die Auflistung der Prüfkriterien und der bestehenden Optimierungspotenziale ermöglicht eine effektive PageSpeed-Optimierung. Persönlich finde ich das Tool sehr scharf, also kritisch, eingestellt. Deshalb nutze ich häufig andere Tools zur Analyse.

Google Pagespeed Insights-Tool
Google Pagespeed Insights-Tool

WebPagetest.org

Nach meiner Bewertung ist WebPagetest das umfangreichste kostenfreie Tool zum Messen der Ladezeit einer Webseite. Mehrere Prüfroutinen und Einstellungen stehen zur Verfügung – auch Benchmarks mehrerer Seiten sind möglich. Trotz das Webpagetest kostenfrei ist, handelt es sich um ein hochwertiges Analysewerkzeug.

Webpagetest.org
Webpagetest.org

Der tatsächliche Nutzen des Tools zeigt sich in den Ergebnissen. Zugegeben, durch den Umfang verliert sich das ungeübte Auge schnell in den Daten und Charts. Deshalb ein paar Empfehlungen: Alle Basis-Informationen befinden sich im Reiter „Summary“. In der übersichtlichen Matrix empfehle ich die „Time“ unter „Fully Loaded“ zu bewerten. WebPagetest führt standardisiert zwei Requests durch, um auch die Ladezeit bei einem zweiten Besuch zu messen. Beide Daten sind wichtig.

Summary // Webpagetest.org
Summary // Webpagetest.org

Besonders informativ ist auch die Spalte „First Byte“. Damit ist die „TTFB“ (Time to First Byte) gemeint – die Antwortgeschwindigkeit des Servers. Das ist die Zeit, die vergeht, bis der Server das erste Byte zurückgeliefert hat. Bei der TTFB wird die Download-Geschwindigkeit der Antwort nicht gemessen. Beträgt die TTFB über 1.0 Sekunde, scheint der Server zum Zeitpunkt des Tests langsam gewesen zu sein. Es lohnt sich, den Server zu überwachen, um herauszufinden, ob dieser generell schwach ist und unter Last ggf. schnell zusammenbricht. Mein Tool der Wahl dafür ist Pingdom.


Pingdom Website Speed Test

Meine dritte Tool-Empfehlung zum Messen des PageSpeed ist Pingdom. Der Anbieter eines Server-Monitoring Dienstes bietet auch einen kostenfreien PageSpeed-Test an. Die Einstellungen und Ergebnisse sind im Vergleich mit WebPagetest etwas limitiert. Trotzdem erhält man viele hilfreiche Insights und deshalb ist der Test für schnelle OnDemand-Analysen sehr gut geeignet.

Website Speed Test // Pingdom
Website Speed Test // Pingdom

Pingdom skaliert die Ergebnisse für verschiedene Prüfkriterien auf maximal 100 erreichbare Punkte. Die Ladezeit („Load time“) wird in Sekunden (s) angegeben, leider ohne Angabe der TTFB. Die Performance Insights bieten eine Zusammenfassung der größten Optimierungshebel zur PageSpeed-Optimierung der Seite. Schnell kann man ungewünschte Flaschenhälse identifizieren und diese gezielt beheben. Besonders hilfreich finde ich die Waterfall Analyse, die einen detaillierten Überblick der Ladezeiten aller Ressourcen (CSS/JavaScript/Bilder) gibt. Grafisch ist Pingdom ein Augenschmaus.

Page Speed Performance Insights // Pingdom
Page Speed Performance Insights // Pingdom

GTMetrix

Nun habe ich doch noch eine Empfehlung: GTMetrix. Das Tool ermöglicht vielseitige Tests ausgewählter URLs, um wichtige Optimierungspotenziale zu enttarnen. Ist eine URL eingegeben, können optional der Server-Standort, der Web-Browser, die Verbindung und weitere individuelle Einstellungen vorgenommen werden. Hilfreich finde ich die HTTP Authentifizierung, die genutzt werden kann, wenn die URL beispielsweise auf einer geschützten Testumgebung abgelegt ist.

Auf dem Dashboard werden die Performance-Daten der getesteten URL dargestellt. Das umfasst nicht nur einen PageSpeed Score und YSlow Score, sondern auch Seitendetails, wie die Ladezeit, die Dateigröße und die Anzahl der Requests der betreffenden URL.

PageSpeed-Test Dashboard // GTMetrix
PageSpeed-Test Dashboard // GTMetrix

Unter diesen Daten befinden sich zahlreiche Detail-Reports, die in Form eines Reiter-Menüs dargestellt werden. Diese Reports bieten tiefgründige Einblicke zur durchgeführten Analyse: Die beiden Reiter „PageSpeed“ und „YSlow“ bieten hilfreiche Handlungsempfehlungen (ähnlich wie Googles PageSpeed Insights). Durch das Wasserfall-Diagramm, die Timings- und History-Daten werden viele „Bremsklötzer“ identifiziert.

PageSpeed-Daten // GTMetrix
PageSpeed-Daten // GTMetrix

Which loads faster

Für einen schnellen Vergleich von zwei Domains oder Webseiten ist Which loads faster empfehlenswert. So kann man grob ermitteln, welche der URLs schneller geladen wird. Für einen schnellen Benchmark ist das durchaus interessant, für tiefgründige Analysen empfehle ich aber eines der bereits genannten PageSpeed-Tools.

Which loads faster-Vergleich von zwei Domains
Which loads faster-Vergleich von zwei Domains

Damit möchte ich es bei der Empfehlung von Tools zur Messung des PageSpeed belassen und mich nun dem Kernthema des Blog-Beitrags widmen.

10 garantiert wirksame Tipps für rasend schnelle Ladezeiten

(1) HTTP-Requests verringern

HTTP ist die Abkürzung für „Hypertext Transfer Protocol“. Es wird verwendet, um Daten von einem Server aus dem Internet zu einem Client (Browser) zu übertragen. Das HTTP Protokoll ist als allgemeines Datenübertragungsprotokoll weit verbreitet.

Zur vollständigen Darstellung einer Webseite im Browser sind stets unterschiedlich viele HTTP-Requests zwischen Server und Client erforderlich – je nach Umfang und Optimierungsgrad der Webseite. Jede erforderliche Datei (CSS-Styles, JavaScripte, Bilder, usw.) wird dabei einzeln angefragt und übertragen. Je weniger HTTP-Requests erforderlich sind, desto schneller wird die Seite geladen. Deshalb sollten man die Anzahl der HTTP-Requests auf ein Mindestmaß reduzieren.

Anzahl der HTTP-Requests ermitteln

Es ist einfach zu ermitteln, wie viele HTTP-Requests zur vollständigen Darstellung einer Ressource erforderlich sind. Ich verwende dazu den Chrome Browser. Durch Rechtsklick und Auswahl von „Untersuchen“ im Menü öffnet sich der „Chrome Inspector“ mit dem man die HTTP-Requests ermittelt.

Google Chrome Inspector
Google Chrome Inspector

Im Reiter-Menü wählt man nun „Network“ und gibt im Suchschlitz des Browsers die gewünschte Adresse ein, oder man lädt die Seite erneut. Sobald die Seite geladen ist, wird im unteren linken Browser-Fenster die Anzahl der HTTP-Requests dargestellt. In meinem Beispiel sind 24 HTTP-Requests erforderlich, um die Seite vollständig zu laden (Bild: roter Rahmen). Je weniger HTTP-Requests, desto besser.

Beispiel: Darstellung der HTTP-Requests im Chrome Inspector
Beispiel: Darstellung der HTTP-Requests im Chrome Inspector

Der Chrome Inspector informiert auch darüber, welche Dateien geladen wurden, von welchem Dateityp sie sind, wie groß die Datei ist, deren Latenz beträgt, usw. Ich empfehle diese Daten einfach mal für die eigene Website zu prüfen. Dateien mit HTTP Statuscode 3xx oder 4xx sollten zum Beispiel vermieden werden.

(2) Gzip Kompression aktivieren

Gzip ist ein von patentierten Algorithmen freies Kompressionsprogramm. Durch die Nutzung von Gzip werden die Daten komprimiert vom Server zum Client übertragen. Das spart Bandbreite und erhöht den PageSpeed. Nicht selten lässt sich ein hoher Kompressionsgrad von über 70% erreichen.

Gzip Kompression // checkgzipcompression.com
Gzip Kompression // checkgzipcompression.com

Gzip Kompression durch Erweiterung der .htaccess-Datei

Durch den folgenden .htaccess-Datei Eintrag lässt sich die Gzip Kompression schnell aktivieren. Dafür ist ein Apache HTTP Server mit dem installierten Extension Modul „mod_gzip“ erforderlich.

Deflate Kompression durch Erweiterung der .htaccess-Datei

Wenn die Konfiguration mit Gzip nicht funktioniert, kann man auch die Deflate Kompression mit folgendem .htaccess-Datei Eintrag ausprobieren (nicht genutzte Dateitypen einfach entfernen):

(3) Browser Caching einrichten

Viele Website Betreiber erfreuen sich wiederkehrender Besucher, besonders Nachrichten-Portale und aktiv gepflegte Blogs. Auch im E-Commerce sind wiederkehrende Besucher einer Website durchaus üblich, besonders wenn man Preisvergleiche durchführt oder sich zur Verfügbarkeit von Produkten informieren möchte. Durch die Aktivierung des Browser Caching kann dem Browser mitgeteilt werden, welche Dateien aus dem bestehenden Cache bezogen werden sollen – quasi dem Bestand des letzten Besuches. Je mehr Dateien aus dem Browser Cache und nicht vom Server geladen werden, desto schneller kann die Seite geladen werden. Das sogenannte „Leverage Browser Caching“ kann auf unterschiedliche Weise erfolgen und individuell für Dateitypen festgelegt werden.

Browser Caching durch .htaccess-Datei

Voraussetzung für das Browser Caching durch .htaccess-Datei ist die Aktivierung des Apache Server Moduls „mod_expires„. In die .htaccess-Datei wird nun folgender Eintrag ergänzt:

Die Angaben zwischen den „access plus …“ legen die Cache-Lebensdauer fest, die individuell angepasst werden sollte. In meinem Beispiel sind die Dateien einen Monat und einen Tag gültig, bis sie verfallen und der Browser diese erneut vom Server laden muss. Ruft ein Nutzer zum Beispiel eine Seite nach 24 Tagen erneut auf, werden die vom Browser gecachten Daten geladen, was die Ladezeit verringert und den PageSpeed begünstigt.

Sobald eine Ressource ihre Gültigkeit verloren hat, wird diese beim nächsten Besuch wieder vom Server geladen. Das Thema ist sehr komplex, denn durch weitere Modifikationen, zum Beispiel die Nutzung des HTTP-Headerfeldes „last-modified“ können weitere Features genutzt werden. So kann der Browser den letzten Änderungszeitpunkt einer Datei auf dem Server abgleichen. Wurde diese nach Ablauf der Cache-Lebensdauer nicht modifiziert, kann der Browser die gecachten Daten auch weiterhin verwenden.

Auch Google empfiehlt die Aktivierung des Browser-Caching. Statische Dateien sollten eine Cache-Lebensdauer von mindestens einer Woche besitzen, Drittanbieter-Ressourcen (Werbeanzeigen, Widgets) von mindestens einen Tag. Weitere Informationen dazu bieten diese Google Hilfeseiten.

Browser Caching durch CMS Plugins

Wer technisch wenig versiert ist, kann auch mit einem CMS Plugin oder einer Extension effektive PageSpeed Optimierungen erzielen. Für WordPress sind besonders populär: W3 Total Cache und Cachify. Einmal installiert lassen sich relativ bequem mächtige PageSpeed-Optimierung bewerkstelligen.

Auch für die mächtige E-Commerce Lösung Magento gibt es Erweiterungen gegen ein Entgelt zur Optimierung der Ladezeit. Dabei muss man selbst entscheiden, ob man in der .htaccess-Datei selbstständig feinjustieren oder das Geld in eine Fertiglösung investieren möchte. Erwähnenswert sind Cache – Full Page Cache und Full Page Cache.

(4) HTML Quellcode reduzieren

Eine effektive Maßnahme zur PageSpeed Optimierung ist die Reduzierung des Quellcodes durch Auslagern von CSS Styles und JavaScript. Inline Styles sollten im Quellcode vermieden und besser in einer CSS Datei zusammengefasst werden. Das wirkt sich positiv auf die Ladezeit aus. Wichtig dabei ist, sich auf ein notwendiges Maß zu beschränken. Es ist also sinnvoll alle CSS Styles in eine Datei auszulagern, weil dadurch die Anzahl der HTTP-Requests reduziert wird. Je weniger HTTP-Requests erforderlich sind, desto größer die Auswirkung auf den PageSpeed.

(5) CSS und JavaScript komprimieren

Der Effekt zur Verbesserung des PageSpeed ist noch größer, wenn die ausgelagerten Styles und Scripte komprimiert werden. Inzwischen beherrschen viele HTML Editoren die Kompression von Dateien aber auch online stehen eine Vielzahl kostenloser Tools zur Verfügung, wie beispielsweise für CSS http://csscompressor.com/ und für JavaScript http://javascript-compressor.com/.

(6) Bilder und Grafiken optimieren

Bilder und Grafiken sollten komprimiert werden, um die Dateigröße und folglich die Ladezeit zu verringern. Die Dateitypen JPG/JPEG und PNG sind universell einsetzbar. Zur Komprimierung empfehle ich den kostenlosen Dienst TinyPNG bzw. TinyJPG.

Effektive Bilder-Kompression // tinyPNG
Effektive Bilder-Kompression // tinyPNG

(7) CSS-Sprites verwenden

Als CSS-Sprites bezeichnet man eine Grafikdatei, die viele einzelne Symbole, Icons, Bilder und Grafiken enthält. CSS-Sprites sind Teil der PageSpeed Optimierung, da die Anzahl von HTTP-Requests drastisch reduziert werden kann. Durch die CSS Eigenschaften background-position, width und height werden Spites (Bildausschnitte) der Gesamtdatei ausgewählt, die auf einer Website im Browser dargestellt werden. CSS-Sprites werden bereits seit 2004 verwendet.

Besonders empfehlenswert ist die Verwendung von CSS-Sprites zur Darstellung von grafischen Elementen die zum Seitenaufbau statischer Template-Elemente benötigt werden, ebenso für Icons und Symbole. Beispiele für CSS-Sprites

(8) Bildsprache fürs Web optimieren

Nicht alle Bilder und Grafiken sind für CSS-Sprites geeignet. Content-Images oder Produktbilder werden sehr oft hochauflösend bereitgestellt. Nutzer mit Mobilgeräten benötigen derart große Bilder nicht, weil das Bild vom Endgerät entsprechend des Displays kleiner skaliert wird. Trotzdem wird das große Bild geladen und das wirkt sich negativ auf den PageSpeed aus. Ich empfehle die Bilder im Content-Bereich auch nur in der Größe auf den Server zu laden, wie sie maximal (Desktop-PC) dargestellt werden. Wird ein Bild auf der Frontpage zum Beispiel auf 400 x 400px skaliert, wäre es nutzlos, es größer hochzuladen.

Weiterführende SEO-Tipps: XXL Praxisguide zur Google Bilder Optimierung

(9) Vollständige Größenangaben für Bilder nutzern

Wenn jedes Bildelement die Größenangaben „width“ und „height“ erhalten, können Texte, Tabellen, Listen, etc. schneller geladen werden. Der Browser reserviert den Platz des Bildes und lädt das Bild nach. Das verbessert den vom Nutzer „gefühlten PageSpeed“. Deshalb empfehle ich die Darstellungsgröße im Quellcode für jedes Bild zu hinterlegen.

(10) Wichtige Inhalte zuerst laden

Um die Nutzerzufriedenheit beim Laden einer Webseite zu erhöhen, empfehle ich relevante Inhalte als Erstes zu laden. Alles was zum „Aufhübschen“ dient, sollte im Quellcode weit unten (über dem „</body>“) integriert werden. Dadurch können Nutzer die Seiteninhalte bereits konsumieren, während stylistische Elemente und Zusatzfunktionen geladen werden.

Schlussbemerkung

Der PageSpeed einer Website wird immer wichtiger – nicht nur in der Suchmaschinenoptimierung. Die Akzeptanz und steigende Nutzung des Internets im Alltag ist inzwischen allgegenwärtig – auf der Couch, beim Kochen, während sportlicher Aktivitäten, in Bus oder Bahn, usw. Eine Website sollte immer gut nutzbar sein und dabei spielt der PageSpeed eine entscheidende Rolle. Höchste Zeit also, um die eigene Website zu prüfen und zu optimieren.

  Jens Fröhlich   Gepostet in: Technisches SEO   Schlagwörter: , ,  

Kommentare(9)

  • Guntah
    12. Dezember 2014, 10:46  Antworten

    Sehr schöner Artikel. Richtig gut. Chapeau!

  • 12. Dezember 2014, 11:18  Antworten

    Tolle Zusammenfassung des Themas. Wir benutzen genau dieselben Techniken und Tools. Hier noch zwei Tipps:

    Google PageSpeed Insights
    „(…) wobei zur Erreichung sehr viele Faktoren perfekt feinjustiert sein müssen.“

    Um welche Faktoren es sich handelt und an welchen Schrauben gedreht werden muss, erfährt man ausführlich auf http.gtmetrix.com. Zusätzlich steht dort noch eine Timeline zur Verfügung – schön zum Verfolgen wie sich eine Site durch Optimierungs-Methoden entwickelt hat. Praktisch: parallel dazu gibt’s auch Infos von Yahoo’s „YSlow“.

    Und hier noch ein Trick, für den ultimativen Boost: Benutzt man jQuery, kann man das nachrangige (deferred) Laden von unwichtigen Inhalten an ein User-Event binden, wie hier z. B. an das Ereignis „mousemove“ – „one“ sorgt dafür, dass diese Function nur einmal ausgeführt wird:

    $(document).one("mousemove", ( function() {
    // doSomething;
    }));

    Auf diese Art läßt sich gerade bei den beliebten Diashows oder Slidern (wo der Großteil der Bilder beim Start unsichtbar im Off liegt) eine Menge Ladezeit einsparen.

    Frank Hübner
    Senior Programmer
    http://www.binary-garden.com

    • Jens Fröhlich
      12. Dezember 2014, 11:23

      Hallo Frank,

      besten Dank für Deine beiden Tipps!

      VG Jens

  • 15. Dezember 2014, 16:19  Antworten

    Wirklich super geschrieben! Kam von http://www.seo.at hierher. Ihr seid beide Spitze!

    Danke!

  • 15. Dezember 2014, 16:26  Antworten

    Hallo und danke für die gesammelten Tipps. Ich hatte fast alle schon mal separat gefunden, aber hier gibt es sie nochmal gebündelt und gut dokumentiert.
    Für meinen WP-Blog nutze ich mittlerweile das Plugin WP Rocket. Das macht für mich genau die Änderungen, die ich manuell durchführen musste.
    Viele Grüße,
    David Goebel

  • 4. Oktober 2016, 23:17  Antworten

    Vielen Dank für die Tipps. Jetzt bin ich im „grünen Bereich“ bei Google Page speed…
    Danke Euch, sehr hilfreich !!

    • Jens Fröhlich
      5. Oktober 2016, 11:48

      Hallo Ingolf,

      es freut mich das Dir mein Artikel geholfen hat und ich wünsche Dir maximale Erfolge. Schau gern regelmäßig vorbei, bestimmt findest Du weitere hilfreiche Anregungen im SEO Blog. VG Jens

Komentar verfassen