How to Optimise Render-Blocking Resources and Improve Page Speed

Render-blocking resources are essential components of a web page that require loading before the page can be fully rendered in a browser. These resources typically include CSS and JavaScript files that are typically loaded in the head section of an HTML document.

While these resources are crucial for the proper functionality of the page, they can also slow down the rendering process and negatively impact the page load time.

When a web page is loaded, the browser needs to fetch and process these render-blocking resources before it can proceed with rendering the rest of the page. This can result in delays and a slower overall user experience. Just like waiting for a roast beef to cook before serving the whole meal, render-blocking resources act as obstacles that prevent the immediate display of the web page content.

Optimising render-blocking resources is essential to enhance page speed and provide a smooth browsing experience for visitors. By addressing these resources, website owners can significantly reduce loading times and improve user engagement.

Resources Which Contribute to Render Blocking

Render-blocking resources encompass various files that play a vital role in the functionality and visual presentation of a web page. The following resources are known to contribute to render blocking:

1. CSS Files: Cascading Style Sheets (CSS) are responsible for defining the layout, styles, and visual elements of a web page. When CSS files are included in the head of an HTML document, they can cause render blocking, especially if they are large or complex.
2. JavaScript Files: JavaScript is a programming language commonly used to add interactivity and dynamic features to websites. JavaScript files loaded in the head section of a web page can block rendering since the browser must execute them before continuing with the page display.
3. Fonts: Custom fonts, such as Google Fonts or web fonts, are often included in CSS or JavaScript files. These fonts need to be fetched and loaded before the browser can render the text content properly. Large font files or multiple font requests can increase render-blocking times.
4. External Resources: Third-party resources, such as social media widgets, embedded videos, or advertising scripts, can contribute to render blocking. These resources typically require additional requests to external servers, which can slow down the rendering process.

How to Improve Render-Blocking Resources

To address the issue of render-blocking resources, you can take these simple steps:

1. Identify which resources are causing the issue: Use a tool like Google PageSpeed Insights or GTmetrix to identify which resources are causing the issue. (See: 8 Awesome page speed Testing Tools)
2. Minimise the use of render-blocking resources: Minimise the use of render-blocking resources by only including the resources that are essential for the page to function properly.
3. Defer loading of non-essential resources: Defer loading of non-essential resources like tracking codes or ads until after the page has been rendered.
4. Use asynchronous loading for critical resources like Google Analytics or fonts to allow the page to render faster.

By addressing render-blocking resources on your website, you can improve page load times and provide a better user experience for your visitors.

How to Optimise Render-Blocking Resources in WordPress

Here are some steps you can take to address render-blocking resources in WordPress:

1. Use a lightweight and optimised theme: Choosing a lightweight and optimised theme is crucial for improving page speed. Avoid using themes that come with a lot of built-in features or excessive styles that may slow down your website.
2. Minify and concatenate CSS and JavaScript files: Minifying and concatenating your CSS and JavaScript files can significantly reduce the number of render-blocking resources on your website. There are many plugins available for WordPress that can help you with this, such as Autoptimize and WP Fastest Cache. (See: 6 Awesome WordPress Plugins for Minifying CSS and 6 Awesome WordPress Plugins for Minifying Javascript)
3. Use lazy loading for images: By using lazy loading, images are only loaded when the user scrolls down to them, which can significantly reduce the number of render-blocking resources on your website. There are plugins available for WordPress that can help you with this, such as Lazy Load by WP Rocket. (See: 6 WordPress Plugins For Optimising Images)
4. Defer or async load non-critical resources: Defer or async loading non-critical resources like Google Analytics or social sharing buttons can help speed up your website. There are plugins available for WordPress that can help you with this, such as Async JavaScript and Flying Scripts.

Related: 35 WordPress Tools and Resources to Improve Page Speed

How to Optimise Render-Blocking Resources in Magento 2

In Magento 2, you can address render-blocking resources using a combination of techniques, including optimising your theme, minifying and merging CSS and JavaScript files, and using the “defer” or “async” attribute to load non-critical resources.

Here are some steps you can take to address render blocking resources in Magento 2:

1. Use a lightweight and optimised theme: Choosing a lightweight and optimised theme is crucial for improving page speed. Avoid using themes that come with a lot of built-in features or excessive styles that may slow down your website.
2. Minify and merge CSS and JavaScript files: Magento 2 comes with built-in tools to minify and merge CSS and JavaScript files. You can enable these tools in the admin panel by going to Stores > Configuration > Advanced > Developer > JavaScript Settings and Stores > Configuration > Advanced > Developer > CSS Settings. (See: Page Speed: Minification of Code)
3. Use the “defer” or “async” attribute for non-critical resources: By using the “defer” or “async” attribute, non-critical resources like Google Analytics or social sharing buttons can be loaded asynchronously, which can help speed up your website. You can add these attributes to your script tags in your Magento 2 theme files.
4. Optimise images: Optimising images can also help reduce the number of render blocking resources on your website. You can use image compression tools or plugins to optimise your images before uploading them to your Magento 2 website. (See: Magento 2 Extensions for Optimising Images)

Related:

• 28 Magento 2 Tools and Resources to Improve Page Speed
• Magento Page Speed Optimisation Services

How to Optimise Render-Blocking Resources in Shopify

In Shopify, you can address render-blocking resources by optimising your theme, minimising and combining CSS and JavaScript files, and using the “defer” or “async” attribute to load non-critical resources.

Here are some steps you can take to address render-blocking resources in Shopify:

1. Use a lightweight and optimised theme: Choosing a lightweight and optimised theme is crucial for improving page speed. Avoid using themes that come with a lot of built-in features or excessive styles that may slow down your website.
2. Minimise and combine CSS and JavaScript files: Shopify allows you to minimise and combine CSS and JavaScript files by going to the “Online Store > Themes > Actions > Edit Code” section of your Shopify admin panel. You can use tools like MinifyCSS or JSCompress to help you with this process. (See: Page Speed: Minification of Code)
3. Use the “defer” or “async” attribute for non-critical resources: By using the “defer” or “async” attribute, non-critical resources like Google Analytics or social sharing buttons can be loaded asynchronously, which can help speed up your website. You can add these attributes to your script tags in your Shopify theme files.
4. Optimise images: Optimising images can also help reduce the number of render-blocking resources on your website. You can use image compression tools or plugins to optimise your images before uploading them to your Shopify website. (See: Shopify Apps for Optimising Images)

Related: 17 Shopify Tools and Resources to Improve Page Speed