How can I reduce gif loading speed to improve site performance?

Astronerd
Tourist
11 0 4

Site speed is not looking too good right now. Trying to gain a massive boost. Assuming I am experiencing a lot of loss based on my gif image size. Any recommendations to deal with this? Also ways to reduce static image sizes?

Replies 6 (6)

Mubashir_H
Shopify Expert
84 4 13

@Astronerd 

It would be great if you can share your site links so that I check your site performance and give you some suggestions for improvements, but it seems like you are concerned about the gifs images.

 

All you need to do is to Lazy load the images, follow the following steps.

 

  • Add the lazysizes.js library to your theme assets folder and include it in theme.liquid
  • Locate the image tags in your theme files
  • Update those image tags by swapping src with data-source and adding the “lazyload” class
  • Optionally add some CSS styling for animation effects

please let me know if this help, if you are not technical you can hire an expert.

please feel free to ask me questions.

SEO pro | speed Optimization expert | SEO content writer

Drop me a message on Whatsapp for Free consultation.
Hire me at Shopify Experts Marketplace

Astronerd
Tourist
11 0 4

astro-needs.com is the site link

Astronerd
Tourist
11 0 4

astro-nerds.com *

Mubashir_H
Shopify Expert
84 4 13

ok, let me check.

SEO pro | speed Optimization expert | SEO content writer

Drop me a message on Whatsapp for Free consultation.
Hire me at Shopify Experts Marketplace

Mubashir_H
Shopify Expert
84 4 13

@Astronerd 

The site speed is below average especially on mobile devices.

1) Lazy Load images (I have sent you a procedure in the first message).

2) optimize render blocking Java script (you need to inline and minify htmls and CSS, try to remove the unused CSS, The CSS needed to render the above-the-fold sections of the page should be delivered inline in the HTML(Critical CSS).

current speed 1.jpegCurrent speed 2.jpeg

SEO pro | speed Optimization expert | SEO content writer

Drop me a message on Whatsapp for Free consultation.
Hire me at Shopify Experts Marketplace

flareAI
Shopify Partner
2405 223 537

Hello @Astronerd,


This is flareAI: your Fully Automated Free Sales Machine. I hope you're having a good day. We are helping Shopify Merchants grow their store presence in Google and other major sales channels and generate sales of $5 million in sales from Google Search, on autopilot. I truly hope my suggestions will help you with the best solution.


Following tips will help you significantly speed up your Shopify store.

 

1. Image compression is important and a necessity for faster loading web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tool like https://tinyjpg.com/
2. Reduce the HTTP requests. For example: Combine & inline your CSS scripts
3. Minimize broken links and redirects - Avoid unnecessary Redirects and fix broken links
4. Using slideshow, which are high-quality images combined with transitions, take time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
5. Use a theme which is optimized for performance means a theme which is responsive, fast, and takes minimal time to load the page.
6. Remove all unwanted Shopify Apps which you are not using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.
7. Replace GIFs with static images
Shopify also accepts .gif images, but these are very low quality. They can be an option if you want dynamic elements on the page, but overall I suggest staying away from GIFs.
8. Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.
9. Use minified CSS and JS files


I would suggest you to try flareAI. We created flareAI to grow your store on Google, Bing and other major sales channels. As a partner, flareAI will submit your products to the free sales channels on a daily basis. Once your product is found on the channel, you don't need to do a thing. Customers will keep finding your product day after day. flareAI will help to scale your site sustainably at NO Agency fees, NO Pay-per-click, NO paid marketplaces.

 

I hope that the above list's tips will help you solve your query.

 

Gina
flareAI

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing