Use content-visibility: auto to Improve Initial Page Load Time

InstructorJhey Tompkins

Share this video with your friends

Send Tweet

In this lesson, we look at how you can use content-visibility: auto to significantly improve page load performance by applying it to section elements. The property tells the browser to skip rendering an element if it is off-screen and below the fold on the initial load.

This can introduce some scroll jumping which we walk through how to combat with contain-intrinsic-size.

• Read more about content-visibility and contain-intrinsic-size here: https://web.dev/content-visibility/