Content-Visibility Example and Real World Test

Published: 9 months ago

In this quick test, we tested the impact of applying content-visibility to a real-world web page. This is a relatively new CSS property that improves the loading time of your page by omitting off screen content from the initial rendering of your site.

Google states that it “enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content.”

To run this real world test of content-visibility, we took an existing web page, tested it using GT metrics, took screenshots of the results, then when an implied the content-visibility property, retested it in GT metrics, and then compared the two sets of data. First, let's discuss a content-visibility example. This is the CSS property that was used to apply this effect to our website.

Both tests were using Chrome (Desktop) 86.0.4240.193, Lighthouse 6.3.0.

Content-Visibility Example

This code was integrated using the simple snippet:

section {
   content-visibility: auto;
   contain-intrinsic-size: 1000px;
 }

It was added to the main stylesheet of our WordPress website. Here’s some information on the homepage that was tested:

The web page is a fairly heavy homepage for a fashion ecommerce website. There are dozens of images totaling in 1.3 MBs of weight, many fonts, and complex functionalities.

We already optimized the page by using the built in caching and CDN offered by our lightning-quick host, Rocket.net, and used WPRocket for caching. Images were optimized and served as WEBP by EWWW (on site, then the copies were delivered by the Rocket.net CDN).

The page still needs heavy optimization efforts in regards to merging files, compressing several images further, and focusing on the fonts (they need to be converted to Woff to make them quicker and more lightweight).

If you need an example to copy, the one mentioned above is pretty universal, as many websites use large section chunks to split up their pages. Simply copy and paste that into the stylesheet of your website. If you want to learn more about how the content-visibility property works, be sure to read our explainer article on it.

Without Content-Visibility Auto

The initial test of the page showed that our partially optimized website loaded relatively quickly. It had a performance rating of 79%, netting a total GT metrics grade of B, a first contentful paint of 331 milliseconds, a speed index of 1.2 seconds, and a time to interactive of 1.3 seconds. Essentially, it's a fast loading website that could be made to load even faster by implementing the content visibility property.

With Content-Visibility Auto

When implementing the Content-Visibility property, page performance increased noticeably. The overall GT metrics grade increased to an A, as the performance rating went to 88% and the structure remained the same at 93%. Page details remained the same, meaning that the only thing changed with this report was the addition of the content visibility property.

The FCP actually increased around 40 milliseconds to 358 milliseconds, while the time to interactive was 1.3 seconds.

The major development was in the speed index, which collapsed to 0.8 seconds from 1.2s. LCP also improved slightly, from 1.3s to 1.2s.

We ran this test multiple times to ensure that there were no outliers in the data. The data above is a good representation of the three tests that we ran, and clearly shows that the new content visibility property resulted in an increase of performance on our already optimized website. The most impressive part about this is that it is a simple 2 lines of code which can be added to any stylesheet.

Content visibility is not supported by Firefox, but it is supported by Chrome version 86. We made sure to test the website using Chrome version 86 in GT metrics. If you are applying this property and the browser does not support it, simply nothing will happen. Therefore, the addition of this property is an absolute no brainer if you would like to increase the performance of any website. This goes from the simplest of landing pages to massive content sites.

It's also especially true if you use WordPress due to the simplicity of integration, and performance benefits.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram