CSS Tips and Tricks
Use content-visibility: auto to Improve Initial Page Load Time
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/
Jhey Tompkins: [0:00] Start by profiling the render performance for the page. Looking at the summary panel, we can see that 583 ms were used for rendering our page. If we inspect the markup for our page, we may be able to spot opportunities where we can use content-visibility: auto.
[0:15] On our page, we can see that the content is split over many section elements. Let's try section { content-visibility: auto; }. Then we can reprofile our page, and wow. Notice how our rendering time has dropped from 583 ms to 6 ms.
[0:37] That's because content-visibility: auto applied to our section elements tells the browser to only worry about rendering the section elements who appear above the fold on initial load. However, if we scroll the content, you can see that the scroll bar is jumping. This is because all of our sections assume a height of until they're rendered.
[1:02] To combat this, we can use contain-intrinsic-size. For our example, let's set this to 1000px. Reload the page. Now, as we scroll, we see less of a scrollbar jump. This is because contain-intrinsic-size tells the browser what the placeholder or natural size of our section elements will be.
[1:26] That means our scrollbar will jump around less. That is because the browser will think that our section elements are around 1000px and then recalculate their size depending on their content from 1000px instead of 0px.
[1:41] In review, the content-visibility property has the potential to significantly reduce page load times and improve performance. Use content-visibility with the value auto to skip the rendering of an element when it is off-screen or below the fold.
[1:56] To combat scroll jumping, use the property contain-intrinsic-size, with a value that you feel is appropriate and matches up roughly to the element size that you're skipping the rendering of.