Optimierung der Ladezeiten (Page Speed, mod_gzip, mod_expires, CSS Sprites, HTTP Requests, …)

Es ist doch immer dasselbe Problem.
Ihr habt eine tolle Seite, die interessante Inhalte bietet.
Doch die Ladezeit eurer Seite vergrault eure Gäste.

In Zeiten von ständig verbesserter Hardware liegen die Probleme immer seltener beim Hoster. Fehlkonfigurationen, fehlende Angaben, schlechter und/oder zu viel Code sind alles Faktoren die eure Ladezeiten beeinflussen.

Wir geben Abhilfe!

Ob Apache Modul, HTTP Header oder nur die Umstrukturierung/Verkleinerung eures Quellcodes:

» In diesem Artikel gebe ich euch einige Tipps zur Optimierung eurer Ladezeiten!

Was ist das „Page Speed“-Tool?

Page Speed nennt sich ein Tool von Google, welches eine Website analysiert und dir zeigt, wie du deinen Code optimierst. Dabei wird jedem Punkt eine Priorität, je nach Größe des Problems, zugewiesen.

Ihr findet das Tool hier!

Ich möchte euch in diesem Artikel einmal einige wichtige Punkte in der Optimierung der Ladezeit einer Webseite näher bringen.

Komprimierung mit gZip – mod_gzip

mod_gzip ist, wie leicht zu erkennen ist, eine Erweiterung für Apache. Diese Erweiterung komprimiert euren Code mit gZip, damit der Server weniger große Pakete senden muss.

Diese werden dann vom Browser des Clienten entpackt. Dies klingt zwar aufwändig, spart aber viel Zeit.

Optimierung mit Googles Apache Modul – mod_pagespeed

Google hat mit mod_pagespeed eine der wichtigsten Erweiterungen für Apache2 geschaffen.
mod_pagespeed komprimiert Teile eures Codes und spielt an der Konfiguration eures Webservers, um diesen zu optimieren.

Das beste Beispiel dafür, dass es wirklich wirkt ist dieses Video von Google: mod_pagespeed improvement for Google AdSense Blog
Weitere Infos dazu bietet euch auch das Video „Ladezeiten-Optimierung von Webseiten“ von Pascal Bajorat.

Lasst eure Dateien länger leben – mod_expires

Der Aufgabe dieser Erweiterung ist, wie bei den meisten Erweiterungen, aus ihrem Namen heraus zu erkennen. mod_expires lässt euch bestimmen wie lange eure Dateien, wie CSS und JavaScript Dateien, gecached werden.

Ein Beispiel für die Nutzung von mod_expires:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 2 houres "
    ExpiresByType text/xml "access plus 2 houres"
    ExpiresByType image/gif "access plus 2 weeks"
    ExpiresByType image/jpg "access plus 2 weeks"
    ExpiresByType image/png "access plus 2 weeks"
</IfModule>

mod_expires überzeugt mit seiner einfachen Syntax.
„access plus X Y“ und schon wird der angegebene Dateityp länger gecached, wobei X eine Zahl und Y beispielsweise „houres“, für Stunden, ist.

Ihr könnt eueren Cache natürlich auch über meta-Daten erweitern.

<meta http-equiv="cache-control" content="max-age=60">

Ein wichtiger Hinweis noch: Schaut vor der Nutzung eines CMS, ob dieses eine Cache benutzt.

Viele Systeme wie Typo3, WordPress, Joomla!, o.ä. nutzen diese zwar, aber umso mehr verachten diese.

Ein CMS interner Cache schafft zusätzliche Geschwindigkeit.

CSS Sprites – Mehrere Bilder, eine Datei

Viele von euch werden schon von ihnen gehört haben: CSS Sprites.
CSS Sprites sind mehrere Bilder in einem.

Dabei wird dieses nur über CSS verschoben, sodass man das gewünschte Bild sieht.
Der Vorteil daran ist der, dass so der Browser weniger Bilder herunterladen muss und sich so die Ladezeit verringert.

Komprimierung – Eine umstrittene Lösung

Viele streiten sich um das Thema „Komprimierung“, obwohl diese nicht mehr wegzudenken ist.

So werden Beispielsweise Javascript Bibliotheken im Allgemeinen immer komprimiert.
Aber was meine ich mit komprimieren?

