In this article, we are going to be discussing how to easily go about drastically improving your website (or page) speed with just a few lines of CSS declaration, maybe a single line.
You are about to learn about using the power of CSS at its best to make your website faster! The web is becoming easier to access, and vendors are now taking more time to utilize their browsers to make development an easier thing to do. As the web world is getting more concerned about speed and accessibility, the web development bodies and browser vendors are getting to realize how good it would be, taking up the large part of page speed optimization to themselves, and leaving out little to the code writers (you).
Let's get to it!
Optimize Your Fonts
In the programming world, there used to be a term 'Asynchronous Programming' — sorry if you are not part of the programmers — but what this means is a way to perform an action 'A' in a non-blocking manner, by moving on with the next tasks and returning the result of 'A' whenever it is ready in the future. This makes a mission faster to accomplish, no action is waiting for another. This has been a great game-changer in the programming fields and all programming languages have mostly adopted it.
It's time for you to do that also the CSS way. But before then, let's talk about the side effects of loading external fonts first.
It's no news that loading fonts in your web page blocks rendering, font attributes like weight, point sizes all contribute to the byte size of a font, such that Google Fonts had a way of notifying you about how your fonts could affect your speed when selecting a font.
However, not until Google Fonts warns, every attempt to load a font to your website:
- Makes request to the font server (if the font is not on the same server as your website): here the server's response time matters.
- Downloads the font: here the font byte size (KB) matters, likewise the server's response time.
Your web page font is properly rendered only when the listed processes above are completed. This does not sound threatening, but what about when:
- The font byte size is large
- The server response time is slow
- Or the user is on low-end mobile devices and the internet is slow?
These are cracks in the wall for your tender website.
How to Fix
Fortunately, you can fix this with the CSS font-display property. Just place it in your @font-face definition.
In my own case:
@font-face {
font-family: 'CustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustom.woff') format('woff');
font-display: swap;
}
There are more values to the font-display property to misc the font rendering settings.
Font Display for Google Fonts
If you are using Google Fonts, it has made it a lot easier to set your font display, using a param on the import URL: display=swap
Example URL
Render the Contents that can be Seen First
The CSS content-visibility property will be changing the way website speed can be positively improved surprisingly with CSS.
This can be likened to the novel lazy loading idea. Critical CSS has its own pain because it requires that you understand the styles that will be needed first, which cannot be so easy as mentioned, it requires some real-time analysis to get it right. Critical CSS also requires that you use some JavaScript codes, not everyone is always in a good mood writing JavaScript.
Luckily, content-visibility is come to rescue.
How It Works?
content-visibility lets the browser skip an element's rendering, this rendering patterns includes the web page’s layout and painting, until the user scrolls to it. This saves a reasonable amount of your page load time, especially when a longer portion of your content is below-the-fold. The content-visibility property makes the initial user load much faster. This makes the interaction and response of the web page swifter.
What happens when a page is loaded with content visibility enabled:
- The browser loads render and paint only the elements above the fold.
- The rest of the contents that are below the fold are rendered and painted as the user scrolls it to the viewport.
To use the content-visibility property, just place it in the outermost parent element that contains the rendering. In my own case:
body {
content-visibility: auto;
}
That's it!
Considering the Element Initial Height
Because the rendering results of the content might want to affect the size of the element, such as scrollbar shifting when the element is fully rendered, it is good that the natural size of the element is first set with the contain-intrinsic-size property. This should be an estimate of the prospective size (height and width) of the element when rendered.
Example:
body {
content-visibility: auto;
contain-intrinsic-size: 500px;
}
The content-visibility the property provides more values to leverage this feature, you can read the Web.dev's post.
Browser Support?
The content-visibility property is only supported on Chromium 85 as at this writing, Firefox is also currently talking about it.
Bonus: Lazy Load Images and iframes Natively (The HTML Way)
I have labeled this as a bonus, not because it is the least practice, but because it is not a CSS approach. Image and iframe lazy loading play an important role in page speed optimization.
"Image lazy loading" is not a new phrase in the web development world, but this was long ago done with snippets of JavaScript, until recently. We can now lazy load our images and iframes using loading="lazy".
Simple right? Yes, you are right! It's as simple that.
A typical example:
<img src="beautify.jpg" loading="lazy" />
For iframes:
<iframe src="external.html" loading="lazy" />
Conclusion
Page speed and interaction optimization with CSS is only one part of page speed optimization. There are still other factors to consider when optimizing your website page load time and user interaction. This does not only satisfy your users but also lets you earn a big win in SEO. We hope that CSS continues to give in more features to contribute to this aspect of the web.
Please leave your comments below about what you feel about this post. Thanks for reading this, bye for now!
