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.

No time for this?

Take care of your business, we fix the PageSpeed