DEV Community

Cover image for Content-visibility: Boost Amazon product grid (or any long grid) performance with one CSS property
Dmitrii Nefedov
Dmitrii Nefedov

Posted on

Content-visibility: Boost Amazon product grid (or any long grid) performance with one CSS property

#webdev #frontend #css #webperf

Hi everyone!

Today I want to show you a small rendering optimization that can be useful for long pages — especially if you have something like a product grid: many complex but similar blocks on a page, and most of them are not visible at first (you need to scroll).

This trick is small, but very cheap — it takes only a few seconds to apply, and your page can render a bit faster.

What are we talking about?

We will talk about a CSS property called content-visibility.

In short:

content-visibility tells the browser not to render elements that are outside the viewport until they are needed (for example, when the user scrolls to them). It’s like a simple “render lazy-loading” for layout and paint.
This property is usually used together with contain-intrinsic-size to indicate the expected size of a block to the browser. This property allows the browser to defer rendering content that is not currently visible on the screen.

I first learned about it from an article on web.dev a few years ago, and I thought it was awesome!
At that time, I worked for a big e-commerce company with a heavy product grid.
We were always working on performance improvements, because many studies show that page loading and rendering speed have a direct impact on conversion rates — and conversions mean real money and company reputation.

P.S. I don’t pretend to reveal something new — I just want to remind the community that this property exists, and it’s super easy to use

What I did

Just a few simple steps

  1. Opened an Amazon search page, for example: https://www.amazon.com/s?k=Nike

  2. Measured performance — focusing on painting and rendering

First try

Second try

Third try

  1. Overwrote one CSS rule and added two properties: 
..s-result-item  {
  content-visibility: auto;
  contain-intrinsic-size: 250px 600px; // This is exact size for every grid item on my screen
}
Enter fullscreen mode Exit fullscreen mode
  1. Ran the performance test again.

Optimization first try

Optimization second try

Optimization third try

That’s it!

Results (depending on the device and browser)

Rendering became about ~15% faster.
Painting became about ~27% faster.

No magic — the browser just doesn’t render what is not visible yet.

Conclusion

If you have a long page with many repeated blocks — try using content-visibility.
It takes only seconds, but the performance win can be noticeable.

P.S.Thanks everyone for reading! If this article was useful for you, or just like content about speeding up web applications, leave a reaction or a comment — I’ll make sure to share more posts on this topic!

Top comments (0)