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.

Dieser Beitrag wurde in   HTML, CSS veröffentlicht.
Fügen Sie ein Lesezeichen für den   permanenten Link hinzu.

Jan hat 152 Beiträge geschrieben

4 Kommentare zu “Performance-Probleme beim Rendering von Hintergrundbildern im IE

  1. SeeeD sagt:

    Sehr Interessant und danke für die Info.
    Habt ihr bei euren Tests auch die Auflösung beachtet?
    Wenn ja, welche Auflösung habt ihr getestet?
    Wäre interessant zu Wissen ob das Rendering bei einer geringeren Breite der Webseite schneller gegangen wäre.

  2. Dennis sagt:

    Also im neuen IE 10 (Beta) konnte ich das Problem nicht mehr beobachten und nachstellen. Nur so zur Info, könnt ihr ja oben mit aufnehmen.

  3. Lars sagt:

    @SeeeD: Die Auflösung bei unseren Tests betrug 1920×1200 Pixel. Ich werde nochmal einen Test mit einer geringeren Auflösung machen.

    @Dennis: Sehr interessant – bei Microsoft wird halt auch gearbeitet 😉 Aber es mag ja noch Jahre dauern, bis die Version 8 verschwunden ist. Ich werd Zuhause demnächst mal den IE9 testen.

Eine Antwort schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert mit *

You may use these HTML tags and attributes: <a href=""> <blockquote cite=""> <pre lang=""> <b> <strong> <i> <em>