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

Jhey Tompkins
InstructorJhey Tompkins
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

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.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today