Rarely can you increase your PageSpeed with a single line of CSS. Today, though, I will share two separate CSS lines of code that will improve pagespeed and performance.
Content-visibility
The first optimization is content-visibility
, a relatively new CSS property. It's like display: none
on steroids.
CSS display: none
So, let's first start with display: none
. If you're familiar with CSS, you likely already know about this property. With this CSS property, the element and its inner contents will be hidden. No surprises there. However, those elements will still be rendered by browsers, despite being invisible. And that takes up time and CPU that could actually be spent on other tasks. Maybe even tasks that are more important when it comes to perceived performance and real UX.
As a matter of fact, even images that were set to display:none
will still be downloaded.
Prevent rendering, improve performance
With content-visibility: hidden
, Chromium browsers will spend their (main thread) time on other tasks, leading to a better First Contentful Paint. Other metrics could benefit as well.
Also, images that have the content-visibility property set to "hidden" or are a child element of an element with this property won't be downloaded.
Filter property
Another CSS property that could save a bit of time is the filter
property. This one will be a bit more indirect though, so hear me out:
Inlined SVG logo's
Inlining SVG logos isn't uncommon. This is often done to prevent wasting an additional resource and speed up the moment when the logo is being displayed.. Although I actually wouldn't advice to lazyload your logo, inlining it may be the other side of the medal. For the simple reason that your logo will then be re-downloaded at each pagehit, preventing users from benefiting from browser caching.
See the screenshot below of the (truncated) contents of an SVG, that will become part of your HTML when inlining it:
However, sometimes you want to animate your logo, for example by changing the styling of specific components (or paths, as we're talking about SVG images). A different fill
-color when users start to scroll, or animate from dark to white logo when a user switches from light to dark mode.
Prevent the need of inlining with CSS filter
That's actually where the CSS filter
property could come in. I've used it on a few sites already and it's working like a charm.
Instead of inlining the image, be sure to use a regular image element:
<img src="logo.svg" alt="company logo">
And then, to switch colors on scrolling, or when a user toggles from light to dark mode, just use the following:
filter:invert(1)
- to turn a black logo into a white one (or the other way around).
filter: brightness(20)
- to change a colored logo into a white one.
That's it! By using this, you're allowing browsers to benefit from browser caching. Also, because some SVG logos can get quite big, you shrunk the HTML size and sped up the time it takes to download the content.
Caveat
There's one catch: if you want to do more complicated animations than just changing colors (such as changing the opacity
of specific paths of your SVG), then this solution might not work.
Conclusion
It sometimes takes a bit of creativity to improve performance with non-standard optimizations. I haven't used the CSS filter
property that much yet, but I ran into an article while also working on an international website. While still looking for the little wins and inlining the logo on this website, I actually came up with this solution.