Die Ladezeiten von Webseiten sind ein entscheidender Faktor für die Benutzererfahrung und das SEO-Ranking. Ein neues Tool in der Werkzeugkiste von Webentwicklern ist die CSS-Eigenschaft „content-visibility“. In diesem Artikel werfen wir einen genaueren Blick darauf und wie sie zur Performance-Steigerung genutzt werden kann.
Was ist “content-visibility”?
„Content-visibility“ ist eine fortschrittliche CSS-Eigenschaft, die entwickelt wurde, um die Rendering-Leistung von Webinhalten zu verbessern. Mit dieser Eigenschaft können Entwickler steuern, ob und wann ein Element und seine Inhalte gerendert werden.
Die wichtigsten Werte
- visible: Das Element wird wie gewohnt gerendert.
- hidden: Der Inhalt des Elements wird überhaupt nicht gerendert, vergleichbar mit
display: none;. - auto: Hier optimiert der Browser den Rendering-Prozess, indem er nur den derzeit sichtbaren Inhalt rendert und den nicht sichtbaren Inhalt (beispielsweise außerhalb des Viewports) verzögert.
Das echte Juwel hier ist auto. Dieser Wert ermöglicht es dem Browser, den Rendering-Prozess von Inhalten, die momentan nicht im sichtbaren Bereich liegen, zu verzögern. Dadurch werden Ressourcen gespart und Webseiten können insbesondere bei großen Dokumenten deutlich schneller laden.
Ein praktisches Beispiel
Stellen Sie sich eine umfangreiche Webseite mit 100 Abschnitten vor. Normalerweise würde der Browser versuchen, jeden dieser Abschnitte sofort zu rendern. Mit „content-visibility“ kann der Browser jedoch nur die Abschnitte rendern, die aktuell sichtbar sind und den Rest bei Bedarf nachladen.
.offset {
content-visibility: auto;
contain-intrinsic-size: 1000px 0;
}
In obigem Beispiel wird content-visibility: auto; auf alle Elemente mit der Klasse „abschnitt“ angewendet. Der Wert contain-intrinsic-size gibt dem Browser dabei eine Schätzung der Größe des Elements, auch wenn es noch nicht gerendert wurde.
Schlussfolgerung
Die „content-visibility“-Eigenschaft bietet eine spannende Möglichkeit, die Performance von Webseiten zu steigern. Während die Implementierung recht einfach ist, kann sie bei richtiger Anwendung erhebliche Performance-Gewinne bringen, insbesondere für umfangreiche Webseiten. Es lohnt sich, mit dieser Eigenschaft zu experimentieren und die Benutzererfahrung sowie die Ladezeiten zu optimieren.
