This article will guide you through the basics of identifying and solving issues caused by our “Delay non-critical resources” option.
✳️ This article is suitable for more tech-savvy users with a basic understanding of JavaScript loading and dependencies.
If you experience issues on your website that may be caused by the “Delay non-critical resources” option and you are not confident enough to tackle the issues alone, please contact NitroPack’s support team for further assistance.
First Steps
Assuming that you have tested the website with NitroPack disabled and confirmed that the issue is present only when NitroPack is activated, the next step is to identify if the issue is indeed caused by the “Delay non-critical resources” option.
To do that, disable the option. You can either unselect it or switch the optimization mode to “Strong”, as the delayed loading of JavaScript there is disabled.
After that, you should purge the cache of the affected page and test it again after it is re-optimized once again. You can do so by navigating to Cache Insights >> Page optimization status:
If the issue is not present with the option disabled, then you confirmed that the “Delay non-critical resources” is the root cause of the issue.
How to solve the issue caused by the “Delay non-critical resources” option?
In most cases, the issue is that the elements on your website will not load until you click on the page or scroll it on your mobile device.
To solve this problem, excluding the proper resources from the NitroPack optimizations should resolve the issue.
Below, you will find some useful techniques for tackling such issues:
➡️ By inspecting the console
When you experience an issue caused by the delaying of the JavaScript execution, inspecting the console logs of the page in the DevTools can help you narrow down which file or inline script should be excluded.
1. Open the page where the issue occurs, and open the “Developer Tools” by clicking F12 or via the Browser Settings > More Tools > Developer Tools.
2. Click on the “Console” tab and inspect the error messages logged in there (if you do not see anything, you may need to refresh the page to log all of the errors from the new session).
The most common error messages generated when you encounter such an issue will be:
Uncaught ReferenceError: <code> is not defined
or
Uncaught ReferenceError: <code> is not defined where <code> is either a variable or a function.
3. The next step is to bypass NitroPack’s cache and check there.
Open the non-optimized version of the same page using the “?nonitro” parameter following the steps above, and check if the same error messages are generated.
If the error messages are being generated even when NitroPack is not serving cache for the page, that means that the issue is not actually caused by NitroPack itself, but the JavaScript of your website is missing some functions or variables in general.
4. If the error messages are not generated in the non-optimized version, then you can search for the <code> in the Developer Tools to find where the function is being loaded or where the variable is being defined.
To do that, click on the three dots on the right and click “Search”. This search bar will let you search for the code across all loaded resources.
5. Put all relevant code files into the Excluded Resources tab, save the changes, re-optimize the page, and see if the issue is resolved.
In order to further refine the exclusions, you can try removing the excluded files one by one, checking if the error message doesn’t come back.
In some cases, further error messages can occur, so if that is the case, you should use the console technique again to resolve the additional error messages as well.
➡️ By finding the proper resources in the context
Another way to tackle issues caused by delaying JavaScript execution is to find exclusions by focusing on the context. In order words, you can identify the scripts and resources of the affected feature by focusing on the elements loading after user interaction.
The following are example steps on how the technique should be implemented:
1. Open the affected URL.
2. Identify the affected elements, for example, a slider or a hamburger menu.
3. Find the element’s markup in the HTML by either right-clicking on the element and then clicking on “Inspect Element”, or by opening the “Elements” tab in the Developer Tools.
4. Identify the class related to the element by inspecting the “class” attribute of the element.
5. Open the non-optimized version of the page using the “?nonitro” parameter.
6. Use the “Search” tab to find the resources and scripts linked to the element's class.
7. Add the resources and scripts to the “Excluded Resources” tab, save the changes, purge the cache, and test if the issue will be resolved.
📌 If you need any further assistance or have questions, reach out to our support team at [email protected] or via the live chat.