[Teil 3] Die Website-Geschwindigkeit: Die Verwendung von Height und Width – Elementen

Im letzten Beitrag habe ich mich grundsätzlich mit dem Optimieren der eigenen CSS-Struktur befasst und möchte mit diesem Teil die Artikelserie zur Website-Geschwindigkeit fortsetzen.

Dieses Mal soll es um das Verwenden von Height und Width gehen, was sich recht vorteilhaft auf die Ladezeiten von Bildern auswirkt. Natürlich ist auch das wieder nur ein kleiner Baustein, doch abermals geht es mit kleinen Schritten ans Ziel.

Also, schauen wir uns die Bilder in unserem Blog an und wie wir mit einem kleinen Eingriff den Seitenaufbau optimal beeinflussen können.

Die Verwendung von Bildern im Blog

Geschwindigkeit ist das A und ONun könnte man natürlich einfach behaupten, dass der schnellste Blog einfach keine Bilder verwendet und somit den Datentransfer zwischen Anwender und Server reduziert beziehungsweise unnötige Requests unterbindet.

Diese Idee ist nicht wirklich neu und wohl die einfachste Methode, um den Seitenaufbau diesbezüglich positiv zu beeinflussen. Bilder sind aber häufig das Salz in der Suppe und jeder Blog-Artikel sieht optisch einfach schöner aus, wenn das Auge etwas zum Betrachten hat.

Deshalb bringt es wenig, das Problem von hinten aufzuzäumen, denn wer einen Eyecatcher möchte, sollte sich mit diesem auseinandersetzen und nicht grundsätzlich auf ihn verzichten.

Reduktion der Ladezeit durch Height und Width

Das ist ein sehr wichtiger Faktor, den ich selbst sehr häufig vergesse. Wer nämlich Bilder oder auch Tabellen in seinem Blog verwendet, sollte diese immer mit den notwendigen Tags für Höhe und Breite ausstatten. Das sieht normalerweise dann so aus:

<img id=“irgendwas“ height=“300″ width=“250″ ​​src=“http://www.irgendwie.de/bild.png“alt=“irgendein bild“ />

Dafür müssen wir lediglich wissen, wie groß das Bild ist, das angezeigt wird und das kann sogar mittels Paint überprüft werden. Wer hier eine andere Angabe macht, verschenkt abermals Ladezeit, da so das Bild erst noch in die richtige Größe „gedrückt“ werden muss. Also ist es, abgesehen vom Beispiel immer sinnvoll, Bilder vorab auf die gewünschte Größe zu bringen und nicht erst online zu verändern.

Was bringt die Verwendung von Height und Width?

Wenn diese beiden Tags verwendet werden, weiß der Browser automatisch, welchen Platz er für ein Bilder „einplanen“ soll und lädt dann den Rest der Seite zeitgleich. Das sind zwar nur wenige Wimpernschläge, aber immerhin.

Positiv wirkt sich das jedoch auch auf die Usability und Optik des eigenen Blogs aus, denn auf diese Weise gibt es keine unschönen „Verschiebungen“. Eine Seite sieht also auch dann, wenn ein Besucher sie ansteuert schon so aus, wie sie nach dem Aufbau wirkt.

Wer allerdings WordPress nutzt, muss sich damit kaum beschäftigen, da dieser Vorgang in diesem Fall automatisiert wird. Lediglich zu beachten wäre dann, dass Bilder immer in der Größe vorliegen, wie sie letzten Endes auch im Blog erscheinen sollen.


Im nächsten Teil dieser Artikelserie über die Website-Geschwindigkeit soll es dann konkret um Bilder gehen, welche Formate sind zu empfehlen, von welchen sollte man Abstand nehmen.

Ich wünsche viel Spaß bis dahin – Speed up your site…