Eliminate Render Blocking Resources on Shopify

A common issue with Shopify's Pagespeed score are render-blocking resources, which could be eliminated.
In this short guide we will show you how to eliminate the render blocking resources in a sustainable way.

3 Ways to eliminate render blocking resources

1. Only load what you really need

Are you loading the css files of your cart on the homepage? Javascript that is only required in your cart in your blog? Find these unused resources and remove them with if/else statements in liquid.

2. Remove unused functionalities & apps

Is your theme supporting slideshows but you don't use them? Do you have apps, that are not needed anymore? Get rid of them or block them from specific pages. To block Javascript on specific pages, you can use an app like ours https://apps.shopify.com/pagespeed-javascript which helps you to remove unused Javascript & apps from specific pages.

3. Preload critical CSS

If you use the resources, but they are still render-blocking, a good way would be to preload them using preload hints in your theme. You can either hire a Shopify expert or install an app like Flashspeed to optimize your render-blocking resources