How NitroPack creates the critical CSS?
Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.
After that, it returns the generated critical CSS to our server to apply it to the corresponding page.
How to check if critical CSS is generated by NitroPack?
Checking if NitroPack actually generates critical CSS for your website is relatively easy:
1. Open the page you wish to see if NitroPack generated critical CSS for and check if NitroPack is serving cache for the page. More information about how to do that you can find in our article How to Check if NitroPack is Serving Optimized Pages to Visitors
2. Open the source code of the page by either using the Ctrl + U shortcut or by right-clicking anywhere on the page and selecting “View page source”.
3. Using the search on the page (open the search bar by using Ctrl + F), search for nitro-critical-css
4. If there is a match, you should be able to see something like this:
That way, you can be sure that NitroPack is generating critical CSS for your website.