Schnell ist gut. Jedenfalls, wenn es um Webseiten geht. Das sehe ich bei jedem Test mit Nutzern. Brauchen Webseiten länger als zwei, drei Sekunden, bis sie auf dem Bildschirm erscheinen, werden die Nutzer nervös.
Aber wie sieht es erst aus, wenn die armen Nutzer mit einem Smartphone auf unsere Sites zugreifen, womöglich noch in einer Gegend, in der das Handynetz nicht besonders gut ist? Oder aus einem fahrenden Zug? Oder von einer vollen Messe?
Ganz schlecht sieht es dann aus für unsere Seiten. Denn sie brauchen zu lang zum Laden. Und die Nutzer sind nicht nur genervt, sie ziehen auch Konsequenzen:
40 Prozent der mobilen Nutzer brechen den Besuch einer Site ab, wenn sie länger als 3 Sekunden zum Laden braucht.
Und 6 Prozent davon gehen direkt zur Website der Konkurrenz. Diese Zahlen stammen von Keynote, einem Unternehmen, das sich auf Tests von mobilen Sites spezialisiert hat.
Technik macht unsere Seiten schneller
In den letzten Jahren ist das Web immer schneller geworden. Vor allem die Übertragungsgeschwindigkeit. Leistungsfähige Verteilknoten, Glasfaserleitungen, hochoptimierte Kupferdrähte und ultraschnelle Mobilfunknetze sorgen dafür, dass immer mehr Inhalte in immer kürzerer Zeit von den Servern zu den Nutzern kommen.
Und die Browser werden immer schneller und die Geräte, auf denen wir die Seiten ansehen auch.
Warum aber werden die Seiten dennoch gefühlt immer langsamer?
Konzepter und Designer machen unsere Seiten langsamer
Schuld daran sind wir Konzepter und Designer. Wir packen immer mehr immer größere Fotos darauf. Wir verwenden mehrere eigene Schriftarten. Wir fügen Video ein.
All das sind Dinge, die unsere Seiten schöner machen. Sie verbessern die User Experience.
Aber: Sie alle zusammen verschlechtern die User Experience. Denn eine Seite kann so schön sein und inhaltlich wertvoll, wie sie mag – bekommt der Nutzer die wunderschöne Seite nie zu Gesicht, weil er nach fünf Sekunden das Laden entnervt abbricht, dann hat die Seite ihr Ziel verfehlt.
Was wir gegen diesen Nutzerfrust tun können, ist bei der Konzeption von Anfang an darauf achten, dass unsere Sites auch von unterwegs mit langsamen und unzuverlässigen Verbindungen ordentlich funktionieren.
Und das sollten wir tatsächlich auch unter echten Bedingungen testen.
Technik macht unsere Seiten noch schneller
Aber auch die Technik kann uns helfen, unsere Seiten weiter zu beschleunigen. Das sollte aber nie eine Ausrede sein dafür, seine konzeptionellen Hausaufgaben nicht zu machen.
Ob Programmierer, Grafiker oder Konzepter – allen lege ich dieses Buch ans Herz: Designing for Performance. Weighing Aesthetics and Speed. Geschrieben hat es Lara Hogan und sie zeigt auf 179 Seiten knapp und praxisorientiert, was wir tun können, damit unsere Seiten so schnell wie möglich im Browser der Benutzer erscheinen.
Natürlich wird es mitunter etwas technisch, und es geht unter anderem auch um HTML, CSS und JavaScript. Aber auch Nicht-Coder verstehen problemlos, worauf es bei den gezeigten Beispielen ankommt.
Die drei Optimierungsmöglichkeiten für schnellere Seiten
Wir können vor allem hier ansetzen, um unsere Seiten schneller zu machen:
- Bei den Bildern
- Beim Code, also HTML und CSS (und JavaScript)
- Bei externen Dateien, also vor allem Webfonts und externen Scripts
Und es gibt noch einen weiteren wichtigen, ganz grundlegenden Punkt. Um zu verstehen, warum der wichtig ist, müssen wir uns ansehen, wie eine Seite über das Internet zum Nutzer kommt:
- Der Nutzer gibt die URL ein.
- Der Browser schickt die Anfrage zum Server.
- Der Server sucht den notwendigen Inhalt zusammen.
- Der Server liefert die Seitenbestandteile zurück.
- Der Browser baut diese zusammen zu der Seite, die der Nutzer sieht.
Hinter allen diesen Punkten steckt technisch weitaus mehr, als man zunächst denkt. Für uns interessant sind aber vor allem die Punkte 4 und 5.
Punkt 4 bedeutet, dass die Seite nicht als ein fertiges Stück vom Server kommt. Vielmehr liefert der Server jede Seite in vielen Einzelteilen. Das sind z.B.:
- mit Server-Scripts wie PHP eingebundene Bestandteile der Seite
- das HTML-Gerüst
- externe CSS- und JavaScript-Dateien
- eingebundene Bilder
Alle diese Elemente gehen als Einzelteile durch die Leitung. Das heißt, wenn wir eine Seite aufrufen, ist es nicht mit einer Verbindung zum Server getan, sondern wir brauchen etliche. Für jede eingebundene Datei, für jedes Script und jedes Bild eine eigene.
Und jede einzelne Verbindung muss erstmal zustande kommen. Das dauert jeweils nicht lang, aber in der Summe kommt einiges zusammen.
Generell geht es schneller, Inhalte gemeinsam über eine Verbindung mitzuschicken, als jeweils eine neue Verbindung aufzubauen.
Daher ist es aus Performance-Gründen oft besser, CSS- und JavaScript-Dateien z.B. direkt in den HTML-Code einzubauen. Dann werden sie direkt mit der Seite übertragen und der Browser muss für sie nicht eigens nochmal Verbindungen zum Server herstellen.
Was man natürlich auch noch optimieren kann, ist die Zeit, die der Server braucht, um die Bestandteile zusammenzusuchen. Besonders wenn Sie ein Content-Management-System verwenden, gibt es hier zusätzliches Optimierungspotenzial (siehe Turbo für Ihre Website).
Bilder optimieren
Nachdem Bilder den größten Anteil von Bytes ausmachen, der durch die Leitung muss, lohnt sich die Optimierung hier am meisten.
Sorgen Sie vor allem dafür, dass die Bilder nicht größer sind als nötig. Legt Ihr Seitenraster etwa fest, dass Bilder maximal 900 Pixel breit sind, sorgen Sie dafür, dass sie nie in einer höheren Auflösung auf dem Server landen.
Das klingt trivial, aber gerade bei Redaktionssystemen, an denen mehrere Personen zusammenarbeiten, finden sich immer wieder Fotos mit optimaler Druckauflösung von 4000 x 3000 Pixeln und mehr auf den Webseiten wieder.
Am besten ist also eine technische Lösung, die beim Hochladen der Bilder auf den Server dafür sorgt, dass diese auf die maximal benötigte Qualität herunterskaliert werden.
Eine weitere Stellschraube ist die Qualität der Bilder. Für Fotos sollten Sie ausschließlich das JPEG-Format verwenden. Dies ist dafür optimiert und kann erstaunlich gute Ergebnisse liefern.
Drehen Sie die Kompression so weit hoch, bis Sie gerade noch mit der Qualität leben können, welche aus der Bildverarbeitung herauskommt.
| Einfluss der Qualität auf die Bildgröße (Foto mit gewaltigen 5.300 x 3.500 Pixeln): | |
| Qualitätsfaktor | Dateigröße |
| 100 | 1,6 MB |
| 60 | 718 KB |
| 30 | 627 KB |
| 10 | 559 KB |
Achten Sie auch auf das richtige Format: Strichzeichnungen, Diagramme und praktisch alles, was kein Foto ist, speichern Sie besser als PNG-Datei. Diese sind in den Fällen praktisch immer deutlich kleiner als JPEGs mit dem gleichen Inhalt.
Kommen wir zum letzten Punkt. Dieser betrifft die Darstellung von Bildern im Browser. Das responsive Design sorgt dafür, dass alle Seiten auf allen Geräten optimal aussehen (siehe Responsive Konzeption). Allerdings führt das bei vielen Umsetzungen dazu, dass die Bilder in der maximalen Qualität in die HTML-Seiten eingebunden werden. Auf dem Smartphone ist das Foto dann z.B. nur 300 Pixel breit – es wurde aber in seiner vollen Pracht von 1.200 Pixeln Breite übertragen, weil es so auf großen Desktopmonitoren dargestellt wird.
Leider fehlt noch eine technische Lösung, die dafür sorgt, dass die Browser sich die Bilder in der Größe vom Server besorgen, die sie wirklich darstellen. Es gibt vielversprechende Ansätze, die sind aber noch nicht über alle Browser hinweg umgesetzt. Daher muss man mit ein paar Coding-Tricks arbeiten, um das zu erreichen. Diese finden Sie im oben vorgestellten Buch beschrieben, wenn Sie so weit technisch einsteigen möchten ins Thema.
HTML, CSS und eigenen JavaScript-Code optimieren
Beim Code sollten Sie darauf achten, dass er gut organisiert und übersichtlich ist. So stellt man mit etwas Fachkenntnis schnell fest, wenn Dinge doppelt definiert oder überflüssig sind.
Ganz wichtig ist die Reihenfolge, in welcher die Elemente im HTML-Code stehen. Denn der Browser interpretiert den Code der Seite von oben nach unten, so wie wir ihn auch lesen. Und manche Elemente können dazu führen, dass der Browser erstmal wartet.
Als Faustregel gilt:
- CSS-Dateien im <head> einbinden
- JavaScript am Ende der Seite einbinden
Das CSS braucht der Browser baldmöglichst, damit er die Inhalte, der Seite richtig darstellen kann. Die Scripts sorgen meist für Interaktivität oder Zugriffsstatistiken – alles Dinge, die erledigt werden können, wenn der Nutzer schon etwas sieht auf seinem Bildschirm.
Kommentare, Einrückungen und Leerzeichen machen Code besser lesbar. Allerdings sorgen sie für zusätzliche Bytes, der der Browser nicht braucht, um die Seite darzustellen. Daher sollte man den Code minifyen. Das heißt, alle überflüssigen Elemente daraus entfernen. Es gibt einfache Tools, die das auf dem Server übernehmen.
Dann kann man den Code schließlich noch komprimieren. So wie Sie eine Textdatei zippen können, so können Sie das auch mit HTML-, CSS- und JavaScript-Dateien tun. Auch das erledigen Server nach ein paar Einstellungen automatisch – und die Browser können heutzutage alle damit umgehen und entpacken alles nach Bedarf.
Fonts & externe Scripte optimieren
Webfonts sind wunderbar, weil wir damit unser Seiten in jeder beliebigen Schriftart gestalten können – gleich, ob der Nutzer diese installiert hat oder nicht.
Leider sorgen die eingebundenen Schriften aber dafür, dass zusätzliche Daten übertragen werden müssen. Auch deshalb sollten Sie sich auf so wenige Fonts und Schriftschnitte wie möglich beschränken.
Je weniger, je besser.
Ein Trick ist auch, eigene Schriften nur zu laden, wenn der Nutzer einen größeren Screen hat – dann kann man davon ausgehen, dass er normalerweise an einem Desktop-Rechner sitzt und eine schnelle Internetanbindung hat.
Und auch bei externen Scripts sollten Sie sich so stark beschränken wie möglich. Diese können die Seiten enorm aufblähen. Typische Kandidaten sind Scripts für besondere Darstellungen wie Lightboxen oder Diashows sowie solche für die Analyse des Nutzerverhaltens.
Fazit
Sie sehen, es gibt einige Stellen, bei denen Sie ansetzen können, um Ihre Seiten schneller zu machen. Das Buch stellt Ihnen noch einige weitere vor und hilft Ihnen auch, den Erfolg Ihrer Bemühungen zu messen. Mit ein paar kostenlosen Tools können sie überprüfen, wie schnell Ihre Seiten so sind.
Doch eines sollten Sie nicht tun: Auf Tests unter realistischen Bedingungen verzichten. Rufen Sie Ihre Seiten unterwegs auf, im fahrenden Zug oder bei Ihrer nächsten Bergwanderung. Und wenn Sie Ihre Arbeit gut gemacht haben, dann bleiben Ihre Seiten auch in dem Fall noch benutzbar.
Ich hätte gerne einen Kommentar gepostet, aber die Längenbeschränkung dieser Seite läßt mich nicht