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.
When NitroPack optimizes a page, it fetches the resources and the HTML of the page. To generate the critical CSS, NitroPack first accesses your webpage with JavaScript disabled to ensure the critical CSS will not rely on dynamically created elements (for example, from JavaScript). That is crucial, as the critical CSS is used only before any other resources are loaded.
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.
📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via this link: https://support.nitropack.io