⚡ Every Web Developer should know what Critical CSS is and how to use it
Using critical CSS and defer non-critical CSS can boost your website's performance which is becoming more important!
👇 Learn how to extract critical CSS and defer non-critical CSS
Using critical CSS and defer non-critical CSS can boost your website's performance which is becoming more important!
👇 Learn how to extract critical CSS and defer non-critical CSS
▶️ What exactly is critical CSS?
Critical CSS is any CSS that is relevant for elements being displayed above the fold. Above the fold are all elements that are rendered within a user's viewport when visiting your website. Anything else is non-critical!
Critical CSS is any CSS that is relevant for elements being displayed above the fold. Above the fold are all elements that are rendered within a user's viewport when visiting your website. Anything else is non-critical!
▶️ How can you extract your critical CSS?
One of the easiest methods to get quickly started is by using an online tool.
There are plenty out there.
For our example, we will use sitelocity.com/critical-path-….
Just enter your domain, and generate your critical CSS in a second.
One of the easiest methods to get quickly started is by using an online tool.
There are plenty out there.
For our example, we will use sitelocity.com/critical-path-….
Just enter your domain, and generate your critical CSS in a second.
▶️ How should you load critical CSS?
Critical CSS should always be loaded at first.
Make sure to put it directly into your header and always inline it.
Loading it over a file will require a request which may slow the loading down!
Critical CSS should always be loaded at first.
Make sure to put it directly into your header and always inline it.
Loading it over a file will require a request which may slow the loading down!
▶️ How to load non-critical CSS?
We require to load it asynchronously.
You want to listen to the 'onload'-event and set the rel attribute to the stylesheet. This may look a bit ugly, but it is currently the best way.
Also, make sure to include a no-script version!
We require to load it asynchronously.
You want to listen to the 'onload'-event and set the rel attribute to the stylesheet. This may look a bit ugly, but it is currently the best way.
Also, make sure to include a no-script version!
▶️ What are the top 3 online critical CSS generators?
- sitelocity: sitelocity.com/critical-path-…
- pegasaas: pegasaas.com/critical-path-…
- Penthouse online: jonassebastianohlsson.com/criticalpathcs…
- sitelocity: sitelocity.com/critical-path-…
- pegasaas: pegasaas.com/critical-path-…
- Penthouse online: jonassebastianohlsson.com/criticalpathcs…
▶️ CI tools and automation
Some node modules can easily help you to automate the whole process.
The most(/well)-known packages are:
- Penthouse: github.com/pocketjoso/pen…
- critical: github.com/addyosmani/cri…
- criticalCSS: github.com/filamentgroup/…
Some node modules can easily help you to automate the whole process.
The most(/well)-known packages are:
- Penthouse: github.com/pocketjoso/pen…
- critical: github.com/addyosmani/cri…
- criticalCSS: github.com/filamentgroup/…
This is the second thread breaking down some methods to boost your website's performance with ease and no hassle. 🙌
Tomorrow I will post another thread with more insights into minimizing your CSS/JS. ⚡
Tomorrow I will post another thread with more insights into minimizing your CSS/JS. ⚡
✅ Done
If you found this useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
If you found this useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
• • •
Missing some Tweet in this thread? You can try to
force a refresh
