Fix Render-Blocking Resources

Render-Blocking Resources

Problem: JavaScript or CSS files block the browser from rendering the page until they are downloaded and processed.
Why it fails: Increases LCP and First Contentful Paint (FCP), making the page appear slow.
How to Fix "eliminate render-blocking resources":
- Defer Non-Critical JavaScript: Add the defer or async attribute to <script> tags. defer executes scripts in order after the HTML is parsed; async executes whenever ready, potentially out of order. Use defer for most cases unless script order doesn't matter.
```
<script src="analytics.js" defer></script>
<script src="main-app-bundle.js" defer></script>
```
- Inline Critical CSS: Identify the minimal CSS needed to style the above-the-fold content and include it directly in a <style> tag in the <head>.
- Load Non-Critical CSS Asynchronously: Use techniques like media="print" onload trick or JavaScript to load stylesheets that aren't needed immediately.
```
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
```