“Optimize CSS Delivery” 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 Optimize CSS Delivery does.
How Optimize CSS Delivery boosts your performance
By enabling Optimize CSS Delivery, 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.
Advanced options
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.
How to enable Optimize CSS Delivery
Log in to your NitroPack dashboard.
Go to Settings, and open the CSS tab:
Enable “Optimize CSS Delivery”:
If you want to apple some of the advanced setting, click “Additional options”:
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