How to Eliminate Render-Blocking Resources in Shopify

sandeepsomai
Shopify Partner
12 0 4

Hey, Shopify Community,

 

I am facing an Issue which is Some JavaScript and CSS resources are blocking the initial render

 

This issue was shown me my an SEO Expert for my Shopify store which was causing a much website load time.

 

He has provided me the solution for this as 

  • Minify and combine CSS/JS files.
  • Defer non-critical JS files.
  • Inline critical CSS and load the remaining CSS asynchronously.

Since I am using Shopify so How will I do these changes in my Shopify please help me with this.

Sandeep Kumar | Ecommerce Analyst
Replies 2 (2)

TorwoodGC
Excursionist
25 0 16

I don't know, sorry.

However, I would love to find out, so, I'm following this thread 😄 

swym
Explorer
42 2 18

Hey @sandeepsomai

 

To enhance your Shopify site's performance and improve user experience, it's essential to eliminate render-blocking resources. Here's a step-by-step guide to help you tackle this issue:

 

1. Identify the render-blocking resources: Utilize tools such as GTMetrixPage Speed Insights or Lighthouse to identify the scripts and CSS files causing render-blocking.

 

2. Duplicate Live Theme: Before making any changes, duplicate your live theme to safeguard your site against any unforeseen issues during optimization.

 

3. Optimize JavaScript: Modify your theme's JavaScript files by using attributes like async and defer on script tags. Learn more about implementing these attributes using the link: https://javascript.info/script-async-defer

 

4. Preload CSS Files: To prevent CSS files from being render-blocking, preload them using the following syntax:  

 

{{ 'theme.css' | asset_url | stylesheet_tag: preload: true }}​

Refer to Shopify's documentation on asset preloading here.

 

5. Thorough Testing: After updating assets/resources, thoroughly test your website to ensure everything functions as expected.

 

6. Consider Hiring a Developer: If you're not comfortable working with code, consider hiring a developer to assist with speed optimization. Shopify's directory of expert partners can help you find experienced professionals for this task: Hire Shopify site performance and Speed Experts 

 

For extensive information on eliminating render-blocking resources, you can also refer to this resource from Google's developer documentation: Render Blocking Resources - Google Developers.

 

 

By following these steps, you can effectively eliminate render-blocking resources and enhance your Shopify site's performance. 

 

Hope this helps! 

 

Regards, 

Abhishek from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries