Pagespeed Optimierung - Schritt für Schritt zur schnelleren Website

3	Werkzeuge für die Pagespeed-Optimierung

Um aus unserer Webseite einen Ferrari zu machen, brauchen wir verschiedene Werkzeuge. Die ersten beiden Werkzeuge, die ich Ihnen vorstellen möchte, sind Google PageSpeed Insights und webpagetest.org. Diese Werkzeuge dienen einerseits der Messung der Geschwindigkeit, andererseits geben sie uns Tipps zur Verbesserung und helfen uns, Fehler zu finden.

3.1	Google PageSpeed Insights

http://developers.google.com/speed/pagespeed/insights/

Das kostenlose Tool PageSpeed Insights aus dem Hause Google bewertet neun Kriterien, die für die Ladezeit einer Webseite relevant sind:

• Critical Rendering Path

• Komprimierung

• Bilder (optimiert)

• Antwortzeit des Servers

• CSS

• JavaScript

• Browser-Caching

• Priorisierung sichtbarer Inhalte

• HTML

Sind alle Kriterien positiv, wird die Webseite mit 100 von 100 Punkten bewertet. Je schwerwiegender die Verzögerung bei einem Punkt ist, desto mehr Abzug gibt es in der Gesamtbewertung. Ich möchte darauf hinweisen, dass es unterschiedliche Bewertungen für Mobil und Desktop gibt.

Google gibt zu allen Kriterien, bei denen ein Fehler gefunden wird, eine Empfehlung, wie wir die Fehler beheben können. Leider ist es selbst für Techniker oft nicht ganz klar, was die Fehlermeldungen bedeuten. Sucht man im Internet nach diesen Fehlermeldungen, findet man in verschiedenen Foren Erklärungen für die Ursachen, aber oft keine brauchbaren Schritt-für-Schritt-Lösungen, um den Fehler zu beheben. Darum werden wir auf die einzelnen Punkte der Bewertung in den folgenden Kapiteln ausführlich zu sprechen kommen.

Oft werde ich gefragt, welcher Wert gut ist. Das Tool zeigt ab 85/100 grün an. Natürlich ist das nicht schlecht und eine Webseite mit 85/100 ist wesentlich schneller als viele Webseiten von großen Unternehmen1. Aber würde sich Ferrari mit 85 % zufriedengeben? Ich glaube nicht. Es kann sein, dass auf einer Webseite viele Verbesserungsvorschläge von Google Pagespeed Insights mit vernünftigem wirtschaftlichem Aufwand nicht zu beseitigen ist. Aber das Ziel sollte immer eine Bewertung mit 100/100 sein.

Wenn Sie Ihre Webseite mit PageSpeed Insights analysieren und Handlungsempfehlungen erhalten, finden Sie in diesem Buch die Schritt-für-Schritt-Anleitung, wie Sie diese Handlungsempfehlung umsetzen. Ziel ist die Bewertung Ihrer Webseite mit 100/100.

Das bedeutet nicht, dass Sie die anderen Kapitel ganz aus den Augen lassen sollten. Nur weil Google PageSpeed Insights zu einem Kriterium keine Handlungsempfehlung abgibt, bedeutet das nicht, dass Sie in diesem Punkt nicht doch noch etwas mehr Speed herausholen können.

PageSpeed Insights hat einen Nachteil. Es bewertet eine Webseite nur anhand der erwähnten Merkmale. Sind diese erfüllt, kann eine Webseite eine Bewertung von 100/100 bekommen, selbst wenn sie mehrere Sekunden benötigt, um geladen zu werden.

Darum ist es wichtig zu analysieren, wie lange die tatsächliche Ladezeit einer Webseite und jedes einzelnen Elements ist. Dazu können wir http://www.webpagetest.org nutzen.

3.2	WebPageTest

http://www.webpagetest.org

Das ebenfalls kostenlose Tool WebPageTest misst die effektive Ladezeit einer Webseite. Die Grafik, die wir als Ergebnis erhalten, zeigt sehr detailliert, welche Datei wann geladen wird und wie lange dies dauert.

Jede Zeile, die im Diagramm angezeigt wird, steht für eine einzelne Datei, die vom Webserver an den Browser gesendet wird. Das kann beispielsweise eine HTML-Datei, eine CSS-Datei oder ein Bild sein.

Das Analyseergebnis wird Ihnen in zwei verschiedenen Ansichten präsentiert, in der Waterfall View und Connection View. Beide Ansichten helfen uns herauszufinden, wodurch das Laden einer Webseite verzögert wird.

Waterfall View

Im Waterfall View sehen Sie für jede Datei, die vom Server an den Webbrowser gesendet wird, einen Balken mit mehreren Segmenten. Die Länge des Balkens indiziert, wie lange das Herunterladen dieser Datei dauert. So erkennen wir, wenn Bilder oder CSS-Dateien zu groß sind oder das Laden der Webseite sich aus anderen Gründen verzögert.

