isotropic-2022
Share
Blog
Search
Menu

Content-Visibility Example and Real World Test

By James LePage
 on December 23, 2020
Last modified on January 6th, 2022

Content-Visibility Example and Real World Test

By James LePage
 on December 23, 2020
Last modified on January 6th, 2022

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:

<code>section { content-visibility: auto; contain-intrinsic-size: 1000px; }</code>
Code language: HTML, XML (xml)

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.

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram