Performance-Probleme beim Rendering von Hintergrundbildern im IE

Die schnellste Übertragung von HTML, Bildern & Co. nützt nichts, wenn der Browser beim Rendern dieser Elemente ins Schwitzen kommt. Im Internet Explorer scheint es diesbezüglich ein besonders großes Problem im Zusammenhang mit großen Hintergrundbildern zu geben, wodurch der Browser unter gewissen Umständen mehrere Sekunden lang blockiert und die Seite dadurch unbenutzbar bzw. unscrollbar wird.

Dies ist ein Gastartikel von Lars-Simon Wollny.

Auf unserer Seite www.tui-wolters.de gab es das Phänomen, dass sich der Internet Explorer beim Rendering – vor allem beim Scrollen – etwas träge anfühlte. Das war noch kein großes Problem, den Rahmen gesprengt hat es allerdings, wenn der Zoomfaktor auf 95% reduziert wurde (lässt sich nicht direkt auswählen, aber mit gedrückter STRG-Taste und Scrollrad kann man die Zoomstufe in 5%-Schritten ändern). Der IE war nun nahezu unbenutzbar, die Seite brauchte etwa 1 Minute bis sämtliche Ladevorgänge abgeschlossen waren. Menüs waren sehr träge, beim Scrollen konnte man zusehen wie der IE die Seite Stück für Stück wieder aufbaute.

Merkwürdig war nur, dass es im Firefox und anderen Browsern überhaupt keine Performanceprobleme gab.

Wie wir letztlich nach vielem Ausprobieren festgestellt haben, war das Problem die Hintergrundgrafik: Diese war unten ausgerichtet und in der Höhe so groß bemessen, dass sie auch bei sehr langen Seiten einsetzbar war. Sie war 1px breit, 30.000px hoch und wurde dann entsprechend nach rechts „repeated“. Die Höhe klingt sehr groß, aber die Dateigröße lag bei nur 206 Byte (PNG). Wir konnten die Struktur der Seite nun so ändern, dass die Hintergrundgrafik nur noch etwa 500 Pixel hoch ist; der restliche Hintergrund wird durch Background-Color gefüllt.

Jetzt läufts im IE richtig flüssig, auch bei 95% Zoomstufe. Trügerisch war nur, dass man im Firefox überhaupt keinen Unterschied bemerkt – und auch im IE nur bei 95% Zoomstufe wirklich eine Änderung festzustellen ist.

Getestet und erfolgreich nachgestellt haben wir dieses Phänomen im IE7 und IE8, im IE9 konnten wir leider nicht testen.

Fazit
Man sollte möglichst kleine Hintergrundgrafiken verwenden – nicht nur von der Dateigröße her sondern auch von den Abmessungen. Und wenn man seine Seitenperformance im IE testen möchte, reduziert man am besten die Zoomstufe, dann muss der IE viel mehr arbeiten und man kriegt ein deutlich besseres Bild von potentiellen Flaschenhälsen.