Jeder Balken besteht aus bis zu vier Farbsegmenten. Der erste Bereich (auf der Webseite türkisfarben) stellt die Abfrage beim DNS-Server dar. Der Browser muss beim Nameserver die IP-Adresse des Webservers in Erfahrung bringen. Erst dann kann er an diese IP-Adresse die Anfrage (Request) senden.

Danach wird die Verbindung zum eigentlichen Webserver aufgebaut. Wie lange das dauert, sehen Sie im zweiten Segment, „Initial Connection“, auf der Webseite orange dargestellt.

Im dritten, auf der Webseite violett dargestellten Bereich findet der SSL-Handshake (das ist der Prozess zur Herstellung der Verschlüsselung) statt. Das betrifft natürlich nur Webseiten mit HTTPS-Verschlüsselung. Bei unverschlüsselten Dokumenten fehlt dieses Segment in der Analyse.

Der grüne Bereich zeigt, wie lange es dauert, bis das erste Byte der Antwort (Response) angekommen ist. Aus der Länge dieses Bereichs können wir schließen, wie lange der Server benötigt, um die für die Antwort erforderlichen Pakete zusammenzustellen. Gründe für eine langsame Response können eine große Datenmenge oder eine schlechte Serverperformance sein. Meistens liegt es jedoch an der Programmierung der Seite. Mit dem Server-Cache, den wir noch genauer kennenlernen werden, können wir diesen Wert deutlich verbessern.

Im letzten, blauen Bereich sehen Sie die Download-Zeit der jeweiligen Datei. Ist dieser Balken sehr lang, dann ist die Datei entweder sehr groß oder die Internetanbindung des Webservers sehr langsam.

Wird eine ganze Zeile in der Analyse gelb hinterlegt, bedeutet das, dass das Dokument einen HTTP-Statuscode im Bereich von 300 hat. Das kann beispielsweise eine permanente 301- oder temporäre 302-Weiterleitung sein.

Bei rot hinterlegten Zeilen wurde ein Fehler mit einem Statuscode im Bereich von 400 (Client-Fehler) oder 500 (Server Fehler) gemeldet. Dies kann vorkommen, wenn eine eingebundene Datei, z. B. ein Bild, nicht auf dem Server gefunden wurde (Statuscode 404). Derartige Fehler sollten unbedingt behoben werden.

Die Ziele, die wir bei der Pagespeed-Optimierung verfolgen sollten, um eine möglichst schnelle Webseite zu erhalten, sind:

• Die Balken sollten so kurz wie möglich sein.

• Es sollte so wenige Zeilen wie möglich geben.

• Die „Time to first Byte“-Balken sind so kurz wie möglich.

• Der Content Download sollte so kurz wie möglich sein.

Connection View

Ein moderner Browser kann mehrere Verbindungen gleichzeitig nutzen und so mehrere Dateien parallel herunterladen. Aber ein Browser kann auch nicht unbeschränkt Dateien zur selben Zeit herunterladen. In der Connection View sehen Sie, wie viele Verbindungen beim Laden Ihrer Seite benötigt werden. Je nach Browser, den Sie vor der Analyse ausgewählt haben, sind dies unterschiedlich viele Verbindungen. Auch hier sollte das Ziel sein, das möglichst wenige Linien, d. h. Verbindungen angezeigt werden.

3.3	Test der Internetanbindung eines Webservers

Die Internetanbindung des Webservers können Sie mit testen. Öffnen Sie dazu eine Kommandozeile (in Windows mit WINDOWS-TASTE + R und geben dann ein). Geben Sie nun ein. Je kürzer die Antwortzeit, desto besser. Normalerweise sollte diese Zeit deutlich unter 45 ms liegen.

3.4	Welche Ladezeit ist gut?

Wieder stellt sich die Frage, welcher Wert ein guter ist. Wie eingangs erwähnt, hat Amazon herausgefunden, wie viel Geld jede Sekunde Ladezeit kostet. Ursache dafür ist, dass Besucher nach einer Sekunde Wartezeit rapide den Fokus verlieren. Die Gedanken schweifen ab und manche potenziellen Kunden verlassen bereits die Webseite.

Aus diesem Grund sollte eine „normale“ Webseite nicht länger als eine Sekunde laden. In den meisten Fällen ist eine Ladezeit von unter 0,5 Sekunden möglich.

3.5	Mit FTP eine Webseite bearbeiten

Die meisten Webseitenbetreiber haben schon einmal mit einem FTP-Client gearbeitet, um Dateien auf einen Webserver zu laden. Wenn Sie bis jetzt noch nie mit FTP gearbeitet haben, empfehle ich Ihnen den kostenlosen FileZilla FTP-Client.Sie können auch jeden anderen FTP-Client verwenden. Um die Verbindung zu Ihrem Webserver aufzubauen, klicken Sie auf DATEI > SERVER MANAGER. Dort können Sie Ihre Zugangsdaten eingeben und die Verbindung herstellen.

Einige Techniken, die Sie in diesem Buch lernen werden, erfordern den Zugriff mit FTP. Insbesondere werden wir öfter die .htaccess-Datei (eine Datei, in der die wesentlichen Einstellungen für die Webseite hinterlegt sind) benötigen, welche sich...