This is an error that can take 30+ points from your score and it is one of the hardest to fix on a mature website.
Google wants to start rendering the upper half of the page (above-the-fold) without waiting to download resources, especially if they are used after you start scrolling the page. To put it simply, if you do not see the page footer, you do not need anything related right away.
It is a good practice to move scripts right before the closing body tag
<script> tag with async attribute right before the closing body tag
</body> is imperative because execution can start before HTML is parsed and the targeted DOM element may not exist.
On our website, for instance, I’ve placed all scripts at the bottom of the page:
<script src="/jquery.js"></script> <script src="/owl.carousel.js"></script> <script async src="/script.js"></script>
jQuery is added without async or defer attribute to make sure that is loaded first.
To dive deeper into the following cases, we will use the scripts from the example above.
My script.js is using jQuery, Owl and is not used by any other script. Owl has jQuery dependency.
To make sure we call first jQuery, second Owl and last script.js we can put async attribute only on script.js.
Case 1: What if you want to make Owl non-blocking?
<script src="/jquery.js"></script> <script> /* put the owl carousel code here */ </script> <script async src="/script.js"></script>
Well, this looks bad as the HTML document will become more substantial, and the Prioritize visible content error might occur.
Solution 2: Import the library into the script.js file.
<script src="/jquery.js"></script> <script async src="/owl-and-script.js"></script>
This is a better solution, but still far from the best, because you might need to download second time the library on a page that is not loading the script.js file.
Solution 3: You will not like it, and it is time-consuming, but if you need something simple, try writing carousel yourself or at least find library without jQuery dependency.
Conclusion: I choose to leave alone the Owl library because otherwise it will need additional work for support and page loading time was not improved much better. However, if you need to fix this render-blocking resource and one of the three solutions should do the job or at least guide you to a better one.
Case 2: What if you want to make jQuery non-blocking?
Solution: Please do not, you will create more problems than to fix. Even Google does not know how to do it right, saying:
While it is not difficult to make jQuery non-blocking resources, it is a nightmare to support it, and we must weigh the overall pros and cons.
It is unacceptable to inline whole jQuery library into the HTML document, but remember that most of the time it is render-blocking because another script is changing the DOM through jQuery and Case 2 might be Case 1.
Next, we will focus on how to eliminate render-blocking CSS in above-the-fold content.