I made my website 28ms faster with content-visibility 🤓

You might think, what is 28ms? If you are a big advocate of speeding up the web and getting perfect scores on Eleventy's speedlify dashboard, it's a lot!

Not that I was doing bad, as you can see in the screenshot below. I just wanted to get full 100's and get the full potential out of my website.

Speedlify score Daily Dev Tips

Making use of content-visibility

I read about this CSS property a while ago. But never got round to implementing and testing it. That is until today, so let's see what it actually does.

The content-visibility has three values we can use:

  • visible (no effect, basically how it was before)
  • hidden (a mix between display: none and visibility: hidden, it starts on display hidden, afterwords becomes visibility hidden)
  • auto (This is the one we are looking at. It will only render this element once the browser needs it!)

So how can we add it to elements?

.element {
    content-visibility: auto;
}

I've added this on my homepage to the article-list and footer elements.

Before content-visibility

To give you a better understanding, I did a lighthouse test before these changes.

Before content-visibility

But more important is the actual trace where we can check the total time.

Lighthouse trace

After adding content-visibility

And then, after adding the content-visibility to those two elements, I've rerun the test.

Before content-visibility

And the trace:

Lighthouse trace

That means it was 443ms and is now 415ms, which means + 28ms win!

Conclusion: There is no downside to not adding the auto one. It can only benefit your website, even the small numbers matter.

Making sub-pages faster

I even added my content-visibility on the post pages, where the main content is set to auto.

The following screenshot is a before rendering:

Before content-visibility

And this is the after rendering:

After content-visibility

As you can see, it improved my score overall. And adding content-visibility made the Time to Interactive 1.1s faster.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Peter Thaleikis's photo

Nice :) Good write up 🙌️

Chris Bongers's photo

Thank you Peter! Glad you like it 🔥

Tapas Adhikary's photo

Chris, I loved reading the journey.. Good one!

Chris Bongers's photo

Thanks Tapas, Glad you liked it! 🔥

Vamsi Rao's photo

Great Article! You have been publishing articles every day without any drop in quality 🔥. I'd love to read an article on your process, tools, and planning you do for such consistency :)

Chris Bongers's photo

Wow Vamsi, This is so cool to read, thank you!

I am actually planning on writing that, but kind of finding a good structure for it.

I'm close to 200 articles, and likely it will be somewhere around there.

Vamsi Rao's photo

Oh awesome, can't wait to read!

Edidiong Asikpo's photo

Ah. Thanks for sharing this Chris.

Chris Bongers's photo

Your welcome, glad you like it