Sie sind hier
E-Book

Pagespeed Optimierung

Schritt für Schritt zur schnelleren Website

AutorGregor Meier
VerlagCarl Hanser Fachbuchverlag
Erscheinungsjahr2016
Seitenanzahl176 Seiten
ISBN9783446450899
FormatePUB
KopierschutzWasserzeichen
GerätePC/MAC/eReader/Tablet
Preis15,99 EUR
Geschwindigkeit ist ein wichtiger Faktor für den Erfolg Ihrer Website oder Ihres Blogs. Sowohl für den Besucher, der auf den Seitenaufbau nicht lange warten will, als auch für das Ranking bei Google spielt Geschwindigkeit eine Rolle.
Praktisch und verständlich zeigt Ihnen dieses Buch, mit welchen Techniken Sie die Performance Ihrer Site selbst optimieren können, und zwar ohne Programmierkenntnisse. Beispiele und Expertentipps helfen Ihnen bei der Umsetzung.
Aus dem Inhalt:
Wie funktioniert eine Webseite // Werkzeuge für die Pagespeed-Optimierung // Vorbereitung
Bilder optimieren // CSS optimieren // JavaScript optimieren // HTML optimieren // Schriftarten optimieren // Komprimieren // Rendering (Aufbau der Seite im Browser) // Zwischenspeichern (Cache) // Webserver optimieren // HTTPS-Seiten Ladezeit optimieren // Responsive Design

Gregor Meier ist bei einer Schweizer SEO-Agentur als Projektleiter für Suchmaschinenoptimierung tätig. Zuvor absolvierte er an der Hochschule Rapperswil ein berufsbegleitendes Studium mit dem Thema 'Human Computer Inter-action Design'

Kaufen Sie hier:

Horizontale Tabs

Leseprobe
3Werkzeuge 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.1Google 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.

Bild 3.1 Eine Webseite mit einer Google PageSpeed Insights-Bewertung von 100/100

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.2WebPageTest

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.

Bild 3.2 Analyse der effektiven Ladezeit einer Webseite mit webpagetest.org

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.3Test 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.

Bild 3.3 Ping einer Webseite, um die Antwortzeit des Servers zu überprüfen

3.4Welche 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.

Hinweis:

Sie sollten bei webpagetest.org den Serverstandort möglichst nahe bei Ihrem Webserver wählen, damit die Resultate korrekt sind. Befindet sich Ihr Server in Übersee, sollten Sie einmal die Ladezeit vor Ort und mit einem Standort in Europa vergleichen.

3.5Mit 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...

Blick ins Buch

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

FESTIVAL Christmas

FESTIVAL Christmas

Fachzeitschriften für Weihnachtsartikel, Geschenke, Floristik, Papeterie und vieles mehr! FESTIVAL Christmas: Die erste und einzige internationale Weihnachts-Fachzeitschrift seit 1994 auf dem ...

Ärzte Zeitung

Ärzte Zeitung

Zielgruppe:  Niedergelassene Allgemeinmediziner, Praktiker und Internisten. Charakteristik:  Die Ärzte Zeitung liefert 3 x pro Woche bundesweit an niedergelassene Mediziner ...

BMW Magazin

BMW Magazin

Unter dem Motto „DRIVEN" steht das BMW Magazin für Antrieb, Leidenschaft und Energie − und die Haltung, im Leben niemals stehen zu bleiben.Das Kundenmagazin der BMW AG inszeniert die neuesten ...

Deutsche Tennis Zeitung

Deutsche Tennis Zeitung

Die DTZ – Deutsche Tennis Zeitung bietet Informationen aus allen Bereichen der deutschen Tennisszene –sie präsentiert sportliche Highlights, analysiert Entwicklungen und erläutert ...

DHS

DHS

Die Flugzeuge der NVA Neben unser F-40 Reihe, soll mit der DHS die Geschichte der "anderen" deutschen Luftwaffe, den Luftstreitkräften der Nationalen Volksarmee (NVA-LSK) der ehemaligen DDR ...

EineWelt

EineWelt

Lebendige Reportagen, spannende Interviews, interessante Meldungen, informative Hintergrundberichte. Lesen Sie in der Zeitschrift „EineWelt“, was Menschen in Mission und Kirche bewegt Man kann ...

elektrobörse handel

elektrobörse handel

elektrobörse handel gibt einen facettenreichen Überblick über den Elektrogerätemarkt: Produktneuheiten und -trends, Branchennachrichten, Interviews, Messeberichte uvm.. In den monatlichen ...