Beim Komprimieren von Javascript, CSS oder sogar HTML werden unnötige Leerzeichen, Kommentare, Leerzeilen, Quotes und sonstige unnötige Zeichen entfernt, was die Größe des Codes enorm senken kann.
Da der Code dadurch aber fast komplett unlesbar wird ist diese Methode sehr umstritten.

Einige gute Seiten für sowas sind:

• HTMLCompressor.com
• CSSCompressor.com
• JavascriptCompressor.com

Zwar kann man PHP auch komprimieren, aber dies empfehle ich nicht, da man PHP Code öfters Mal umschreiben muss und immer die Datei neu komprimieren muss.

Geiz ist Geil – HTTP Requests

Spart mit HTTP-Requests.
HTTP-Requests sind alles Sachen wie der Aufruf von Javascript oder CSS Dateien oder das Nachladen mit Ajax.
Zu viele dieser HTTP-Requests brauchen viel Zeit.

Ich möchte dabei eine wichtige Sache hervorheben, die viele Webmaster übersehen oder sogar ignorieren: JS Librarys, wie jQuery.

Viele CMS haben Erweiterungen die jQuery oder ähnliche JS Frameworks benötigen und am Ende kommt es oft vor, dass eine Bibliothek mehr als nur 1 Mal geladen wird.
Dies erhöht nicht nur eure Ladezeit, sondern kann auch dafür sorgen, dass eure Skripte nicht mehr laufen.

Versucht dies zu verhindern und jedes Framework immer nur ein Mal, unzwar in der neusten Version, zu laden.

Keep Alive – Haltet eure Verbindungen am Leben

Mit dem HTTP Header „Connection“ können sie ihren Usern spürbar Ladezeit ersparen.
Über den genannten Header kann die Verbindung des Clienten zum Server aufrecht erhalten werden.

Dadurch muss sich der Client nicht immer neu mit dem Server verbinden und es wird an Zeit gespart.

Der Header sieht wie folgt aus:

Connection: Keep-Alive

In der Praxis ( PHP ) sähe dies so aus:

header('Connection: Keep-Alive');

Und schon ist eure Verbindung „persistent“.
Nutzt diese einfache Angabe in eurem Header um euren Usern einiges an Ladezeit zu ersparen.

Wann und wo? – Skripte parsen

Eine gute Möglichkeit die Ladezeit einer Seite zu reduzieren ist es, Skripte später zu parsen.
Das bedeutet man setzt den Code für die Skripte weiter ans Ende der Datei.

Der Vorteil besteht darin, dass so der HTML Code direkt geparst werden kann und nicht immer erst auf die Skripte gewartet wird, bis mit dem DOM weiter gemacht wird.

„Aber führt dies nicht zu Verspätungen im Skript?“
Nur manchmal. Frameworks wie jQuery besitzen Methoden um Code erst auszuführen, wenn das DOM fertig geparst wurde.
Das sähe dann etwa so aus:

jQuery(document).ready(function() {
// Hier dein Code...
});

Bei dieser Praxis ist es also egal wo und wann ihr euren Code ladet, da dieser sowieso erst aufgeführt wird, wenn alles fertig geladen wurde.
Macht euch bei solchem Code also keine Gedanken und verschiebt ihn einfach nach unten.

Anmerkung: Neben einem simplen jQuery(document).ready() existiert auch noch ein jQuery(window).load(), welches dann ausgeführt wird, wenn alles, einschließlich Bilder, geladen wurde.
In anderen Frameworks wie ExtJS, Prototype, … sieht der Aufruf dieser Methoden natürlich anders aus.

Zum Beispiel bietet jQuery eine Methode namens „getScript“, welche ein Skript nachlädt. Dadurch können bestimmte Skripte später geladen werden, um am Anfang Zeit zu sparen.

Ich habe euch einen kleinen Einblick in das gegeben, was euch Googles Page Speed über eure Seite sagen wird. Jedem von euch wird empfohlen Page Speed zu nutzen, um eure Seite zu optimieren.

Solltet ihr Fragen oder Probleme haben, so könnt ihr euch gerne an mich wenden.
Ich werde euren Fragen dann gerne nachgehen.

Vielen Dank fürs lesen.
Wir freuen uns natürlich über alle eurer Kommentare.

Bis dahin,
mit freundlichen Grüßen,
Justin Nuß