“Generate Critical CSS” is a feature that allows you to fix one of Google PageSpeed Insights’ most popular warnings:
CSS is considered render-blocking because it can delay the rendering of a web page until the CSS files are downloaded, parsed, and applied by the browser. When a browser encounters a CSS reference in the HTML document, it typically blocks the rendering process to ensure that the styling information is available before rendering the page.
However, not all CSS files are needed in the above-the-fold section, which is immediately visible to the user. That’s why it’s crucial to create Critical CSS for your pages to boost your load times and perceived performance.
That’s what Generate Critical CSS does.
How Generate Critical CSS boosts your performance
By enabling Generate Critical CSS, NitroPack will automatically create Critical CSS for your pages.
Our service automatically grabs the CSS needed to visualize above-the-fold content and inlines it. Also, it creates unique Critical CSS for every page (not page type). As a result, you can achieve better performance and stability.
How to enable Generate Critical CSS
Log in to your NitroPack app.
Go to Settings, open the HTML & CSS menu, and scroll down to "Generate critical CSS":
Enable “Generate critical CSS":
From the advanced options, you can remove @font-face rules from the critical CSS as well as specify CSS selectors to force include/exclude CSS for matching elements
Removing @font-face rules from Critical CSS can be beneficial for optimizing web page performance in certain scenarios. Here are a few reasons why you might want to consider removing @font-face rules from Critical CSS:
Reduced initial page load size:
Avoid rendering delays
Prioritizing font loading
Important: It's worth noting that removing @font-face rules from Critical CSS should be done thoughtfully, considering the impact on the visual design and overall user experience. If custom fonts are integral to the design or branding of your website, you may need to find a balance between optimizing performance and maintaining the desired typography.
Save your settings:
Finally, don’t forget to clear your cache. Go to your dashboard and click “Purge all cache”:
📌 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