In einem Artikel, der hier auf WWW Coding erschienen ist, habe ich bereits einige Tricks genannt, wie Du die Ausführung von PHP beschleunigen kannst. Auch das Testen der Website-Geschwindigkeit wurde in einem Artikel behandelt.

Auf dieser Seite gebe Ich Dir 11 Tipps, wie Du den Seitenaufbau deiner Webseite beschleunigen kannst, sodass deine Website schneller lädt.

1. JavaScript asynchron laden

Im Normalfall stoppt der HTML-Parser des Browsers seine Arbeit sobald er auf ein JavaScript stößt, was er entweder zuerst von der angegebenen Quelle lädt oder direkt ausführt. Erst anschließend wird mit dem Parsing fortgefahren.

Häufig ist es allerdings so, dass das JavaScript nicht unmittelbar mit dem Laden der Seite ausgeführt werden muss. Wenn Du beispielsweise das Verhalten deiner Besucher mit einer Software wie Piwik aufzeichnest, reicht es vollkommen aus, wenn die Seite zunächst komplett geladen wird und dann das Piwik-Skript ausgeführt wird.

Für diesen Zweck gibt es das recht neue async-Attribut und das kann so eingesetzt werden:

<script src="url_zum_script.js" async></script>

async muss also nur in den script-Tag eingefügt werden und schon kann der Seitenaufbau, insbesondere bei der Einbindung von JavaScript-Bibliotheken wie jQuery, spürbar beschleunigt werden.

2. CSS Image Sprites verwenden

CSS Image Sprites sind eine sehr hilfreiche Erfindung. Mit Hilfe von CSS kannst Du nur einzelne Teile eines Bildes anzeigen lassen. Der Benutzer bekommt damit den Eindruck, es handele sich um ein Bild, dabei enhält diese eine Bild-Datei gleich mehrere Bilder, die über- und nebeneinander angeordnet sind.

Um einen solchen Bildausschnitt anzuzeigen, kannst Du einem Element folgenden Hintergrund zuweisen:

background:url('sprite_grafik.png') no-repeat -360px 300px;
width:60px;
height:60px;

Entscheidend sind dabei die beiden Positionsangaben. Mit ihnen legst Du fest, wo der Startpunkt für den Bildausschnitt gesetzt werden soll. Die Größe ergibt sich dann aus den width– und height-Attributen.

Achtung: Es macht nur Sinn, Image-Sprites zu verwenden, wenn in einer Datei viele Bilder gespeichert werden, die auch mit einem Seitenaufruf geladen werden. Denn je mehr Bilder enthalten sind, die eigentlich gar nicht benötigt werden, desto länger muss auch die eine Datei dann noch geladen werden.

3. CSS & JavaScript komprimieren

Ein beliebter und recht wirksamer Tipp, der auf der einfachen Formel basiert: weniger Daten = kürzere Ladezeit.

Insbesondere CSS- und JavaScript-Dateien enthalten oft viele Leerzeichen und Zeilenumbrüche, die nur für die Lesbarkeit benötigt werden. Daher bietet es sich insbesondere bei größeren Dateien an, eine gut lesbare Version lokal zu speichern und eine komprimierte Version anschließend hochzuladen.

Eine guter Kompromiss zwischen Lesbarkeit und Dateigröße lässt sich mit diesem Online-Tool für die CSS-Optimierung erzielen. Ein andere Seite bietet ein ebensolches Tool für JavaScript-Dateien an.

4. Die Größe eines Bildes angeben

Wenn Du ein Bild, egal ob als background via CSS oder als img-Element einbindest, solltest Du immer die Größe mit Hilfe von width oder height angeben.

Das hat einen ganz einfachen Grund. Solange der Browser beziehungsweise Parser die Größe des Bildes nicht kennt, kann er die Seite eventuell nicht korrekt darstellen, weil es ja die nebenstehenden Elemente beeinflussen könnte. Es muss also erst das Bild geladen werden, um die Größe des Elements in Erfahrung zu bringen. Das kann den Seitenaufbau bei vielen Bildern erheblich verlangsamen.

