Für Besucher, die bleiben: Mit diesen 6 Tipps wird deine Website schneller

23. April 2015 von Sebastian Maier

Mit CSS gebaute Buttons senken die Ladezeit

Und eeewig lädt die Website – das nervt und muss einfach nicht sein!

Vergangene Woche ging es in meinem Blogartikel darum, warum schnelle Ladezeiten bei einer Website so wichtig sind. Diese Woche erhaltet ihr an dieser Stelle konkrete Tipps, wie ihr die Ladegeschwindigkeit einer Seite verbessern könnt.

Zunächst ist es wichtig zu verstehen, dass der Schlüssel zu einer schnellen Website oftmals geringere Datenmengen sind. Denn die Ladegeschwindigkeit wird maßgeblich davon beeinflusst, wie schnell das Endgerät des Besuchers die Website lädt. Daher drehen sich die folgenden Optimierungstipps zu einem großen Teil darum, an welchen Stellen Datenmengen eingespart werden können. Aber auch die Technik wie das Hosting oder die Software ist von großer Bedeutung.

Doch was bringen die besten Ratschläge wenn man nicht weiß, wie sie in die Tat umgesetzt werden? Deshalb habe ich bei jedem Tipp angemerkt, welcher Ansprechpartner (Programmierer, Designer oder Websiteinhaber) die Optimierung am effizientesten durchführen kann.


Bildgrößen optimieren (Designer, Programmierer & Website-Inhaber)

Vor dem Hochladen von Bildern in die Website (egal ob Design-Element oder z. B. Produktbild) sollten diese auf das richtige Größenformat gebracht werden. Eine Bilddatei aus einer Spiegelreflexkamera beispielsweise ist viel zu groß für das Web und könnte stark verkleinert werden, damit die Geschwindigkeit der Website weniger beeinträchtigt wird.

Neben dem standardmäßigen Anpassen von Bildgrößen gibt es clevere Tools, mit denen ein Bild (ohne Qualitätsverlust) nochmals komprimiert werden kann. Hierbei werden für das Bild nicht relevante Daten (z. B. GPS-Daten, Kamera-Infos etc.) aus der Bilddatei entfernt. Für Mac-Nutzer ist beispielsweise ImageOptim ein empfehlenswertes Tool, Spezialkenntnisse sind für die Nutzung nicht erforderlich. Für Windows gibt es z. B. jpegmini und pnggauntlet.


SVG statt jpg- oder png-Bildern (Programmierer & Designer)

Manchmal erreicht man jedoch noch bessere Effekte als durch die Verkleinerung von Bilddateien, wenn man direkt auf ein anderes Format setzt, beispielsweise auf SVGs. SVG-Dateien sind Vektor-Grafiken, die nicht aus Pixeln bestehen, sondern mathematisch errechnet werden. Dadurch passen sie sich flexibel unterschiedlichsten Bildschirmgrößen an und sind somit fürs Web ideal geeignet.

Da SVGs viel kleiner als “herkömmliche” Grafikdateien sind, unterstützen sie die schnelle Ladegeschwindigkeit einer Website. Darüber hinaus kann mit SVG eingebundener Text, wenn er nicht vektorisiert wird, auch von Suchmaschinen eingelesen werden. Gerade bei Bildern, die skalieren sollen, oder wenn viele freigestellte Elemente (beispielsweise ein transparenter Hintergrund in der Schrift) eingesetzt werden, kann der Größenvorteil sehr deutlich sein.


CSS statt Bildern (Programmierer)

Auch CSS kann eine Möglichkeit sein, Grafikdateien sinnvoll zu ersetzen.

Lange Zeit waren Browser ein reines Text-Lesegerät. Die Anzeigefähigkeit von Design-Elementen kam erst nach und nach hinzu. Anfangs wurden Schlagschatten, Verläufe oder Inverse Schriften als Grafiken in Websites eingebunden, was zu Verlangsamungen der Ladegeschwindigkeit geführt hat. Heute kann man dafür meist CSS (eine native Browsertechnik) einsetzen, die eine viel schlankere Einbindung grafischer Elemente ermöglicht.

Mit CSS gebaute Buttons senken die Ladezeit

Der hier dargestellte App-Store-Button besitzt eine Größe von 64.000 Bytes. Baut man die Grafik mit CSS nach, ist sie nur noch ca. 900 Bytes groß. Doch nicht nur die enorme Datenersparnis spricht für CSS. Dieses Format kann zudem beliebig oft wieder verwendet werden. Mit den 900 Bytes können also mehrere, ähnlich aussehende Buttons erzeugt werden. Bei einem Bild müssten hingegen immer 64.000 Bytes je Bild erneut in die Website eingefügt werden.


Angepasste Icon-Fonts (Designer)

