What are Render-Blocking Resources?
Render-blocking resources are resources that prevent a web page from being rendered and displayed to the user until they are fully downloaded and processed by the browser. These resources include CSS, JavaScript, and fonts that are necessary for the layout, styling, and functionality of the page.
For further information, feel free to refer to our Blog post on the topic here.
How can NitroPack help with Render-Blocking Resources?
As an all-in-one solution, NitroPack provides several different approaches to eliminate render blocking. We will list them below in several sections:
➡️ Render-Blocking CSS
NitroPack provides two heavyweight players to assist with that case:
Find them in the "HTML & CSS" menu in NitroPack’s app:
Another option that helps reduce the render-blocking for CSS is our Combine CSS function, ensuring that the browser will not have to download each separate CSS resource. But will combine them in stacks and serve them without causing render-blocking of the main thread.
➡️ Render-blocking JavaScript
Similar to the CSS solutions, we provide two major methods of approaching the situation, as seen in the JavaScript settings under the Remove render-blocking resources function.
Resource loader script
This allows our service to reorder how your CSS/JS will be fed to the main thread, which greatly improves the render-blocking performance.
Delay non-critical resources
This function takes into consideration the scripts that are used only for the meaningful content in the hero section of the website. Everything else is delayed until the user decides to interact with the website. This way, the main thread is not filled up with resources to be loaded without a need.
➡️ Render-blocking Fonts
Fonts are almost always considered render-blocking, and if not treated properly, they may be the main culprit for bad performance.
NitroPack engineered a method of tackling the situation, called Font subsetting
By eliminating all unused glyphs, it can automatically generate a subset version of the initial font file, which in some cases may entail removing hundreds or even thousands of glyphs.
This can lead to drastic size reduction and faster loading of the font. This results in improving or completely removing the render-blocking of a font.
I’m still seeing "Eliminate Render-Blocking Resources" with NitroPack enabled. Why is that?
Depending on the situation, there might be several reasons behind that:
Your URL has not yet been optimized, and PageSpeed Insights is still accessing the default page. You can easily monitor if a page is done optimizing in our Cache Insights tab.
You have several Excluded resources. For example:
Our service is configured to have several Default excluded resources. These are resources that are known to us and are not compatible with our optimization processes. Either because they are already optimized or they are sensitive to changes.
Examples of such resources are:
- googletagmanager
- maps.googleapis.com
- connect.facebook.net
Feel free to reach our support in case you want to know if a specific resource is part of that group.
The default configuration of NitroPack may have been changed.
It is possible that one of the critical render-blocking functions mentioned at the start of the article has been disabled for your website.
Depending on the NitroPack optimization mode you're using, you may see the "Eliminate render-blocking resources" in PageSpeed Insights due to JavaScript resources executing almost instantly there.
This is easily fixed by switching to our Ludicrous mode in the General menu:
Read more about the different between Strong Mode and Ludicrous Mode in our dedicated article: What's the Difference Between the Strong Mode and the Ludicrous Mode?.
📌 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