Archiv für den Monat Mai 2012

Ladegeschwindigkeit von Webseiten optimieren


Ich weiß zwar das es zu diesem Thema schon mehr als genug Beiträge im Netz finden kann, aber da ich diesen Blog und dessen Inhalt nicht nur für andere schreibe sondern primär für mich. Denn auch ich muss hin und wieder mal nachschauen wie etwas im Detail funktioniert oder umgesetzt wird und da eignet sich der eigene Blog am besten für.

Ich werde hier eine kleine Einführung geben, an welchen Enden und Ecken man das Laden der eigenen Webseite verbessern kann. Ich gehe dabei aber z.B. nicht auf Backendeinstellungen für die Datenbank ein, sondern eher auf die allgemeinen Einstellungen die jeden betreffen.

1. Verkleinern von Dateien

Der erste Schritt ist das Verkleinern von Dateien, um weniger KBs über die Leitung zu versenden. Denn auch im Zeitalter von High Speed Internet gibt es inzwischen immer mehr Leute die auch Unterwegs online gehen und dann ist es schön, wenn die Webseite auf mobilen Endgeräten auch schnell lädt.

Es gibt eine Menge online Tools mit denen man seine Dateien sehr schnell und einfach verkleinern kann. Dieser Schritt muss auch erst am Ende der Entwicklung vorgenommen werden und man sollte immer beide Versionen im Projekt belassen die “min” Version und die Originale Version. Nur das man in der Webseite einfach die Links von der Normalen Version auf die min Version umstellt. Damit findet man Bugs einfacher, da man noch die Originaldateien besitzt mit den Kommentaren und den richtigen Variablennamen.

Stylesheets verkleinern

Im Netz gibt es die unterschiedlichsten Tools zum Verkleinern der Stylesheet Dateien. Hier werden z.B. die Kommentare und Leerzeichen sowie Enter Zeichen entfernt und man kann im Schnitt zwischen 20% und 30% an Platz sparen. Ich nutze als Onlinetool z.B. http://www.cleancss.com/ um meine CSS Dateien zu verkleinern.

JavaScript Dateien verkleinern

Um meine JavaScript Dateien zu verkleinern nutze ich auch ein Onlinetool http://dean.edwards.name/packer/. Hier liegt die Ersparnis an Platz sogar noch höher, da hier zusätzlich noch die Variablennamen gekürzt werden. Damit können wir auch hier zwischen 20% und 40% an Platz sparen.

Optimieren von Bildgrößen

Dann gibt es noch die Möglichkeit Bilder zu optimieren, ohne das diese an Qualität verlieren. Dazu gibt es einige Onlinetools und auch einen Vergleich – Link – der Tools. Ich persönlich habe bisher erst kraken.io verwenden und smushit.com. Die höhere Ersparnis an KBs bei Bildern hatte ich bei smushit (kann evtl. auch an den Bildern gelegen haben), außerdem kann man hier mit einem mal beliebig viele Bilder hochladen. Das einzige Manko an der Seite ist, das diese meist sehr langsam ist. Es kommt zwar ganz auf die Bilder an, aber im Schnitt lassen sich auch hier noch einmal zwischen 10% und 20% an Größe einsparen.

Komprimieren von Inhalten im IIS

Der IIS kann automatisch Inhalte komprimiert ausliefern, wenn dies vom Client (Browser) unterstützt wird. Damit wird die Größe der ausgelieferten Dateien automatisch vom Webserver verkleinert. Im jeweiligen Webprojekt unter “Komprimierung” kann eingestellt werden was komprimiert werden soll.

imageimage

2. Die Anzahl der Requests verkleinern

Eine weitere Möglichkeit die Ladegeschwindigkeit bei Webseiten zu verbessern ist es die Anzahl der Requests zu verkleinern, wenn eine Seite aufgerufen wird. Denn für jede Datei, die auf einer Webseite benötigt wird egal ob CSS, JavaScript oder ein Bild, für jede Datei wird ein eigener Request benötigt und jeder Request kostet Zeit. Um die Anzahl der Requests zu verkleinern, hat man auch wieder die unterschiedlichsten Möglichkeiten.

Verwenden von Sprites

Für die Standardgrafiken auf einer Webseite kann man Sprites zum Anzeigen verwenden. Ein Sprite ist eine Bilddatei in der viele Bilder eingebettet werden und man kann dann mittels CSS auf einen bestimmten Ausschnitt in diesem Bild “zugreifen” bzw. “anzeigen”. In einer Sprites Datei sollten nur die Bilder abgelegt werden, die für das Layout einer Seite notwendig sind und keine Bilder die sich täglich ändern. Zum Erstellen von Sprite Dateien gibt es auch wieder Onlinetools die das übernehmen, ich habe z.B. http://de.spritegen.website-performance.org/ verwendet um Sprites zu erstellen, dieses Tool erstellt ebenfalls das passende CSS um die einzelnen Bilder im Sprite direkt ansprechen zu können. Im Netzt gibt es auch genügend Einführungen wie Using Sprites, die die Verwendung von Sprites erläutern.

Zusammenführen von Mehreren CSS Dateien

Man kann CSS Dateien nicht nur Minimieren, es gibt auch Tools mit denen man mehrere CSS Dateien in eine zusammenfassen kann. Hier habe ich bisher leider noch keine Erfahrung sammeln können, ich weiß nur das es mit der Library requirejs mit den “Optimization” Tools möglich ist. Wenn ich hier genaueres weiß, wird es einen Blogpost geben inkl. einer Anleitung wie man das ganze bewerkstelligen kann.

3. Testen unserer Ergebnisse

Wenn wir all unserer Performanceverbesserungen eingebaut haben, dann können wir diese z.B. mit Hilfe von yslow einem Browser Plugin testen. Wenn es installiert wurde, findet man es im Firefox mit bei den Firebug Einstellungen.

image