How to Eliminate Render-Blocking Resources in Shopify

[sandeepsomai]

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.

[TorwoodGC]

I don't know, sorry.

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

[swym]

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 GTMetrix, Page 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