Erst vor wenigen Tagen habe ich über die Web Vitals-Initiative von Google geschrieben, die sich auf wichtige, reale Indikatoren für die Geschwindigkeit von Websites konzentriert. Wenn Sie Ihre Core Web Vitals verbessern wollen oder wenn Ihre Website auch lange nach dem Laden einfach nur „matschig“ ist, dann sollten Sie wissen, dass eine neue Sache gerade zum Webstandard geworden ist: CSS Containment.
Mit CSS Containment wird eine neue Eigenschaft in die Stylesheet-Sprache eingeführt: contain. Sein Zweck ist es, das gekennzeichnete Element und seine Nachkommen vom Rest des DOM-Baums zu trennen.
Der auf diese Weise gekennzeichnete Teil der Website wird in gewisser Weise unabhängig von den anderen Elementen. Wenn der Browser verschiedene Änderungen an den Baumelementen vornimmt, muss er die Änderungen am Erscheinungsbild der gesamten Website nicht neu berechnen. Dadurch werden die Ressourcen des Browsers (und damit auch des Roboters) erheblich geschont und die Rendering-Zeiten können verkürzt werden.
Wann können CSS-Inhalte dazu beitragen, eine Website schneller zu machen? Wenn während und nach dem Ladevorgang verschiedene Änderungen daran vorgenommen werden:
- Schriftartwechsel
- Ändern der Größe des Browserfensters
- Anhängen oder Entfernen von Stilvorlagen
- Änderungen am Inhalt, selbst etwas so Banales wie das Ausfüllen eines Formularfeldes durch den Benutzer
- mit Hilfe von CSS-Pseudoklassen (z. B. wenn man mit der Maus über ein :hover-Element fährt)
- Scripting-Manipulation von Klassen und Attributen
Dies gilt für praktisch alle modernen Websites, obwohl die Verwendung von CSS natürlich nicht für jeden einen messbaren Unterschied macht.
Die CSS-Eigenschaft contain kann eine Vielzahl von Werten annehmen, die miteinander kombiniert werden können:
contain: size;
Zeigt an, dass das Element skaliert werden kann, ohne die Größe des Inhalts zu überprüfen.
contain: layout;
Es schafft einen unabhängigen Formatierungskontext, nichts von außen beeinflusst das Aussehen des Elements und umgekehrt.
contain: paint;
Sorgt dafür, dass der Inhalt nicht außerhalb des Elements angezeigt wird; wenn der Inhalt außerhalb des Elements liegt, wird er unsichtbar.
contain: strict;
Abkürzung entsprechend enthalten: Größe Layout Farbe;
contain: content;
Die Abkürzung entspricht dem Inhalt: Layoutfarbe;
Wenn Sie Zweifel haben, ob CSS Containment Ihnen in irgendeiner Weise helfen kann, lautet die Antwort wie immer: Es kommt darauf an.
Einerseits ist die CSS-Eingrenzung ein Spaß für Optimierungsfreaks, deren Ergebnisse manchmal Millisekunden an Verbesserungen bringen.
Auf der anderen Seite haben Websites mit einer großen Anzahl von Widgets und Informationsboxen hier viel mehr zu gewinnen.
