What is critical CSS in Magento 2?
In Magento 2, Critical CSS is a technique that extracts the CSS for above-the-fold(without scrolling down) to render content to the user as fast as possible.
In easy words, whatever we see on a website without scrolling is Critical CSS.
Let’s say you have a complicated webpage with numerous CSS files.
The home page will not be rendered until all of those CSS files are loaded, therefore we can create a critical CSS file that has all of the styles required to generate the basic structure of the home page.
As a result, the homepage will be shown, and all non-critical CSS files will be loaded asynchronously.
Use of critical CSS in Magento 2
Before showing a page, a browser needs to download and parse CSS files, which makes CSS a rendering-blocking resource.
If CSS files are large or network conditions are poor, CSS file requests can considerably increase the time it takes for a web page to render.
Using inlined critical CSS in the head increases rendering speed and performance, especially in poor network conditions.
All non-critical styles will load asynchronously, allowing us to drastically reduce the time it takes to render our websites for the first time.
How to enable Critical CSS?
1. Using Admin Panel
To enable Critical CSS from the admin panel, navigate.
Stores > Settings > Configuration > ADVANCED > Developer tab > CSS Settings
Note: In production mode, the Developer Tab is disabled, in that case, you must enable it from the command line (CLI).
2. Using Command Line(CLI)
To enable critical CSS via the Command Line, type the following command:
php bin/magento config:set dev/css/use_css_critical_path 1
Note: Please ensure your theme contains a critical.css file whereas the other non-critical path will load asynchronously.
How to set up Critical CSS?
The ‘critical’ CSS file should be located in,
app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/critical.css
The default Luma theme critical CSS file is located in,
app/design/frontend/Magento/luma/web/css/critical.css
The critical CSS file path can also be configured in
app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout/default_head_block.xml
That’s all you need to do. I hope this helps.
Reference: Magento DevDocs CSS Critical Path
You can also check our other related blogs
How to remove JS and CSS in Magento 2 using layout XML
Be the first to comment.