This article will guide you through the basics of identifying and solving issues caused by our “Delay loading of non-critical resources until user interaction is detected” option.
If you experience issues on your website that may be caused by the “Delay loading of non-critical resources until user interaction is detected” option and you are not confident enough to tackle the issues alone, please contact NitroPack’s support team for further assistance.
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 loading of non-critical resources until user interaction is detected” option.
To do that, you should disable the option by switching to the “Custom” optimization mode, then navigating to the JS tab of the NitroPack settings > “Configure resource loading strategy”, disabling the “Delay loading of non-critical resources until user interaction is detected” option.
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 under the Cache Insights tab in NitroPack’s dashboard.
If the issue is not present with the option disabled, then you confirmed that the “Delay loading of non-critical resources until user interaction is detected” is the root cause of the issue.
How to solve the issue caused by the “Delay loading of non-critical resources until user interaction is detected” 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
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
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.
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
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.