How to speed up the initial rendering of a web page
Do you know that the bounce rate increases dramatically if the page load time exceeds 3 seconds?
If you don’t believe me, look at the following chart.
Thus, if your page starts rendering after 5 seconds, you lose up to 40 % of visitors! Unpleasant, isn’t it?
How to solve this problem
One of the effective ways is inlining critical CSS.
Critical CSS — styles that are used above the fold.
Inlining critical CSS allows you to speed up First Contentful Paint.
How to receive critical CSS
There are two ways: manually and automatically.
First way is very difficult and requires a lot of time, so we will consider the second one.
There are a large number of different npm packages:
Thus, the actual problem is the right choice of library.
Comparison of popular libraries
To compare different packages, we need a demo.
Our input files:
index.html — 15.8 KB, 456 dom nodes.
main.css — 17.4 KB, contains CSS Grid, font-faces, base64 inlined icons.
1. Critical
_________________
Execution time: 4.7 s
Inlined: 16.4 KB
Auto extracting: true
Result: incorrect
2. Critical-css-inliner
_________________
Execution time: 7.4 s
Inlined: 15.8 KB
Auto extracting: true
Result: correct
3. Penthouse
_________________
Execution time: 3.5 s
Inlined: 4.7 KB
Auto extracting: false
Result: incorrect
4. Critters
_________________
Execution time: 3.5 s
Inlined: 15.2 KB
Auto extracting: false
Result: correct
Result
Critical removes several important styles and media-queries, so the result is incorrect. But this plugin has a lot of options and optimal execution time.
Critical-css-inliner has a maximum execution time compared to other plugins, but the result was as expected. It also has a build-in auto-extracting feature.
Penthouse has a minimum inlined CSS and execution time. But if there are several problems while downloading external stylesheets, the result can be disappointing.
Critters is a fast and lightweight webpack plugin with lots of different options, so it has a minimal execution time and optimal critical CSS size.
Real use results
Input information to estimate the duration of the initial page rendering:
Site: https://abvcss.github.io/abvcss-website/
Plugin: Critical-css-inliner
Before inlining critical CSS:
After inlining critical CSS:
Thus, as we can see, the web page started rendering 2 seconds faster!
It happened because we no longer have render blocking CSS.
Tip
Inlining critical CSS is most effective on landing pages and mobile versions!
Thank you for reading! It will be grate if you share this article with your friends)
