Error: Eliminate Render Blocking Resources

I have recently developed a website on Accounting and Bookkeeping Services( and while checking the speed of the website I got a few errors, fixed most of them, except a few that is, Eliminate Render Blocking Resources, can someone provide me a fix to it?

We can’t really provide a fix for it.
It mostly boils down on:

  • serve important CSS in-line:
    body {
      height: 100vw;
  • Move scripts to the bottom or use the defer/async attribute:
  <script src="/my--first-script.js" defer></script>
  <script src="/my-second-script.js" async></script>

  <script src="/my-third-script.js"></script>

The difference between the 3 methods of loading scripts:

  • async will run in “parallel” while the page keeps loading (only use it for scripts that do not rely on the DOM).
  • defer wil run after the page has completely finished parsing (use it for scripts that do rely on the DOM or don’t use the document.ready methods).
  • the one in the footer will load “as-is”.

The reason why you get the error is because your browser encounters a script while parsing, loads that in and only after that is done, it’ll continue parsing.
This causes a slowdown and is undesirable.