Website schneller machen: Zehn Tipps

Das Lade-Icon dreht sich, die Seite bleibt weiss. Und nach durchschnittlich fünf Sekunden ist der potentielle Kunde wieder weg. Er sucht sich eine andere Seite. Die Geschwindigkeit einer Website ist viel wichtiger, als manche glauben. Aber nicht nur der Mensch ist ein ungeduldiges Wesen, auch Google ist kein Freund von langen Wartezeiten. Die Suchmaschine merkt sich die Ladezeit einer Website und verwendet diesen Wert als Kriterium für ein besseres oder schlechteres Ranking. So oder so führt eine schlechte Website-Performance zu weniger Besuchern und folglich auch weniger Kunden.

Dabei liesse sich dies leicht vermeiden. Oft kann die Geschwindigkeit einer Website mit nur ein paar kleinen Tricks stark verbessert werden. Das lohnt sich, denn davon profitieren sowohl Sie wie auch Ihre Kunden. Das Team Digital von Tincan Media hat deshalb zehn Tipps zusammengestellt, wie sie ihre Website schneller machen können:

1. Bilder komprimieren!

Auch wenn Sie jetzt vielleicht mit den Augen rollen: Viele Seiten scheitern schon an diesem einfachen Kriterium. Die meisten Bilder auf einer Seite haben eine fixe Verwendungsgrösse. Es gibt dann keinen Grund, das Bild grösser zu speichern, als es angezeigt wird. Grundsätzlich kann ein Bild soweit komprimiert werden, dass es genauso gross ist (in Pixeln), wie später auf der Website. Heute kommen auch Retina Displays ins Spiel. Diese sind hochauflösend und verwenden für ein "Website-Pixel" oft bis zu vier echte Pixel. Aus diesem Grund lohnt es sich, Bilder generell doppelt so gross, wie auf der Website (Pixel x 2) hochzuladen. Auch dann ist das Bild oft noch viel kleiner als zuvor. Ausserdem sollten Fotografien bevorzugt als platzsparendes jpeg hochgeladen werden (nicht etwa png).

Hier ein praktisches Tool, welches diese Arbeit übernimmt:
http://picresize.com/.

Bilder können problemlos genau so klein sein wie das HTML-Element

2. Vektoren anstatt Bilder

Bei manchen Bildformaten muss jedes Pixel einzeln gespeichert werden. Das braucht viel Platz, ist aber oftmals gar nicht nötig. Digitale Zeichnungen wie Logos, Icons und Illustrationen können als SVG-Datei gespeichert werden, welche das Bild mit Hilfe von Vektoren beschreibt. Vektordateien sind in etwa das digitale Äquivalent zu "Malen nach Zahlen" und benötigen so wesentlich weniger Speicherplatz. Ausserdem bleiben sie bei jeder Grösse immer scharf.

Tincan Media verwendet für viele Icons SVG-Grafiken

3. Above the Fold optimieren

"Above the Fold" stammt aus der Welt der Zeitungen und bezeichnet den Inhalt, der bereits vor dem entfalten der Zeitung sichtbar ist. Auch Websites haben einen Bereich, welcher nach dem Laden als erstes sichtbar ist, nämlich den Anfang der Seite - vorausgesetzt der User scrollt nicht schon während dem Ladevorgang nach unten. Moderne Browser sind diesbezüglich sehr intelligent und laden diesen Above the Fold-Inhalt zuerst. Jener Teil der Seite, zu welchem der User noch nicht gescrollt hat, kann dann im Hintergrund nachgeladen werden. Aus diesem Grund ist es wichtig, den Above the Fold-Bereich punkto Geschwindigkeit so gut wie möglich zu optimieren. Ist dieser Teil der Seite sichtbar, empfindet der User die Seite als fertig geladen, auch wenn die weiteren Inhalte noch nicht da sind.

Typischer Above the Fold Bereich der Tincan Homepage

4. Scripts aus dem Header entfernen

