Improve WordPress loading speed with CSS content-visibility property

Did you know that there is a powerful new CSS property that improves the loading of your pages? Oh no? Then let me introduce you to content-visibility .

This CSS property tells the browser to skip the styles, layout and page painting until it needs to.

What content-visibility does

Normally, the browser displays the entire page on load, that is, all the elements are painted on the screen and the layout is applied to them so that they look exactly as you would expect.

The content-visibility property does it differently. content-visibility causes all elements with the content-visibility :auto; style to be rendered only when they are needed.

They are displayed as the visitor scrolls down the page, just before the element is visible on the page. Until then, only the element’s dimensions are calculated and the element’s layout and styling, including all child elements, are omitted.

It’s a kind of lazy loading not only of images, but of entire blocks of content.

Looks good, doesn’t it? Let’s take a look at the advantages of content-visibility .

How to apply the content-visibility property

Well, content-visibility is a CSS property. A simple CSS declaration that allows you to set the visibility of the content of an HTML element in your pages.

Basically it is based on adding a code like this:

.myelement {
content-visibility: auto;
}Code language: CSS (css)

The content-visibility property has several possible values:

• hidden: The element omits its contents (similar to applying display: none;).
• visible: No effect is applied and the element is processed and displayed normally.
• auto: The element has design, style and content to display. The browser determines if the content is relevant to the user, and if it is not, then the browser omits it. At the same time, the element is still available to view, select and is fully accessible, and can be navigated to with tabs or by searching the page.

As I think you will have already clear, the most appropriate value to use is auto, because it combines both performance and accessibility features.

So, as I said before, you can think of content-visibility: auto; as a kind of deferred loading of all parts of the HTML document (DOM).

If an element is below the initially visible part and has the rule content-visibility: auto; as the browser ignores its content and skips the processing of that element.

As the user navigates to the element the browser will paint its content and it will be processed quickly to make it available.

The contain-intrinsic-size property

When a browser displays all the content of a page it knows the height needed to display it all (adding up the individual heights of each section of the page) and the scrolling will be natural and fluid for the user.

Now, when you apply content-visibility: auto; to a page element it treats it as if it had a height of 0 (assuming the height property is not previously defined).

So, when the user scrolls and the element appears visible, and the browser starts displaying it, the actual height is calculated and this causes a layout change in the page.

This scrolling can also make the page a bit jumpy, something known as Cumulative Layout Shift (CLS), something that is considered a big problem for search engine optimization, as Google now includes it in its Core Web Vitals metrics to measure the performance of a website.

The solution to these design leaps is combining content-visibility: auto; with contain-intrinsic-size, giving the browser a predictable height to use as a placeholder when viewing the element.

.mielemento {
content-visibility: auto;
contain-intrinsic-size: 877px; /* height of the element */
}Code language: CSS (css)

What contain-intrinsic-size does is act as a placeholder for content not yet processed.

This reduces scrolling and layout jumping problems.

So, if you know the exact height, you can use it as a value. Otherwise make an estimate.

When processing the section to which you have applied content-visibility: auto; , if the height you defined is not the actual height, there will be a small layout jump, but it will not be as pronounced as without the contain-intrinsic-size property.

How to know which element to apply the content-visibility property to

If you have understood the above, the only thing left is to determine to which element we are going to apply the content-visibility: auto; property and how to do it, right?

To know the CSS class of the element of your page to which to apply content-visibility: auto; you have to open the browser’s development console (you know, right click anywhere + inspect) and select the base content block of the page.

For example, in a blog, using the Astra theme, the element would be article, as you can see in the following screenshot:

On the front page of the blog the blocks of each post have the CSS article class. So my code to apply would be this:

.article {
 content-visibility: auto; 
}Code language: CSS (css)

And how do I know what height to apply to the contain-intrinsic-size property?

As you can also see in the above screenshot, in addition to the CSS class, the same browser inspector is already showing you that the main page of the blog is “broken” into uniform blocks of a height of 876.39 pixels, so we also already have the contain-intrinsic-size property.

That said, I already have the full CSS code to apply in my case, this one:

.article {
content-visibility: auto;
contain-intrinsic-size: 876.39px;
}Code language: CSS (css)

Where to add content-visibility and contain-intrinsic-size properties

Easy, in the “Additional CSS” section of the WordPress customizer, from Appearance → Customize → Additional CSS.

Just don’t use the example codes I’ve given you, you must find your elements to apply content-visibility: auto; and contain-intrinsic-size to on your website.

Do all browsers recognize these CSS properties?

Good question 🙂

Not yet all, but almost….

Safari – as usual – is lagging behind and does not yet recognize these CSS properties but Chrome, Firefox and Edge recognize and implement them perfectly in their latest versions, and will take advantage of these optimizations.

Is it worth applying the content-visibility property? Will it improve the speed of my website?

Well yes, and thank goodness. Imagine that I spend more than a week documenting myself to create this guide, making tests, captures, writing this and then it turns out that it is useless, that applying the property content-visibility: auto; is useless, it does not improve loading times or optimize pages.

Let’s see, I would have written it anyway, but the face you get is not the same.

I repeat, yes, applying the property content-visibility: auto; and the contain-intrinsic-size property appropriate to each type of page improves page load times, and quite a lot.

Here you have the before and after of applying it right here:

The difference is interesting. Calculating with a 3G connection from the Performance tool of the browser console, the relevant values look like this:

The difference is brutal in both rendering and page painting.

So yes, it is well worth applying the content-visibility: auto; property to your WordPress, it greatly improves the loading speed of your pages and the main web metrics in PageSpeed Insights.