Page Speed – 10 Tipps für schnellere Webseiten

Page Speed – 10 Tipps für schnellere Webseiten

Jeder kennt sicher das Problem mit langsamen Webseiten. Wenn das laden hängen bleibt und man nicht sofort sieht was man gesucht hat, ist man schnell frustriert. Das hat auch Google erkannt und Anfang 2012 bekannt gegeben, dass die Ladezeit einer Webseite ein offizieller Ranking-Faktor ist. Damit kann der Page Speed also direkt die Suchergebnisse beeinflussen.

Das Google sehr viel Wert auf die Geschwindigkeit einer Seite Wert legt, sieht man an den Tools die sie anbieten. Google PageSpeed Insights dient dazu, komfortabel die Ladezeiten einer URL zu kontrollieren und versorgt einen auch gleich mit passenden Tipps zur Verbesserung.

pagespeed

Die eigene Webseite schneller machen

Jetzt aber endlich zu den Tipps. Die folgenden 10 Maßnahmen kannst du ganz einfach selbst durchführen, und gleich mit den Google Tools den Erfolg messen.

1. Reduzieren der http-Requests

Diese Reduktion ist einer der wichtigsten Schritte beim Beschleunigen einer Webseite. Das Hyptertext Transfer Protocol (http) hat keine dauerhafte Verbindung mit dem Server, und muss jede Datei, also Bilder, Javascript, CSS, usw, vom Server abfragen. Da aber das Protokoll nicht beliebig viele Verbindungen zugleich mit dem Server eingehen kann, werden die Daten nacheinander geladen. Und das kann bei großen Daten zu Verzögerungen führen.

Um Herauszufinden, welche Daten überhaupt von der Seite geladen werden, verwende ich am liebsten Google Chrome, und die dort enthaltenen Entwicklertools. Im Reiter „Network“ finden sich alle geladenen Daten einer Seite.

Um diese Requests jetzt zu reduzieren kann man viele der nachfolgenden Tipps verwenden.

2. Javascript und CSS auslagern

Kaum ein Entwickler schreibt Javascript oder CSS Code noch inline, also direkt auf der Seite. Sollte es aber doch einmal jemand tun, ist es besser, diesen Code in eigenen Dateien auszulagern. Dadurch werden diese cachebar und reduzieren die Ladezeit beim nächsten Besuch

3. Javascript und CSS komprimieren

Beim Komprimieren von Javascript und CSS werden unnötige Leerzeichen, Kommentare und Zeilenumbrüche entfernt, was den Code zwar nicht mehr gut lesbar, aber sehr viel kleiner und damit schneller macht.

Das muss man übrigens auch nicht per Hand machen. Entweder die Entwicklungsumgebung unterstützt das bereits, oder man verwendet eines der vielen Online-Tools.

4. Javascript erst nach DOM parsen

Wenn Javascript vor dem eigentlichen Inhalt der Seite geladen wird (also im <head> Bereich), kann der Seitenaufbau verzögert werden, da der Browser darauf wartet, bis alle Scripts eingeladen wurden. Verschiebt man die Einbindung der Javascript-Dateien jedoch zum Ende der Seite (also vor das schließende </body> Tag) kann man dieses Problem aber umgehen.

5. Browser Caching nutzen

Mittels einer .htaccess Datei kann man dem Browser mitteilen, wann Dateien das letzte man geändert wurden, und wie lange Daten im Cache gehalten werden sollen, bevor sie neu heruntergeladen werden. Das wird mittels mod_expires gemacht. Mehr Informationen dazu finden sich hier.

6. CSS Sprites verwenden

CSS Sprites fassen mehrere Bilder oder Icons zu einer großen Grafik zusammen, um http-Requests einzusparen. Sprites sind also eine gute Möglichkeit Tipp 1 umzusetzen.

7. Skalierte Bilder bereitstellen

Bilder sollten in der Theorie immer in der Form am Server liegen, wie sie später ausgegeben werden sollen. Ein Full-HD Bild per Code auf 200 Pixel Breite zu verkleinern führt nämlich nur optisch zu einem kleinen Bild. Der Download bleibt groß. Gerade in Zeiten von responsive Webdesign ist es jedoch ziemlich Schwierig, für jede Auflösung eine passende Bildgröße zur Verfügung zu stellen.

Ich möchte hier nur kurz ein Tool erwähnen, dass ich selbst sehr gerne einsetze. Adaptive Images läuft auf dem Server und generiert aus dem Originalbild die passenden Bildgrößen automatisch.

8. Bilder optimieren

Schon beim Speichern eines Bildes kann man optimieren. Als erstes ist es natürlich wichtig, das passende Format zu wählen. Ob JPG oder PNG besser komprimiert kann man aber nur von Fall zu Fall entscheiden. Außerdem sollte man darauf achten, dass man aus dem Bildbearbeitungsprogramm bereits „für Web“ speichert. Dabei werden unnötige Informationen weggelassen und das Bild ohne Qualitätsverlust komprimiert.

Außerdem gibt es noch einige Onlinetools wie tinypng.com oder jpegmini.com, die fast verlustfrei Bilder noch einmal ein gutes Stück verkleinern.

9. Ressourcen von Subdomains laden

Um das Browser Limit von 2 bis 4 aktiven Verbindungen gleichzeitig zu erhöhen, kann man Daten auf Subdomains auslagern. Ein Aufruf von dort, kann nämlich parallel zu den aktiven Serververbindungen gemacht werden. Zu viele Sollten es aber auch nicht sein, da dann die DNS-Lookups zunehmen und erst wieder kein Erfolg erzielt wird.

10. Dateien komprimieren

Als letzten Punkt gibt es noch die Daten-Komprimierung. Dabei lassen sich Daten per GZIP oder dem Apache deflate Modul komprimieren und so die Geschwindigkeit erhöhen.

Je nachdem welches Modul zur Verfügung steht kann man also in der .htaccess mod_deflate oder mod_gzip laden und damit beliebige Dateitypen komprimieren.

7 thoughts on “Page Speed – 10 Tipps für schnellere Webseiten

  1. Dominik

    Besonders mit dem Komprimieren von JavaScript- und CSS-Dateien habe ich sehr gute Erfahrungen gemacht. Von Caching hingegen halte ich nicht sehr viel, da auf meinem Blog sehr häufig neue Artikel erscheinen und deshalb hier oft Probleme entstehen.

    LG

  2. Andy

    Danke für die sehr hilfreichen Tipps, besonders komprimieren ist sehr gut weil zum einen eine schnellere Übertragung durchgeführt wird und zum anderen weniger Traffic übertragen wird. Gerade bei viel besuchten Seiten sehr hilfreich. Vielen Dank.

  3. Timo

    Sowohl Caching als auch Komprimierung bewirken auf unseren Seiten eine Menge. Es fehlt eventuell der Hinweis, dass das vom Webserver auch unterstützt werden muss.

  4. Ivan

    Danke für die nützlichen Tipps, mache mich gleich auf die Arbeit da meine Website viel zu langsam lädt. Der Revolution slider macht mir Sorgen, mal sehen ob man da was machen kann. Danke!

  5. Möbelmobil

    Vielen Dank für die nützlichen Tipps. Wir machen uns mal an die Arbeit und optimieren alle Bilder. Die großen Dateien verzögern ja die Ladezeit, was wiederum ein wichtiger Rankingfaktor ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.