,Themen Blog2 ,pagespeed so machst du deine website schneller = PageSpeed: So machst du deine Website schneller 

PageSpeed: So machst du deine Website schneller

PageSpeed, ein Thema, welches auf jeden Fall polarisiert. Flattern durch meine Google+ Timeline immer mal wieder Beiträge von Entwicklern, denen es großen Spaß machen muss, Punkt für Punkt auf der Google PageSpeed Tools Skala nach oben zu klettern, so gibt es auch diejenigen, welche die Ladezeiten-Optimierung verachten oder sogar als unnötig abtun.

Achtung! Dieser Artikel stammt vom 3. Juli 2012 und ist möglicherweise in Teilen nicht mehr aktuell. Hier findest Du einen neuen Beitrag zum Thema Pagespeed-Optimierung.

Das eine Optimierung auf geringere Ladezeiten und höhere Ladegeschwindigkeiten gar nicht so schwierig ist und in jedem Fall Sinn macht, möchte ich in diesem heutigen Blogartikel aufzeigen. Dafür habe ich meinen bislang längsten Screencast (45 Minuten) aufgenommen und eine kleine Präsentation erstellt. Dort findet ihr unter anderem 11 recht pragmatische Tricks, um den PageSpeed Score euer Webseiten zu verbessern. Weiter unten im Artikel findet ihr dann auch noch die in der Präsentation erläuterten Maßnahmen zum direkten Copy&Paste :)

11 Tipps für performantere Webseiten

Vorweg natürlich noch die Bitte: Falls etwas unklar ist, ihr Rückfragen habt oder ich im Video etwas falsch erläutert haben sollte, nutzt einfach die Kommentarfunktion unter diesem Blogartikel.

Natürlich möchte ich euch auch die Slides aus der Präsentation nicht vorenthalten:

Vorteile von schnelleren Webseiten

Besseres Nutzererlebnis

Ich finde es immer spannend, mein eigenes Surfverhalten objektiv zu betrachten und dahingehend Rückschlüsse zu ziehen. In einigen Punkten ist dies als Webentwickler wahrscheinlich schwierig bis gar unmöglich; aber ich glaube, wenn mir etwas sauer aufstößt oder ich irgendwo hängen bleibe, dann geht es dem Otto-Normal-Surfer ähnlich. So verhält es sich auch beim Thema PageSpeed: Niemand surft gerne auf langsamen Webseiten!

Schnell geladene Seiten können also durchaus in einem hohen Maße zu einer besseren Nutzererfahrung beitragen. Teilweise spielt die Geschwindigkeit eine ähnlich große Rolle wie das eigentliche Layout der Webseite. Es ist erwiesen, dass eine Verbesserung der Ladezeit zu geringeren Absprungraten führt.

Verstärkt wird dieser Effekt beim Surfen mit mobilen Geräten, wo vor allem in ländlichen Regionen nur schlechte Datenverbindungen (Edge, GPRS, …) verfügbar sind. Dort ist es besonders wichtig, den mobilen Besuchern optimierte Webseiten bereitzustellen, da ein Absprung ansonsten fast vorprogrammiert ist.

Google Ranking-Faktor

Anfang 2012 gab Google bekannt, dass die Ladezeit von Webseiten ab sofort ein offizieller Ranking-Faktor ist. Der PageSpeed kann dementsprechend also dazu beitragen, an welcher Position in den Google SERPs eine Seite auftaucht. Zwar betrifft dies wohl nur ca. einen Prozent der Suchanfragen; aber beim Panda und Penguin-Update war die Zahl ja bekanntlich auch nicht viel höher und die Aufschreie aus der SEO-Szene trotzdem groß. Es kann also durchaus sein, dass PageSpeed in hart umkämpften Märkten ziemlich wichtig geworden ist.

Das die Ladezeit für Google eine Herzensangelegenheit ist, wird an vielen Stellen klar. Da wäre beispielsweise das von Google entwickelte PageSpeed Tool, mit dem sich sich komfortabel eine Geschwindigkeits-Analyse jeglicher URLs durchführen lässt.

