PageSpeed Optimierung für rasend schnelle Ladezeiten

  14. Oktober 2018

Eine PageSpeed Optimierung ist für Besucher und Google gleichermaßen wichtig. Denn der Wandel zur mobilen Suche erfordert schnelle Ladezeiten. In diesem SEO-Beitrag stelle ich hilfreiche Tools zur PageSpeed-Analyse und zehn garantiert wirksame Optimierungstipps für schnellere Ladezeiten vor.

PageSpeed Optimierung - Titelbild

Updates & News

06 Juli 2018

Wie bereits hier angekündigt, ist PageSpeed nun ein Rankingsignal in der mobilen Google Suche. Wer in den mobilen Top-5 Suchergebnissen gut ranken möchte, braucht schnelle Ladezeiten – denn Statistiken zeigen, dass auf den ersten organischen Plätzen der mobilen Google-Suche vor allem Seiten mit schnellen Ladezeiten zu finden sind.
30 November 2016

Wie John Mueller von Google auf Twitter bekannt gab, besteht kein Limit für HTTP Requests beim Laden einer Ressource. Allerdings empfiehlt John die Ladezeit – also den PageSpeed – einer Webseite auf 2 und maximal 3 Sekunden zu optimieren – gemessen mit webpagetest.org. (Quelle)
Google von John Mueller empfiehlt den Seiten-Pagespeed auf 2-3 Sekunden zu optimieren - Twitter Feed
22 Februar 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 Wandel zum mobilen Surfverhalten erfordert immer intensivere Optimierungen, um den PageSpeed bzw. die Ladezeit von Webseiten spürbar zu beschleunigen. Schnelle Webseiten erfreuen Nutzer und ermöglichen ein effizienteres Crawling von Suchmaschinen-Bots.

Vorteile schneller Ladezeiten

Bessere UX und geringere Absprungrate

Webseiten mit schnellen Ladezeiten erzeugen ein besseres Nutzererlebnis (UX/ User Experience). Seiten mit hoher UX generieren niedrigere Absprungraten. 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 die UX aus. Auch für Google sind Websites mit schnellen Ladezeiten wichtig, denn sie können effizienter gecrawlt werden.

Höhere Konversionsraten

Für Shop-Betreiber ist der PageSpeed eine wichtige Kennzahl zur Umsatzsteigerung. 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 100 ms längerer PageSpeed zu einer Verringerung der Konversionsrate um ca. 1 Prozent. (Make Data Useful; Greg Linden; Standford Data Mining; 2006)

Bessere Crawlability

Performante Webseiten erzeugen eine bessere Crawlability. Suchmaschinen-Bots können Webseiten effizienter crawlen und das kann zu besseren organischen Keyword-Rankings führen. Die Google Search Console bietet eine Übersicht zu den Crawling-Statistiken für die letzten 90 Tage.

Kostenfreie Tools zur PageSpeed-Prüfung

Es gibt eine Vielzahl kostenfreie PageSpeed-Tools, um die Ladezeiten 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

WebPagetest ist mein Favorit unter den kostenfreien PageSpeed-Tools. Eine Vielzahl von Einstellungen stehen zur Verfügung. Auch Benchmarks mehrerer URLs sind möglich. Trotz das Webpagetest kostenfrei ist, handelt es sich um ein hochwertiges Analyse-Werkzeug. Auch Google empfiehlt Webpagetest.org – siehe hier.

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.

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.


Pingdom Website Speed Test

Meine dritte Tool-Empfehlung zur PageSpeed-Analyse ist Pingdom. Der schwedische 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 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

Meine nächste Empfehlung ist GTMetrix. Das Tool ermöglicht vielseitige Tests. Ist eine URL eingegeben, können optional der Server-Standort, der Web-Browser, die Verbindung und weitere individuelle Einstellungen getroffen werden. Hilfreich finde ich die HTTP Authentifizierung, die genutzt werden kann, wenn die URL eine Authentifizierung fordert.

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 Empfehlungen (ä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

Image Analysis Tool

Sollen die Bilder einer Seite analysiert werden, ist das Image Analysis Tool zu empfehlen. Nach Angabe einer URL analysiert die Software den Optimierungsgrad der Bild-Dateien, die im HTML Quellcode der Seite verlinkt sind.

Image Analysis Tool
Image Analysis Tool

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 nutzen

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

PageSpeed 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.

  14. Oktober 2018   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!

  • David Goebel
    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