7 Tipps zum Beschleunigen einer Website

Die Geschwindigkeit einer Website spielt für Google (und damit auch für die Positionierung in Suchergebnissen) eine immer größere Rolle. Ein Indiz für diese Annahme ist etwa auch, dass der Pagespeed einer Seite mittlerweile auch in den Webmastertools von Google angezeigt wird; Dazu ist nicht einmal mehr die Installation des Page Speed Plugins (Firefox und Chrome) notwendig. Hier gibt es nun 7 Tipps zum  Beschleunigen einer Website.

Für Google macht es auch Sinn, schnellere Websites zu belohnen:

• Die Nutzererfahrungen mit schnellen Websites sind immer besser
• Google spart Geld und Ressourcen: Wenn 1 Millionen Websites nur 1 Sekunde schneller sind, dann bedeutet das bei Google für jedes Crawlen eine Ersparnis von etwas mehr als 277 Stunden Rechenzeit (mit den daraus resultierenden Implikationen für das Vorhalten von Serverkapazitäten, Stromersparnis, etc.).

Website-Betreiber sind also angehalten, die Geschwindigkeit ihrer Websites stetig zu verbessern. Um erstens in den Suchergebnissen besser gelistet zu werden und um zweitens Nutzern ein besseres Erlebnis zu garantieren und so Conversions, Besuchszeiten, etc. zu verbessern.

Ich möchte an dieser Stelle 7 (meist) einfache Möglichkeiten vorstellen, die unabhängig vom eingesetzten CMS von allen Website-Betreibern durchgeführt werden können.

Beschleunigen einer Website durch Bilder verkleinern

In der Regel bleiben zwei Grafikformate, die für Bilder auf Websites genutzt werden können: JPEG und PNG; Bei GIF gibt es irgendwelche Rechteinhaber, die eigentlich die Nutzung lizensieren müssten, BMP werden nicht von allen Browsern angezeigt und sind viel zu groß. Das Gleiche gilt auf für TIFFs und Raw-Formate. Nur JPEGs werden von allen Browsern dargestellt und lassen sich vernünftig komprimieren, für PNGs gilt – soweit man PNGs für ältere IEs lesbar macht – Ähnliches.

Doch nicht jede JPEG oder PNG, die ein Grafikprogramm ausspuckt, sind auch für Websites geeignet. Denn: In der Regel sind sie viel zu groß und können noch ordentlich komprimiert werden. Einsparungen von bis zu 80% (Dateigröße) sind durchaus machbar. Daher einige Tipps:

• Auflösung des Bildes an Erfordernisse anpassen: Es macht keinen Sinn, ein Bild mit 1200×800 Pixel zu verwenden, dass dann aber nur mit 600×400 Pixel angezeigt wird. Also: Bilder in die richtige Größe beschneiden.
• EXIF-Daten löschen: Gerade bei echtes Fotos werden von der Kamera viele EXIF-Daten (also Informationen zu Blende, Belichtungszeit, Kamerahersteller, ggf. Ort, etc.) im Bild gespeichert. Diese Informationen braucht man bei der Verwendung auf der eigenen Website also nicht. Also: EXIF-Daten löschen. Dafür gibt es entsprechende Programme, die aber auch obsolet werden, wenn man den folgenden Tipp beachtet:
• Bilder komprimieren: Fotos und Grafiken sind meistens in sehr guten Qualitätsstufen gespeichert. Für Websites kann man aber auch niedrigere Qualitätsstufen verwenden. Die optische Beeinträchtigung (Schlieren bei JPEGs zum Beispiel) wird – sofern die Komprimierung nicht zu klein ist – von Besuchern gar nicht wahrgenommen, die Dateigrößen können manchmal aber halbiert werden.
  Für Mac-Anwender empfehle ich immer das kleine Tool „ImageOptim“ – sowohl Sergej als auch Ralf haben über das Tool schon einmal ausführlich berichtet.
  Für Windows-Nutzer habe ich leider kein Tool zur Hand.
  Die Komprimierung kann allerdings auch im Web gemacht werden: Yahoo! bietet mit Smush.it einen tollen „Bildverbesserer“ im Netz, die Ergebnisse des Tools sind durchaus ordentlich!

