What are Render-Blocking Resources?
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 under the CSS sections in your Settings tab in NitroPack’s dashboard:
Another option that helps reduce the render-blocking for CSS is our Combine CSS into one resource 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.
Similar to the CSS solutions, we provide two major methods of approaching the situation, as seen in the JS section 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 loading of non-critical resources until user interaction is detected
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 remain the main culprit for the Red opportunities paragraph in PageSpeed Insight.
Additionally, NitroPack engineered a method of tackling the situation, called Font Subsetting (Remove Unused Glyphs)
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:
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.
This is easily fixed by switching to our Ludicrous mode in the Settings tab of the NitroPack dashboard:
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?.