5. Step by step guide to optimizing your Shopify site
Below are given step-by-step instructions to optimize your website.
1. Optimize Images (Lightweight Images to load faster in a web browser)
We observed that store owners use high-resolution images on their site because they think good quality can be maintained by high-resolution images, but on the other hand it harms your site speed when you use a high-resolution image it will increase your site load time. So we recommend you optimize images without compromising with image quality. There are some free tools available or you can use Photoshop for image optimization.
By optimizing images you can save the image size and reduce load time.
2. Delete unused apps or Do not install apps directly on the live store
In Shopify, there are a number of apps available for the same functionality. The store owner tried installing one after another.
If any app is not in use then uninstall that app immediately because the js/CSS are running into the background and slow down your site performance
We recommend removing the unwanted apps from your Shopify store and don’t install any app directly on the live site first install it on the test site once you confirm to go with that then install that app on the live site.
3. Use Mobile-friendly Images for Themes
Sometimes store owners used the same width images for both desktop & mobile. For example, using 1200 width images for desktop & mobile, during this image display in the mobile image will be stretched, the quality will mess up, also it will take more time to scale up images during download for mobile view.
We recommend using separate images for desktop and mobile so that separate images can be loaded on as per the resolution. You can use a picture tag to achieve this.
4. Always use Free tools every alternate week to check your website score
Regularly audit your site speed by using the below tools to know the present scores & performance of your site. If the site’s score is getting down then you can focus on site speed improvement. Use the given tools to audit your site scores.
5. Remove unnecessary code on a high priority basis
Audit your site code and remove unnecessary JS/CSS code from your site. Sometimes store owners use heavy themes or their store instead they can use lightweight themes.
Here we suggest you use the theme as per your site requirement. For example, your site requirement is only for 50 features and you’re using 500 feature themes then unwanted js/CSS will be loaded on-site and it will slow down the site.
6. Compressed images or Defer offscreen images
When a user opens the webpage, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load.
So instead of loading all of the images at one time, images can be loaded when the user accesses a part of the page that requires it.
With lazy loading, you can load on-screen images first, and on scrolling of pages, load remaining images so that you can reduce the site load and make it fast.
For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.
7. Web Pages need to be Minified
When a user requests your site URL then browsers execute the code one by one. If a website contains more lines of code then it will take more time to read and execute.
Using this technique you can minify the webpage code and reduce code lines so that you can save code execution time and the site loads faster to a user response.
9. Beware of excessive liquid loops
Looping is used on your site to display Pagination, Swatches, Collection Filtering. For Loop is the system has to loop all the products in a collection and happens when it’s looking for a specific condition.
In Pagination, instead of keeping more products on a single page you can apply pagination and allow users to click on the next page to see more products. We recommend reviewing theme code and checking liquid for loops not running multiple times.
10. Decrease thumbnail image size
On the Product page, the main image is used for larger file size, if you used the same size image for thumbnail then the user’s browser to scale it down for the thumbnail takes time which impacts your page load time.
Recommend to use small-size images for thumbnails.
11. Weigh the benefits of installing another app
During installing any other app on your site, read reviews of apps, check whether any complaints related to that app like it’s very slow, etc and then use. If any features you can use by custom coding then don’t go with a third-party app you can achieve that by custom coding.