Vorteile dieser Lösungen: Sie komprimieren nicht nur das Bild, bzw. die Bildqualität; Nein, auch die EXIF-Daten werden automatisch gelöscht. Mit ein bisschen Arbeit kann man die Bildgrößen im Mittel mindestens um 50% verringern. Mit dem daraus folgenden Boost für die Website!

Beschleunigen einer Website durch HTML und CSS optimieren

Ein Graus bei vielen Websites: Verschachteltes, unnötiges HTML und CSS. Auch ich nehme mich von dieser Kritik nicht aus. Doch auch wenn man den Quelltext der eigenen Website eher selten zu Gesicht bekommt: Vernachlässigen sollte man den nicht. Unnötige Klassen (HTML) oder Deklarationen (CSS) sind vermutlich die häufigsten Probleme.

Zwei Beispiele (in Anlehnung an die von Vladimir, der ähnliche Tipps für WordPress-Nutzer gibt):

Aus einer Deklaration wie:

.text {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.2em;
	font-style: italic;
	color: #000000;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	}

sollte man machen:

.text {
	font: italic 1.2em Verdana, Arial, sans-serif;
	color: #000;
	padding: 10px 20px;
	}

Auch das Zusammenfügen verschiedener Klassen mit den gleichen Inhalten ist enorm wichtig. Aus:

.infobox {
	padding: 10px;
	background-color: #ccc;
	color: #000;
	margin: 10px;
	font-size: 20px;
	}

.socialbox {
	padding: 10px;
	background-color: #ccc;
	color: #000;
	margin: 10px;
	font-size: 20px;
	}

wird dann:

.infobox, .socialbox {
	padding: 10px;
	background-color: #ccc;
	color: #000;
	margin: 10px;
	font-size: 20px;
	}

Übrigens: Um die CSS-Dateien noch ein bisschen mehr zu komprimieren, empfehle ich Sergejs Code-Compressor: Der entfernt unnötige Kommentare und Leerzeichen und komprimiert die Dateigröße von CSS-Dateien (JavaScript geht übrigens auch) schnell mal um bis zu 60%. Vor Einsatz dieses Tools gilt aber: Backup machen! Das Arbeiten in den komprimierten Versionen ist enorm anstrengend!

Beschleunigen einer Website – JavaScript auf dem Prüfstand

JavaScript (JS) ist von den meisten Websites nicht mehr wegzudenken: Schicke Startseitenslider oder elegante Dropdown-Menüs sind nur zwei Fälle, in denen JavaScript zum Einsatz kommt. Aber: JavaScript macht Websites einfach langsamer. Man sollte daher einmal der Frage nachgehen, welche schicken Elemente wirklich benötigt werden, oder worauf man nicht lieber verzichten sollte.

Gibt es JavaScript, auf das man nicht verzichten will oder kann, so sollte man das nach Möglichkeit aber ans Ende einer Seite (bzw. die Verweise auf die externen JS-Dateien) setzen. Grund: JavaScript wird erst dann ausgeführt, wenn die Seite vollständig geladen ist. Nicht nur vom Gefühl wird die Seite dann schneller.

Externe CSS- und JS-Dateien zusammenführen

Aus Gründen der Einfachheit und Übersichtlichkeit werden CSS- und JS-Inhalte oftmals in mehrere unterschiedliche Dateien ausgelagert. So gibt es dann beispielsweise eine style.css, eine shortcodes.css und auch eine layout.css (ähnliche Beispiele sind denkbar). Diese Dateien sollte man nach Möglichkeit in einer Datei zusammenfassen. Der Grund: Browser können vom selben Host gleichzeitig immer nur 5 Dateien laden. Werden diese „Slots“ durch 5 CSS-Dateien „blockiert“ verzögert sich das Laden anderer Elemente zwangsläufig.

Wer auf die Trennung unterschiedlicher CSS-Dateien indes nicht verzichten kann, der sollte die per „link“ aufrufen, nicht per „@import“. „link“ ist einfach performanter.

CSS-Sprites nutzen

Dieser Tipp ist in der Anwendung etwas anstrengender. Vor allem dann, wenn das eigene Website-Design schon steht und nicht geändert werden soll. Denn im Nachhinein, sind CSS-Sprites nicht so einfach umzusetzen.

CSS-Sprites sind Bilddateien, die viele kleinere „Bildchen“ (etwa Icons, Hintergrundgrafiken, etc.) beinhalten. Statt im CSS dann bestimmten Elementen einzelne Grafiken zuzuweisen, wird die Sprite-Datei zugewiesen und der Ausschnitt per CSS definiert. Sprites beinhalten daher häufig viele kleine Grafiken, die auf den ersten Blick vollkommen unsortiert aussehen.

Der Vorteil liegt auf der Hand, wenn man wieder an die Begrenzung gleichzeitiger Ladevorgänge der Browser denkt: Statt beispielsweise 20 kleine Mini-Grafiken zu laden, wird nur eine größere Bilddatei geladen. Somit sind schneller Kapazitäten für weitere Ladevorgänge frei.

Ein nettes Tool um Sprites zu erstellen ist übrigens Spritecow.com. Mehr Informationen zum Einsatz und zur Umsetzung von Sprites gibt es bei Frank.

Beschleunigen einer Website durch Cachen

Die Idee der meisten CMS ist ja, dass man Inhalte online erstellt, die dann in einer Datenbank ablegt und das System aufgrund vordefinierter Templates daraus dann HTML-Seiten macht. Das manuelle Erstellen von HTML-Seiten ist somit nicht mehr notwendig. Ein Problem nur: Für jeden Aufruf muss dieser Vorgang der „HTML-Erstellung“ neu durchgeführt werden. Das belastet den Server und verlangsamt die Seitenaufrufe.

Abhilfe gibt es für Anwender mit Apache-Server (sofern man den Zugriff auf die .htaccess hat): Mit wenigen Einträgen kann man so den Server zum Cachen bestimmter Dateitypen auffordern. Statt eine Seite dann neu zu generieren, greift der Server auf bereits vorhandenen Cache zurück.

Die notwendigen Einträge in die .htaccess sind schnell gemacht, eine gute Anleitung gibt es hier.

Beschleunigen einer Website durch Komprimierung

Ebenso sinnvoll und mit wenigen Handgriffen (bzw. Einträgen in der .htaccess) erledigt: Das Komprimieren von Dateien. Hier gilt wieder der bereits oben erklärte Ansatz: Je kleiner eine Datei, umso schneller wird sie geladen. Doch nicht nur bei Grafiken oder CSS-Dateien kann man das machen. Auch HTML-, Text- oder PHP-Dateien lassen sich komprimieren. Dazu reicht bereits ein Eintrag in der .htaccess:

<IfModule mod_deflate.c>
<FilesMatch "\.(html|css|js|xml|php|txt)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

HTML-, CSS-, JS-, XML-, PHP- und TXT-Dateien werden somit vom Server komprimiert und zusätzlich auch als GZIP-Version (die Google etwa beim Crawlen gern nutzt) zur Verfügung gestellt. Die Ladezeiten reduzieren sich somit deutlich.

gleichzeitiges Laden: Dateien auslagern

Ein Tipp, der sich eher an Profis richtet, ist das Auslagern von (statischen) Dateien auf andere Hosts. Die Idee dahinter ist der Aufbau eines CDN: Da Browser nur 5 Dateien gleichzeitig von einem Host laden, kann man statische Dateien auf andere Hosts auslagern, damit die gleichzeitig geladen werden. Das empfiehlt sich vor allem für Stylesheets oder Grafiken. Dabei muss man nicht einmal auf professionelle Dienstleister zurückgreifen, eine Subdomain tut es in der Regel auch schon.

Grafiken und CSS daher einfach extern auslagern und die neuen Adressen der Website hinzufügen, schon wird alles etwas flotter.