Error: Eliminate Render Blocking Resources

Performance
1

I have recently developed a website on Accounting and Bookkeeping Services(https://ebetterbooks.com) 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?

2

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

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

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

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.