5. Bilder in der passenden Größe ausliefern

Auch der nächste und fünfte Tipp befasst sich mit dem Einsatz von Bildern. Du kannst nämlich mittels width– und height-Angaben den Browser dazu auffordern, eine eigentlich größere Bilddatei zu skalieren, also zu verkleinern.

Der Browser muss aber die komplette Bilddatei in seiner ganzen Größe vom Server laden. Du solltest nach Möglichkeit das gleiche Bild in mehreren Größen vorhalten, falls es denn benötigt wird und die width– und height-Angaben sollten immer der tatsächlichen Größe eines Bildes entsprechen. So muss kein unnötiger Ballast angefordert und geladen werden.

Das gilt es natürlich auch bei der Wahl des Bild-Formates zu beachten. Je nach Anforderung können auch einfache und platzsparende GIF-Bilder ausreichen, für anspruchsvollere Grafiken eignet sich PNG in der Regel am besten und bei Fotografien sollte auf JPG zurückgegriffen werden.

6. Browser-Caching & Komprimierung

Wenn Du Apache nutzt kannst Du ganz einfach mittels .htaccess das Browser-Caching aktivieren (siehe 9. Beispiel auf der Seite). So wird der Browser angewiesen, Inhalte wie Grafiken oder JavaScript-Dateien nach dem ersten Aufruf für einige Zeit zu speichern.

Das gilt natürlich nur für Besucher, die Deine Seite bereits einmal besucht haben. Außerdem werden eventuelle Änderungen an Dateien oder Grafiken nicht direkt übernommen, dem Benutzer könnten also unter Umständen für einige Zeit alte Inhalte angezeigt werden.

Neben dem Caching gibt es auch die Möglichkeit, die Inhalte komprimiert an den Nutzer zu senden. Wie Du das auf deinem Server realisierst, wird in diesem Deflate-Tutorial beschrieben. Bei aktivierter Komprimierung verringerst sich die Datenmenge, die an den Nutzern gesendet wird, sodass die Inhalte häufig schneller geladen werden können.

7. Teile auf eine andere Domain auslagern

Die Browser limitieren häufig die Anzahl der parallelen Anfragen pro Domain. Wenn eine Seite also 50 zu ladende Dateien enthält, werden eventuell nur 4 davon auf einmal geladen, wenn sie über die gleiche Domain zu erreichen sind.

Diese Begrenzung gilt häufig jedoch nur für eine Domain. Es macht also Sinn statische Ressourcen, unter anderem JavaScript-Dateien, Bilder und PDF-Dateien, auf eine Subdomain auszulagern, etwa: res.example.com

Diese statischen Dateien können aber auch auf einen anderen Server ausgelagert werden. Dafür gibt es sogenannte CDN (Content Delivery Networks), die sich darauf spezialisiert haben recht günstig statische Dateien auszuliefern und das möglichst schnell. Da Anbieter wie Amazon Server rund um den Globus besitzen, befinden sich die Dateien häufig in Nutzer-Nähe und können schneller und parallel (aufgrund der Browser-Beschränkung) geladen werden.

8. Möglichst wenige Dateien

Je weniger Requests und Dateien, die geladen werden müssen, desto besser. Denn mit jedem zusätzlichen Request, der gestellt werden muss nimmt der Seitenaufbau mehr Zeit in Anspruch und die Seite wird langsamer.

Das gilt sowohl für Bilder (siehe Tipp 4: Image Sprites) als auch für CSS- und JavaScript-Dateien, die, wenn möglich und sinnvoll zusammengefasst werden sollten.

9. Ordnung im Code

Schon im head-Bereich solltest Du als link-Element zunächst alle CSS-Elemente angeben und anschließend die JavaScript-Elemente, die am besten asynchron geladen werden. So kann der Parser den Code schneller verarbeiten. Hier ein Beispiel:

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<script async type="text/javascript" src="script.js"></script>