Icons sind schon lange ein fester Bestandteil vieler Webdesigns. In den letzten Jahren wurden anstelle von Grafik-Icons vermehrt so genannte Icon-Fonts verwendet. Dabei handelt es sich um Web-Fonts, die statt Buchstaben Icons beinhalten. Gegenüber Icons als Grafiken ist der Vorteil ähnlich wie bei den SVGs: Auch Icon-Fonts sind Vektor-Grafiken, die kleiner, optisch anpassbarer und leichter skalierbar sind.

Also eigentlich eine klare Sache, oder? Ja, wenn man darauf achtet, nur die Icons aus den Icon-Fonts hochzuladen, die man wirklich benötigt. Dies ist möglich, indem man sich eine individuelle Icon-Font erstellt. Wie das geht, haben wir schon einmal hier gezeigt.


Nachladen von Bildern in höherer Qualität (Programmierer)

Häufig möchte man als Designer gerade für sehr große Bildschirme Fotos von besonders hoher Qualität verwenden. Dies geht aber nur sehr zulasten der Geschwindigkeit, weil eine hohe Qualität auch immer größere Dateien mit sich bringt.

Um dies zu verhindern gibt es die Möglichkeit, die Website im ersten Schritt mit Bildern niedrigerer Qualität zu laden. Der Besucher kann die Seite dann schon vollumfänglich nutzen. Im Hintergrund werden gleichzeitig nach und nach die Bilder mit der besseren Qualität geladen. Dies beschleunigt die Websitegeschwindigkeit enorm.

Da diese Methode jedoch etwas aufwendiger ist als ein Bild für alle Bildschirmgrößen zu verwenden, ist sie für kleine Projekte noch nicht geeignet. Auch besteht grundsätzlich das Risiko von Kompatibilitätsproblemen mit den Browsern, da die Entwicklung von Standards in diesem Bereich zwar voranschreitet, sich aber bislang noch nicht komplett durchgesetzt hat.


Technik (Programmierer & Hoster)

Neben den bisher beschriebenen Möglichkeiten zur Optimierung der Ladegeschwindigkeit einer Website sollte man auch immer die Technik wie beispielsweise das Hosting unter die Lupe nehmen.

Zunächst kann durch die richtige Wahl des Hostings in Verbindung mit der passenden Technik (Software, Programmiersprache, Anforderungen etc.) bereits einiges erreicht werden. Nach unserer Erfahrung ist hier bei vielen Projekten (im Besonderen bei den kleinen bis mittleren Projekten) noch sehr großes Optimierungspotential vorhanden. Dies liegt oftmals daran, dass Programmierer und Hoster nicht ausreichend kommunizieren oder Verantwortlichkeiten nicht klar genug getrennt sind.

Deswegen sind wir bei smooster auch einen anderen Weg gegangen. Wir haben für unser Angebot alle technischen Bausteine (Hosting, CMS, Serversoftware etc.) in einem sehr intensiven und langwierigen Auswahlprozess getestet und nur das Beste davon übernommen. Dies führt dazu, dass alle diese Bausteine sehr gut ineinander greifen und Geschwindigkeitsvorteile optimal ausgeschöpft werden.

Beim Hosting der Website (und damit auch ihrer Mediendateien wie Bilder, Videos, PDFs etc.) setzen wir beispielsweise auf ein sogenanntes Content-Distribution-Network (kurz CDN). Bei einem CDN liegen Websites nicht nur auf einem einzigen Server, sondern als eine Art Kopie auf vielen geografisch verteilten Servern.

Das erhöht aber nicht nur die Ausfallsicherheit, sondern auch die Geschwindigkeit, weil der Besucher die Website immer von dem geografisch nächsten Server ausgeliefert bekommt. Dasselbe System verwenden wir auch bei der Verwaltung der Domainnamen – ein sogenanntes Geolocated DNS. Dies kommt besonders beim allersten Aufruf eines Besuchers der Website zum Tragen. Und gerade dieser erste Aufruf ist oft entscheidend dafür, ob der Besucher bleibt oder geht.

Neben dem Hosting können zudem noch die Dateien optimiert werden. In den vorherigen Absätzen ging es um das Verschlanken von Bilddateien und Grafiken. Aber auch die HTML-, CSS- und JavaScript-Dateien können durch verschiedene Verfahren optimiert werden, beispielsweise durch das Löschen nicht benötigter Informationen wie Entwicklerkommentare, Leerzeichen und Wiederholungen, oder auch das Komprimieren der Dateien auf Serverseite.


Ihr wollt noch mehr? Vielleicht findet ihr in Googles Regeln für eine höhere Geschwindigkeit für Hoster und Programmierer noch weitere Inspirationen zur Verbesserung des Ladetempos.



(Headerbild: Foto von jimmy brown, flickr.com/Creative Common Licence)

zurück
comments powered by Disqus