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.
Making use of content-visibility permalink
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?
I've added this on my homepage to the article-list and footer elements.
Before content-visibility permalink
To give you a better understanding, I did a lighthouse test before these changes.
But more important is the actual trace where we can check the total time.
After adding content-visibility permalink
And then, after adding the content-visibility to those two elements, I've rerun the test.
And the 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 permalink
I even added my
content-visibility on the post pages, where the main content is set to
The following screenshot is a before rendering:
And this is the after rendering:
As you can see, it improved my score overall. And adding
content-visibility made the Time to Interactive 1.1s faster.