How can I improve the load time of a slideshow on my landing page?

Technical Q&A
,
1
Show More

Hi there, I recently ran a lighthouse report to view my store’s performance. The largest contentful paint was over 3 seconds. This element is the main slideshow image on my website landing page. Both slideshow images are optimised to a very small file size and shouldn’t take this long to load. I can therefore only assume that the nature of the slideshow as a dynamic section causes longer loading times as it has to switch between two images. Do you have any ideas on how the can be improved?

Show More

I would consider using a less dynamic section here such as a simple image with text overlay, however this section on my theme doesn’t have the option to choose a ‘gradient overlay’ for the section which is quite an important feature for the design of my store!

Show More

Thank you!

2

Hello @TheShadePrjct ,

This issue is not entirely because of image size. It does depend upon the overall loading speed of the website; you can fix that by working on the below-provided points.

Here are 20 essential points to improve your page speed and make your Shopify site lighter and faster.

  1. Remove unused JavaScript.
  2. Eliminate render-blocking resources.
  3. Use minified CSS and JS files.
  4. Replace GIFs with Static Images.
  5. Reduce large image sizes.
  6. Image compression is essential for the faster loading of web pages. Make sure your images are of good quality.
  7. Avoid too many images on a single page.
  8. Prioritize fonts from the Shopify admin panel.
  9. Use the Font-display property as a swap.
  10. Replace GIFs with static images.
  11. Remove third-party JS scripts and Shopify App that you no longer use.
  12. Disable unused app features.
  13. Precise app data while removing an unused app.
  14. Avoid multiple-page redirects.
  15. Use video formats for animated content.
  16. Preload the LCP image.
  17. Avoid large layout shifts.
  18. Set width and height on image elements to reduce layout shifts and improve CLS.
  19. Avoid large GIFs for animated content. Use MPEG4/WebM videos for animations and PNG/WebP for static images.
  20. Apply lazy loading on video.

Also, we recommend you connect with Shopify experts or developers who can better assist you with your site speed and help you optimize your Shopify store.

If you need further help with your query, connect with our expert team of developers and let them assist you with your issue.

All the best,

CedCommerce