Veröffentlicht: 30. Oktober 2024
Die Einführung von Interaction to Next Paint (INP) als Core Web Vital-Messwert Anfang 2024 hat das Interesse an der Renderingleistung geweckt. Ein Teil des INP konzentriert sich darauf, wie lange der Browser benötigt, um den nächsten Frame zu zeichnen, nachdem ein Nutzer eine Interaktion mit der Seite gestartet hat. Wenn Sie den INP Ihrer Website niedrig halten, haben Nutzer das Gefühl, dass die Website so schnell und reibungslos wie möglich auf ihre Interaktionen reagiert.
Wichtig ist auch die Rendering-Arbeit, die während des Ladens einer Seite ausgeführt werden muss. Dies kann Interaktionen von Anfang an verzögern. Es lohnt sich, nach Möglichkeiten zu suchen, den Arbeitsaufwand in diesem wichtigen Teil des Seitenlebenszyklus zu reduzieren. Die CSS-Eigenschaft content-visibility ist eine Möglichkeit, dies zu erreichen. Wir freuen uns, Ihnen mitteilen zu können, dass sie seit September 2024 als neuer Standard verfügbar ist.
content-visibility ist eine CSS-Eigenschaft, die dem User-Agent mitteilt, das Rendern von Elementen so lange zu verschieben, bis sie sich dem Viewport nähern. Bei Seiten mit vielen DOM-Elementen kann dies von Vorteil sein, da beim ersten Laden einer Seite weniger Rendering-Arbeit anfällt. Stattdessen wird die Arbeit genau dann ausgeführt, wenn der Nutzer sie sehen muss.
content-visibility: auto auf gechunkte Inhaltsbereiche zu einer 7-fachen Steigerung der Renderingleistung beim ersten Laden. Lesen Sie weiter, um zusätzliche Informationen zu erhalten!
Wenn Sie diese Optimierung für Elemente außerhalb des sichtbaren Bereichs aktivieren möchten, wenden Sie die Regel content-visibility: auto im CSS Ihrer Website auf sie an:
.render-me-later {
content-visibility: auto;
}
content-visibility verwendet einige der Verhaltensweisen, die für die Eigenschaft contain in CSS-Begrenzung definiert sind. Das Ziel der Begrenzung durch CSS besteht darin, Teile des DOM-Baums zu isolieren. So können Renderingvorgänge auf einen bestimmten Teil des DOM-Baums beschränkt werden, sodass das Layout nur für einen Teil des DOM-Baums ungültig gemacht und neu erstellt wird. Wenn Sie diese Funktion für die Renderingleistung verwenden möchten, müssen Sie sich mit den verschiedenen Werten der Property contain und ihrer effektiven Verwendung vertraut machen.
Wenn content-visibility: auto auf Elemente angewendet wird, übernehmen sie automatisch einige der Eigenschaften, die von der Property contain bereitgestellt werden. Die betroffenen Elemente werden dann anfangs mit einer Höhe von 0px gerendert, was bedeutet, dass sie nicht gerendert werden.
Dies hat jedoch einige Nebenwirkungen. So kann sich die Bildlaufleiste der Seite beispielsweise verschieben und ihre Höhe ändern, wenn ein Nutzer zu zuvor nicht gerenderten Elementen scrollt, die genau rechtzeitig gerendert werden, damit der Nutzer sie sehen kann. Wenden Sie das Attribut contain-intrinsic-size an, um dieses Problem zu umgehen.
Da content-visibility vor Kurzem Baseline Newly verfügbar ist, haben Sie möglicherweise Bedenken im Hinblick auf Nutzer, deren Browser noch nicht aktualisiert wurden und die neue Eigenschaft verwenden. Da content-visibility eine CSS-Property ist, sollten Sie sich keine allzu großen Sorgen machen. Browser, die es verstehen, verwenden es, und solche, die es nicht verstehen, tun es nicht. Das bedeutet, dass Sie abgesehen von den Leistungsvorteilen von Browsern, die content-visibility unterstützen, damit rechnen können, dass die Funktionsweise von Seiten weitgehend gleich bleibt.
content-visibility bietet einen zusätzlichen Vorteil. Wenn Sie damit die Rendering-Arbeit beim Laden der Seite reduzieren können, sollten Sie es verwenden, damit Ihren Seiten so viel Rechenleistung wie möglich zur Verfügung steht, wenn sie am dringendsten benötigt wird. Da diese nützliche Funktion jetzt als Baseline Newly verfügbar ist, sollten Sie sie verwenden, damit Nutzer von den Rendering-Arbeiten profitieren können, die damit bis zur Notwendigkeit vermieden werden.