Nicht wenige sind auch der Meinung, Google wolle keine schnelleren Seiten für die Besucher, sondern für die eigenen Crawler. Denn ob eine Website nach 0,5 oder erst nach 3 Sekunden gecrawled ist, stellt bei mehreren Milliarden Seiten natürlich auch einen großen wirtschaftlichen Faktor dar.

Wirtschaftlichkeit

Schnelle Webseiten tuen also Google und dem Besucher etwas Gutes. Nein – halt – auch das eigene Portmonnaie profitiert davon!

Eine von Amazon in Auftrag gegebene Studie besagt beispielsweise folgendes:

Often quoted research on this subject includes an Amazon study that showed a 1% decrease in sales for every 0.1s decrease in response times.
(Kohavi and Longbotham 2007)

Diese Zahlen muss man sich erst einmal auf der Zunge zergehen lassen: Lädt der eigene Online-Shop eine einzige Sekunde länger, könnte man ca. 10% seines Umsatzes verlieren – Wahnsinn!

So machst du deine Website schneller

An dieser Stelle möchte ich die im Video gezeigten Maßnahmen noch kurz erläutern und entsprechende Quellcode-Bausteine zum Copy&Paste bereitstellen.

1. http-Request reduzieren

Die Reduzierung von http-Request ist eines der wichtigsten Werkzeuge bei der Performance-Optimierung von Webseiten. Da das Hypertext Transfer Protocol (HTTP) keine dauerhafte Verbindung ermöglicht, muss der Server für jede Datei (Bild, Javascript, CSS, …) immer wieder erneut angefunkt werden. Dabei werden natürlich auch nicht benötigte http-header wie Cookie übertragen.

Der erste Schritt bei der Reduzierung von http-Request ist es, herauszufinden, welche Dateien überhaupt geladen werden. Im Google Chrome beispielsweise machst du dazu einen Rechtsklick auf eine freie Stelle und klickst auf „Element untersuchen“. Anschließend wählst du im obigen Reiter „Network“ aus und aktualisiert danach die Webseite.

Interessant: HTTP-Request auf google.de – viele Inhalte werden per XHR nachgeladen

2. Javascript und CSS auslagern

Durch das Auslagern von Javascript- und CSS-Dateien macht man diese cachebar. So müssen sie beim nächsten Seitenaufruf nicht erneut geladen werden.


wird zu

Anmerkung: Auf sogenannten Single Landing Pages bietet es sich wiederum an, sämtliches CSS und Scripts im HTML zu platzieren, um sich zusätzliche http-Request zu sparen.

3. Javascript und CSS komprimieren

Komprimierte CSS- und Javascript-Dateien sind von der Dateigröße her meist wesentlich kompakter, da Kommentare oder nicht benötige Leerzeichen entfernt werden.


wird zu

Es gibt übrigens sehr viele praktische Online-Tools zum Komprimieren von Javascript- oder CSS-Dateien.

4. Javascript erst nach DOM parsen

Wird viel Javascript vor dem eigentlichen Inhalt der Webseite (<body></body>) geladen, kann dies den Seitenaufbau verzögern, da der Browser erst auf die fertig geladenen Javascript-Dateien warten muss.


wird zu

 5. Browser-Caching nutzen

Der Server kann dem Browser übermitteln, wann eine Datei das letzte Mal verändert wurde oder wann sie wieder aus dem Cache entfernt werden soll.

Caching per .htaccess aktivieren

Mehr Informationen zu mod_expires. 

Caching per PHP

Google empfiehlt übrigens, Bilder mindestens eine Woche im Cache zu belassen.

6. CSS Sprites nutzen

Die Idee hinter CSS Sprites ist es, mehrere Bilder oder Icons zu einer einzigen Grafik zu kombinieren, um http-Request zu sparen. Zum Thema Sprites habe ich bereits einen gesonderten Artikel geschrieben, in dem man sich weiter informieren kann.

7. Skalierte Bilder bereitstellen