Am besten ist es natürlich, wenn du überhaupt nur so wenige Dateien dieser Art benötigst, dass diese Trennung gar nicht notwendig ist, weil es ohnehin nur eine Datei jeder Art (CSS/JS) gibt.

Außerdem solltest Du nur dann, wenn es sich nicht vermeiden lässt, extra CSS-Angaben direkt für ein Element mittels style-Attribut machen. Also etwa so:

<img src="/pfad/zur/grafik.png" style="float:left;" />

Besser eine Klasse verwenden, die dann die gewünschte CSS-Eigenschaft enhält:

<img src="/pfad/zur/grafik.png" class="img_left" />

10. Weiterleitung und 404-Fehler vermeiden

Jede Weiterleitung benötigt extra Zeit. Denn der PC des Benutzers muss sich neu mit dem Server verbinden und mit jeder Weiterleitung erneut Daten abfragen.

Beliebt sind solche Weiterleitungen etwa für die Startseite. Wenn jemand also example.com aufruft, aber direkt zu example.com/de weitergeleitet werden soll, mag eine solche Weiterleitung durchaus legitim sein. Wenn Deine eigene Website den Benutzer aber mehr als einmal weiterleitet, solltest Du dich fragen, ob diese hohe Anzahl an Weiterleitungen tatsächlich notwendig ist.

Doch: lieber eine Weiterleitung als eine Fehler-Seite. Das gilt genau so für alle Anfragen. Nach Möglichkeit solltest Du 404-Fehler bei allen Dateien vermeiden, denn diese bedeuten je nach Aufbau Deiner Seite neben einem zusätzlichen und unnötigen Request auch einen Geschwindigkeitsverlust.

Einige Webmaster empfehlen daher in jedem Fall einen FavIcon zu erstellen, weil diese ohnehin von allen Browsern abgefragt wird. Ohne existierendem FavIcon würde also ebenfalls ein 404-Fehler zurückgegeben werden.

11. Server

Je langsamer Dein Server oder Webspace, desto langsamer die Website. Bei einem eigenen Server wird sich die Ursache für Erfahrene vermutlich leicht identifizieren und das Problem beheben lassen, etwa durch die Nutzung einer anderen Server-Software, die Anpassung der Einstellungen oder anderweitige Performance-Optimierungen. Zur Not muss man wohl auf einen leistungsfähigeren Server zurückgreifen.

Was aber ist mit Webspace-Kunden? In so einem Fall ist der Webhoster für ausreichend Geschwindigkeit verantwortlich. Insbesondere bei günstigen Hostern liegen viele Projekte auf einem Server. Hier entscheidet das Schicksal. Liegen viele rechenintensive oder gutbesuchte Projekte auf dem Server, wird dieser länger zur Verarbeitung (bei den Pingdom Tools „Wait“-Status) benötigen. Im Extremfall kann es auch vereinzelt zu Fehlermeldungen kommen.

Dann hilft nur noch der Wechsel auf ein anderes Webspace-Paket, zu einem anderen Hoster oder der Umstieg auf einen eigenen (v-)Server, wenn der Nutzer entsprechende Kenntnisse besitzt. Am besten ist jedoch, vorher mit einem Testaccount die Leistungsfähigkeit des Webspaces zu überprüfen. Dann ist man auch vor Überraschungen gefeilt.

Fazit

Es gibt jede Menge Optimierungspotenzial, was die Performance einer Website angeht. Mit den hier gesammelten 11 Tipps können die meisten Webmaster den Seitenaufbau ihrer Website bereits erheblich beschleunigen.

Diese sind in der Regel nicht allzu aufwändig in der Umsetzung und wer sie beherzigt kann vermutlich auch langfristig profitieren. Nicht nur Google legt in letzter Zeit mehr Wert auf schnelle Websites. Auch bei den Besuchern gilt: eine schnellere Website ist oftmals eine bessere Website.