CSS contain – Die Geschwindigkeit der Website verbessern
Von: Robert, Jonas Mit CSS Containment lassen sich einzelne Elemente und deren Inhalte isolieren. Durch die Unabhängigkeit dieser Elemente wird der Rendering-Prozess vom Browser beschleunigt und die Performance der Seite gesteigert.
Mit Hilfe von der CSS-Eigenschaft contain können Elemente und deren Inhalte, so weit wie möglich, unabhängig vom restlichen Dokumenten-Baum gerendert werden. Layout, Farben, Stile und Größen, beziehungsweise eine Kombination aus diesen Eigenschaften können vom Browser für einen begrenzten Bereich neu berechnet werden, ohne dass das ganze Dokument neu gerendert werden muss. Hierdurch kann ein deutlicher Performance-Boost der Website erreicht werden.
Ziel und Einsatz von CSS Containment
Das Ziel von CSS Contaimnent ist es, die Rendering-Leistung von Websites durch die Angabe einer CSS-Eigenschaft (contain) zu verbessern. Hierbei werden einzelne Komponenten in »Teilbäume« isoliert, sodass sie vom Browser unabhängig vom restlichen Dokumenten-Baum interpretiert und gerendert werden können.
Gerade bei komplexen Websites, die komponentenbasiert aufgebaut sind, lohnt sich der Einsatz von CSS Containment erheblich.
Wichtig! Die Angabe von contain ist nicht dazu gedacht, das Layout optisch zu verändern. Es ist eine Art »Tuning« der Seite, welches dem Browser zusätzliche Informationen gibt, wie er einzelne Komponenten interpretieren soll.
Werte und Syntax von der CSS-Eigenschaft contain
Die CSS-Eigenschaft contain hat vier verschiedene Werte, die zusätzlich beliebig kombiniert werden können, auch Kurzschreibweisen sind möglich, auf die wir später im Artikel eingehen. Standardmäßig ist contain auf none gesetzt.
contain: layout;
contain: paint
contain: size;
contain: style;Was bewirken die einzelnen Werte?
layout
Der Wert layout auf einer Komponente gibt an, dass diese Komponente inkl. ihrer Kind-Elemente unabhängig vom restlichen Layout der Seite ist. Das Layout wird nicht von außen beeinflusst und der Inhalt hat keinen Einfluss auf die Vorgänger dieser Komponente.
Nachfolgende Elemente können insofern beeinflusst sein, dass der Inhalt der Komponente die Größe der Eltern-Komponente verändert und somit nachfolgende Elemente nach unten schiebt.
Bei einem modernen Website-Aufbau in Form von einzelnen, in sich abgeschlossenen Komponenten können die einzelnen Komponenten den Wert layout erhalten.
paint
Die Angabe des Werts paint kann grundsätzlich mit der CSS-Angabe overflow: hidden verglichen bzw. zu ihr ergänzt werden. Kind-Elemente, die außerhalb der Eltern-Komponente liegen, werden nicht angezeigt und müssen nicht vom Browser gerendert werden.
size
Hat eine Komponente die contain-Eigenschaft size, wird die Komponente gerendert, ohne deren Kind-Elemente zu berücksichtigen. Die Komponente wird somit behandelt als wäre sie leer.
Diese Option ist vor allem dann ratsam, wenn die Komponente feste Größenangaben hat, beispielsweise bei einem Werbebanner.
style *
Mit Hilfe von style können globale Einstellungen wie »Counter« und »Quotes« in einzelnen Komponenten isoliert werden, sodass ihre Angabe innerhalb der Komponente keinen Einfluss auf andere Elemente hat.
* zum Zeitpunkt der Veröffentlichung dieses Artikels, wird dieser Wert von Firefox nicht unterstützt. Grundsätzlich gibt es bei diesem Wert Unstimmigkeiten, da sein Einsatz sehr begrenzt ist und nicht wirklich Einfluss auf die Performance mit sich bringt.
Werte kombinieren und Kurzschreibweisen von contain
Die verschiedenen Werte können beliebig kombiniert werden. Somit können dem Browser mehrere wichtige Informationen mitgegeben werden, was er beachten muss und wo er Dinge ignorieren kann um die Elemente schneller zu rendern.
contain: layout paint size style;
contain: layout paint size;
contain: layout paint;
contain: layout size;Für die Kombination layout paint size und layout paint gibt es eigene Werte, die hier als Kurzschreibweise gesehen werden können. Die Werte heißen strict und content.
contain: strict; // entspricht »layout paint size«
contain: content; // entspricht »layout paint«Browser Support
Den exakten Browsersupport für die CSS-Eigenschaft contain entnehmt ihr bitte der Website caniuse.com
Geschrieben von:
Robert Menzel
Klasse, ich betreibe ein Blog welches sich mit Katzen beschäftigt. Hab‘ so 20/30 Besucher pro Tag, manchmal auch in der Woche. Ich setz mich gleich mal dran und ändere das CSS, damit die Inhalte noch schneller ausgeliefert werden können und niemand warten muß. Das könnte mich schließlich Besucher kosten.
Von was reden wir hier eigentlich?
Reden wir über die Performance meines Blogs oder über die Performance von „reddit“ oder „youtube“ oder über den Bastler, der im Keller seines Familienhauses in Bad Tölz einen eigenen Server hinter einer DSL Leitung betreibt? Ich bin sicher, meine hardware liefert pro Sekunde mehr Inhalte aus als es „reddit“ und Co. jemals könnten. Wen ich diese Performance weiter steigern will, dann denke ich über noch bessere Hardware nach, eine bessere „Leitung“ oder ich führe das „cachen“ ein oder sonstwas, aber nicht indem ich das css dope.
Aktuell wird mein WordPress gesteuertes Blog gefühlt genauso schnell ausgeliefert wie das Blog von „fefe“. Reicht das nicht?
Ich denke, der Author dieses Artikels hat nur vergessen etwas über die Einsatzszenarien dieses neuen CSS zu schreiben. Sorry, aber ich kann das mit dem „schneller schneller und noch schneller“ nicht mehr lesen. Vor 20 Jahren wäre das anders gewesen, aber nicht mehr im Heute mit der heute verfügbaren Hardware. Das ist einfach nur noch lächerlich!
Jörg
Hallo Jörg, vielen Dank für deinen Kommentar, aber warum so verärgert? Niemand zwingt dich entsprechende Anpassungen am CSS-Code vorzunehmen.
CSS Contain dient in erster Linie der Optimierung von professionellen Websites mit klaren Marketing- und Wirtschafts-Zielen. Bei diesen Projekten darfst du davon ausgehen, dass bereits schnelle Server im Einsatz sind und Standards wie Caching ebenfalls umgesetzt sind.
Doch auch wer kleine, private Projekte entwickelt, legt häufig Wert auf handwerklich erstklassig gebaute Websites und möchte eine positive Bewertung durch Lighthouse und Co. erhalten. Ein klar definiertes Einsatzszenario gibt es daher nicht.
Die von dir geschilderten Beispiele (Bastler vs. YouTube) sind mir zu schwarz/weiß. Diese Website hier profitiert beispielsweise deutlich von Contain. Auch deine Einschätzung, dass mit schneller Hardware und guter Anbindung solche Techniken überflüssig sind, teile ich nicht. Das entspricht weder der Realität noch dem heute üblichen universellen Design-Ansatz.