Warum laden manche Websites langsamer als andere?
80% of the end-user response time is spent on the front-end.
Die Antwort auf diese Frage hängt mit dem Aufbau von Websites zusammen. Diese bestehen nicht nur aus einem Element, sondern aus vielen Einzelelementen, zum Beispiel aus:
- Stylesheets (Formatvorlagen für Texte, Grafiken, Farben, etc.)
- Bildern,
- Flash (Werkzeug für Multimedia-Darstellungen oder Animationen),
- JavaScript (Programmiersprache für kleine Anwendungen) etc.
Erst der Browser setzt die einzelnen Elemente zu einer Gesamtseite zusammen. Wie schnell das geht, hängt davon ab, wie schnell die einzelnen Elemente bereitgestellt werden und in welcher Reihenfolge der Browser das „Zusammenbauen“ (Rendern) realisiert. Eine Lösung wäre eine ganz simple Seitenstruktur. Doch Seiten aus den Anfangsjahren des Internets wünschen sich weder Programmierer und Internet-Konzeptioner noch User zurück. Dennoch gibt es Möglichkeiten, attraktive Websites mit umfangreichem Content zu entwickeln und gleichzeitig die Ladezeiten gering zu halten.
Mehr als 50% der Nutzer rufen eine Website mit einem leeren Cache (Zwischenspeicher im Browser) auf. Bei ihnen dauert der Seitenaufbau länger als bei Nutzern mit gefülltem Seiten-Cache. Diese User klicken sehr schnell weiter, wenn der Seitenaufbau zu lange dauert.
Anzahl der http-Anfragen reduzieren
Dieses Ziel kann durch verschiedene Optionen erreicht werden, zum Beispiel durch das Kombinieren von Dateien. Mehrere Stylesheets können dabei zum Beispiel in einem Stylesheet gebündelt werden. Das gilt ebenso für mehrere Skripte, die in einem Skript enthalten sein können. Kompliziert wird es allerdings, wenn die Sheets und Skripte auf den einzelnen Seiten der Website variieren.
Bilder kombinieren
Auch bei Bildern gilt der Leitsatz, die Anzahl der http-Anfragen zu reduzieren. Mehrere kleine Grafiken benötigen mehr Ladezeit als wenige große Grafiken. Lösungsvarianten sind Image-Maps und Inline-Bilder. Bei Image-Maps wird aus mehreren Bildern ein großes Bild generiert. Sind in das Bild noch Links eingebunden, können diese durch Koordinaten festgelegt werden. Die Programmierung der Koordinaten dauert zwar länger, aber der Aufwand ist ein einmaliger und stellt auf Dauer kürzere Ladezeiten sicher. Inline-Bilder werden über URLs in die jeweilige Website eingebunden, allerdings unterstützen noch nicht alle Browser diesen Prozess.
Die Größe der Bilder verringern
Grundsätzlich sollte die Größe des Bildes, das in eine Website eingebunden wird, immer der Darstellungsgröße entsprechen. Programmierer skalieren oft nur ein vorhandenes Bild auf die erforderliche Größe. Das größere Originalbild, das geladen werden muss, benötigt jedoch mehr Ladezeit.
Im Trend liegen Bilder im PNG-Format, während früher hauptsächlich GIFs und JPGs verwendet wurden. Die heutigen Browser stellen auch PNGs zufriedenstellend dar.
Cookie-Größe verringern
Die Verwendung von Cookies ist wichtig für die Personalisierung und Autorisierung von Inhalten. Auch hier besteht die Möglichkeit, die Ladezeit durch eine gezielte Reduzierung der Cookie-Größe zu verringern. Cookie-Anfragen an den Server sollten auch nur für die entsprechenden Inhalte übermittelt werden. Ein statisches Bild kann beispielsweise auch „cookie-frei“ vom Host geladen werden.
Diese und andere Tipps für schnellere Websites haben die Entwickler von Yahoo für sieben verschiedene Elemente zusammengetragen, die bei der Website-Programmierung zur Anwendung kommen. Hier finden Sie das englische Dokument „Best Practice for Speeding Up Your Web Site“.
//SEIBERT/MEDIA/TECHNOLOGIES bietet seit 1997 professionelle Frontend-Entwicklung an. Bei der Frontend-Programmierung steht immer auch die Performance der Website im Mittelpunkt. //SEIBERT/MEDIA verfolgt dabei einen ganzheitlichen Ansatz und verknüpft hochwertiges Design, eine gute Usablity und technologische Reife.
Weitere Informationen zum Thema Web-Programmierung:
Frontend-Leistungen von //SEIBERT/MEDIA/TECHNOLOGIES
Yahoo: wie man Webseiten schneller macht
Tipps von Yahoo für schnellere Webseiten
Kurze Ladezeiten: ein häufig unterschätztes Kriterium
Mehr über die Creative-Commons-Lizenz erfahren
Hallo,
Um die Performance der Webseite zu überprüfen und zu optimieren gibt es übrigens das Firefox Plugin YSlow.
Paradox, dass das Tool für diese Webseite gleich 13 Tipps gibt, wie man die Geschwindigkeit optimieren kann 🙂
Aber mal ernsthaft, in Zeiten der Breitbandanschlüsse macht es doch kaum noch einen Unterschied, ob 4 CSS-Dateien und 10 kleine Bilder, oder eben jeweils “ein großes” davon geladen werden.
Die meisten Wartezeiten kommen durch unvorteilhafte serverseitige Programmierung oder durch überlastete Server zustande. Ist der Server nicht langsam, macht es doch kaum einen Unterschied, ob nun eine http-Anfrage mehr oder weniger abgesetzt wird. Und Programmierer, die auf die Idee kommen, massig Daten in ein Cookie zu packen oder Bilder per CSS-Angaben runterzuskalieren, sind wohl eher im Hobbybereich zu finden.