Serve scaled images:

The size of the images depends on two things, the dimension and the quality of the image. That’s why you should always use images of the exact dimension needed for the page. For example: If your home page’s banner dimension is 1500 x 500 px then use this dimension only, not bigger than that.

For product images, Shopify suggests using 2048 x 2048 px images so that the quality of the images doesn’t get compromised if you are using the image zoom feature. But it can significantly increase the memory sizes of the images and may dramatically slow down your website when you use multiple such images on a page. Until you don’t need to a pixel-perfect image to show up every minute detail, 800 x 800px images will do just fine on your product page

Also, wherever you can, especially on the Home page and on your collection pages, reduce the no. of images.

When you are running your store on Shopify, there is no way you can go without using third-party apps. But, many of the apps run scripts on your pages which reduces the page loading speed. Here are a few measures you can take to minimize the effects on apps.

Delete all the apps you are not using.

There may be a few apps that you are using but can do just fine without those apps. Test the page speed with or without these apps installed to measure how they are affecting the page speed.

You may be using some apps which add new elements to your store pages. Try to restrict those elements to only the pages where you actually need them. For instance, maybe you are using some floating trust badges throughout your store, while you only need them on your product pages.

Furthermore, I’ve also listed 5 ways to speed up your Shopify site that are the low hanging fruits you should try first.

Seeking professional help?

Till now we have discussed the things you can manage to do yourself. But there are few page issues that you can’t fix until you are a seasoned Shopify developer.

Here are the few things for which you may need professional help:

To eliminate render-blocking JavaScript and CSS in above the fold content:

This is one common issue found in any JavaScript/CSS heavy website. These JavaScripts and CSS codes can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait longer to see the page. These scripts and stylesheets are referred to as render-blocking JavaScript and CSS. The fix for this is to load the priority of the script-wise.

To minify HTML and JavaScript:

Every website loads a lot of files containing HTML, CSS, and JavaScripts. And most of the files include a lot of space, comments, Block delimiters, etc. So, significantly it takes extra time to load properly. Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up the loading of the pages. This is also one thing for which you will need professional help.

Wrapping up

Page speed optimization is a continuous process. You need to regularly check the page's speed scores and note them to keep track of your page’s performance. Get your hands dirty with the low hanging fruits first and then focus on other issues. If you need any professional help, you can always look for Shopify Speed Optimization Service