Du hast bestimmt auch schon Mal einen Werbeslogan gelesen, der so ähnlich klingt. Häufig steckt hinter diesen Schlagzeilen aber auch nicht mehr und sie werden zurecht komplett ignoriert. Im Gegensatz dazu wurde auf das heutige Thema, content-visibility, bei uns geradezu mit Aufmerksamkeit überschüttet und ausführlich diskutiert.
Dabei handelt es sich um eine CSS-Property, die eigentlich schon seit der Mitte letzten Jahres im Spiel ist. Mit ihr lässt sich das Rendering für ein HTML-Element und alle seine Kinder steuern. Setzt man nun im CSS für eine ID oder Klasse die CSS-Property content-visibility: auto hat man quasi Lazy Rendering für dieses DOM-Element. Für Elemente die sich nicht im initialen Viewport befinden wird noch die größe des Elements bestimmt, aber sonst nichts. Das ganze lässt sich natürlich wie alle anderen CSS-Properties noch mit Media Queries verbinden um diesen Effekt für verschiedene Displaygrößen und Gerätetypen unterschiedlich steuern zu können.
Layout, Styling und Painting werden erst dann ausgeführt, wenn der Viewport sich besagtem Element nähert. Im WebDev-Beispiel wird im Beispiel angepriesen, durch die Auszeichnung einiger Content-Blöcke mit content-visibility: auto die Rendering Dauer auf ein Siebtel des ursprünglichen Wertes reduziert zu haben. Da sind wir direkt hellhörig geworden, wobei dort natürlich gleich einige große Bilder dabei waren.
In unserem eigenen Test auf der Dir hoffentlich sehr gut vertrauten Newsletter-Seite konnten wir zwar nicht ganz so herausragende, aber trotzdem ansehnliche Ergebnisse erzielen (in der Simulation mit Chrome DevTools Local Overrides. Der Test mit Felddaten wartet noch darauf, dass CSS-König Justus wieder aus seinem Urlaub in den Palast zurückkehrt).
Durch das Auszeichnen der Anmelde-Box und des Archivs konnten die Rendering-Zeit immerhin halbiert und die Painting auf etwas weniger als ein Drittel reduziert werden. Zusammen ist eine Ersparnis von 172MS bei einer vorherigen Gesamtladezeit von 852MS, macht ~20%. Für eine Änderung, die man quasi per Copy and Paste in die gewünschten Elemente einpflegen kann gar nicht mal so übel.
Insbesondere vor dem Hintergrund von etlichen Websites, die auch heute noch gänzlich ohne Deferring oder mit veralteten JavaScript-Lösungen unterwegs sind, eine echte Goldgrube. Neben Rendering und Painting könnte eine Implementierung hier auch noch Scripting Zeit sparen.
Wie immer gilt: content-visibility: auto ist kein Allheilmittel. Aber auch kein Schlangenöl vom zwielichtigen fahrenden Händler. Ein Haken an der Sache: Von Firefox und Safari wir dieses Feature aktuell noch nicht unterstützt. Wenn Deine Seite aber am LCP krankt hilft es Chrome-Nutzern (und damit den Core Web Vital Felddaten) und Googlebot schon heute, und ist daher definitiv einen Test wert.
Codebeispiel:
.footer {\\
...
content-visibility: auto\\
...\\
}