Bilder sollten immer in dem Format auf dem Server liegen, in dem sie später auch wirklich ausgegeben werden. Es ist fatal, ein 800×600 Pixel großes Bild über den Browser als 200 Pixel Thumbnail auszugeben, da trotz Breitenangabe das Orginalbild (welches ja wesentlich größer ist) vom Server angefordert werden muss.

Außerdem sollte man beachten, wenn möglich immer die Attribute width und height anzugeben. Ansonsten kann der Browser den Platz für das Bild noch nicht reservieren und muss nach dem Laden des Bildes die Seite neu rendern.

8. Bilder optimieren

Abspeichern ist nicht gleich abspeichern – Bilddaten sollten immer für die Verwendung im Web optimiert werden. Dazu zählt beispielsweise die Wahl des korrekten Formates; im Vorfeld kann man fast nie sagen, ob JPG oder PNG besser komprimiert.

Wenn man mit Photoshop arbeitet, sollte man immer den Weg über „Datei“ => „Für Web und Geräte speichern“ gehen, um Bilder ohne unnötige Meta-Informationen abzuspeichern. Dort kann man dann auch direkt Testen, welches Format die kleinere Datei erzeugt.

Zudem gibt es Online-Tools wie jpegmini.com oder tinypng.org, die bereits vorhandene Bilder fast verlustfrei komprimieren können.

9. Ressourcen von Subdomain laden

Um das Browser-Limit von (meistens) 2 bis 4 aktiven Verbindungen gleichzeitig zu umgehen und um bei statischen Ressourcen nicht benötige HTTP-Header (wie z.B. Cookie) nicht extra mitsenden zu müssen, kann man auf Subdomains zugreifen.


wird zu

Google bietet zu diesem Thema einen eigenen Artikel Serve static content from a cookieless domain.

10. Dateien komprimieren

Dateien lassen sich per GZIP oder Apache deflate-Modul komprimieren, um die Dateiübertragung zwischen Browser und Server zu verkleinern.

Innerhalb von PHP-Dateien lässt sich zur GZIP-Komprimierung die Funktion ob_start() im Zusammenspiel mit der Callback-Funktion ob_gzhandler() nutzen:

Das deflate-Modul lässt sich hingegen per .htaccess global für verschiedene Datei-Typen definieren:

Vor allem sehr große CSS- und Javascript-Dateien mit vielen sich wiederholenden Elementen können dadurch deutlich kleiner werden.

11. Hoster wechseln

Gerade bei reinen Webspace-Paketen tummeln sich meist 50 Domains oder mehr auf dem gleichen Server. Häufig entstehen also bereits hier Flaschenhälse, die sich durch einen eigenen Server oder vServer vermeiden lassen. Wer überprüfen möchte, mit wie vielen anderen Domains man sich einen Webspace teilt, kann auf Online-Tools wie beispielsweise my-ip-neighbors.com zurückgreifen.

Aber auch zwischen den einzelnen Anbietern gibt es durchaus große Unterschiede; und das nicht nur in Sachen Support, sondern auch bei der Geschwindigkeit. Gerade im Hinblick auf Amazon Conversion-Studie sollte man sich überlegen, ob man bei einem Billig-Provider nicht am falschen Ende spart.

Ich persönlich bin übrigens mit allen Webseiten vor einiger Zeit zu ALL-INKL.COM umgezogen und fühle mich dort pudelwohl :-)

Fazit: Eine PageSpeed-Optimierung lohnt sich immer!

Es gibt keine Ausreden: Jeder sollte seine Webseite auf eine geringere Ladezeit und höhere Ladegeschwindigkeit optimieren. Damit tut ihr euren Besuchern, Google und im Falle eines Online-Shops auch euer Konversions-Rate etwas Gutes.

Das schöne an der Sache ist ja, dass sich ca. 80% der wichtigsten Maßnahmen in relativ kurzer Zeit und mit wenig Aufwand umsetzen lassen.

Also, worauf wartet ihr? Jeder liebt schnelle Webseiten! :)

 

Bildquelle Thumbnail: https://developers.google.com/speed/pagespeed/