Eliminate render-blocking resources
"Eliminate render-blocking resources" means that your webpage is loading resources that block rendering, which can slow down your site and negatively impact the user experience.
How to fix it
The solution is to eliminate render-blocking resources. Here's how:
Step 1: Identify Render-Blocking Resources
First, you need to identify the render-blocking resources. You can use Chrome DevTools for this. Open DevTools, go to the 'Network' tab, and look for resources that are marked as 'High' in the 'Priority' column.
Step 2: Eliminate Render-Blocking Resources
Once you've identified the render-blocking resources, you need to eliminate them. This might involve deferring non-critical resources, inlining critical resources, or optimizing your resource delivery.
<!-- Before -->
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<!-- After -->
<link rel="preload" as="style" href="styles.css">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
In this example, we've deferred a non-critical JavaScript file and preloaded a critical CSS file to eliminate render-blocking resources.
Step 3: Test Your Changes
For an even better solution, consider testing your changes to make sure they don't break any functionality. This can help ensure that your site still works as expected with the eliminated render-blocking resources.