How to 1. Avoid enormous network payloads and 2. Disable Lazy Load

Store Feedback
1

Hi,

I’ve recently ran my store speed against GTmetix and was able to reduce from a C to a B grade by uninstalling apps, and using new apps to reduce image sizes as well and remove videos.

Right now the top few problems are to avoid enormous network payloads and to disable lazy load. I would like to know how I can do this myself instead of hiring a developer at the moment.

Our store is chunkcase.myshopify.com, thanks in advance.

1 Like
2

Hello @soodoco . It’s better to use webp file for the images which will maintain the same quality of images but will reduce the file size. It might help a lil bit, I guess.

3

Thanks Karan,

As of the moment my knowledge is webp file is formatted via uploading my images under the ‘content’ page. Is there a way to convert them directly?

Understandably I can find this out but would appreciate if you’re already using an app/ method that you’ll endorse. Thanks.

4

Hey @soodoco . I am not sure this may help for what you are looking for. You can use any online tool to convert the png,jpg,jpeg file into webp file then you can upload it directly.

5

Hello @soodoco ,

I am Gina from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot. Hope you are having a good day.

Here are some things you can do to avoid enormous network payloads and disable lazy load on your Shopify site.

  • Implement browser caching and GZIP compression. This will help to reduce the size of the files that need to be downloaded by the browser. You can do this by installing a caching plugin or by enabling the built-in caching features in Shopify.

  • Lazy loading images means that they are not loaded until they are needed. This can help to improve the performance of your site by reducing the amount of data that needs to be downloaded. You can use a lazy loading plugin to do this.

  • Use a CDN (content delivery network) to deliver your static assets, such as images and CSS files. This can help to improve the performance of your site by delivering those assets from servers that are closer to your visitors.

  • Use a performance testing tool, such as GTmetrix or PageSpeed Insights, to measure the performance of your site and identify areas where you can improve.

  • Any CSS that is not being used by your site should be removed. You can use a CSS minifier to do this.

  • Similar to CSS, any JavaScript that is not being used by your site should be removed. You can also delay the execution of JavaScript until it is needed. This can be done by using the defer or async attributes on your script tags.

  • Minify JS and CSS. This will help to reduce the size of your JavaScript and CSS files. You can use a JS and CSS minifier to do this.

  • Only use the fonts that you need on your site and optimize them for web use. You can use a font optimizer to do this.

Please don’t hesitate to reach out if you require any additional assistance. If you find the answer helpful give it a Like and ✓ Mark it as an Accepted Solution.

Gina