Der Browser lädt die einzelnen Elemente normalerweise in der Reihenfolge, in welcher sie im Quellcode stehen. Scripts, welche häufig im Header der Seite eingebettet sind, werden also zuerst geladen. Dabei blockieren vor allem grosse oder externe Scripts ein weiteres Laden der Seite. Oft ist dies gar nicht nötig, da die meisten Scripts erst nach dem Laden der Seite aktiv werden sollen. Es empfiehlt sich daher, Scripts ans Ende des HTML-Files vor dem schliessenden Body-Tag zu platzieren (Stichwort jQuery).

Scripts können häufig auch am Ende der Seite platziert werden

5. Scripts asynchron schalten

Nicht alle Scripts können ans Ende der Seite verschoben werden - aus diversen Gründen. Für jene Elemente kann das Tag "async" verwendet werden. Es bewirkt, dass der Browser die Script-Datei zwar lädt, aber gleichzeitig mit dem Rendern der eigentliche Seite weitermacht. Die beiden Vorgänge laufen dann gleichzeitig.

Beispiel für zwei Asynchrone Scripts

6. Externe Dateien schlanker machen

Das Laden von externen Text-Dateien (javascript, css) benötigt verhältnismässig viel Zeit. Diese kann reduziert werden, indem diese Dateien schlanker gemacht, "minified", werden. Beim minifying-Vorgang werden alle unnötigen Zeichen (Umbrüche, Tabs, Leerschläge) aus der Datei entfernt. Bei besonders grossen Files kann dies schnell ein paar Kilobyte ausmachen.

Hier ein praktisches Tool, welches diese Arbeit übernimmt:
http://www.minifier.org/.

Die Minified Version von jQuery

7. Scripts & CSS inline definieren

Externe Inhalte müssen gar nicht zwingend in einem externen File liegen. Sie können auch gleich direkt in die HTML-Datei geschrieben werden. Diese Arbeitsweise war lange Zeit verpönt, kam aber in den letzten Monaten wieder auf und wird auch von diversen Speed-Testing-Tools wieder empfohlen. Denn: Was direkt in der HTML-Datei steht, muss nicht extra geladen werden und kostet keine Zeit. Wer also viele kleine css- und javascript-Files laden muss, spart so ein paar hundert Millisekunden und verbessert seine Website-Performance.

Gewisse Scripts werden besser gleich inline definiert

8. Server Caching

Dynamische Seiten mit einer Datenbank im Hintergrund benötigen oft viel Zeit, diese Seiten bei einer Anfrage zu generieren. Bestes Beispiel dafür sind CMS-Systeme. Die einzelnen Seiten einer Website sind aber meist bei jeder Anfrage gleich. Eine Startseite, zum Beispiel, sieht für jeden User gleich aus. Das CMS braucht sie also eigentlich gar nicht jedes Mal neu zu erstellen. Aus diesem Grund gibt es Cache-Funktionen und Plugins für viele CMS-Systeme. Die Cache-Plugins speichern solche Seiten temporär ab und beschleunigen so den Ladevorgang.

Wir empfehlen abzuklären, ob auch für Ihr CMS eine solche Funktion verfügbar ist.

9. CloudFlare & CDNs

Content Delivery Networks (CDN) sind Online-Dienste, welche auf das blitzschnelle Bereitstellen von statischen Inhalten für Websites spezialisiert sind. Sie können diese oft schneller liefern, als der eigene Server. Beispiele hierfür sind MaxCDN oder Amazon Cloud Front. Werden z.B. alle Bilder über ein solches System bereitgestellt, kann auch dies die Website schneller machen. Tincan Media verwendet hierfür das Mischsystem CloudFlare.

10. Don't trust Google

Wer kennt ihn nicht, den Page Speed Analyzer von Google. So mancher ist schon daran verzweifelt. Und ganz ehrlich: Google übertreibt masslos. Viele, wirklich schnelle Seiten, erhalten vom Testing-Tool schlechte Noten. Seien Sie hier nicht zu streng mit sich selber.

Google-Bewertung für die Website der New York Times