I am having an issue with the loading time of our master collections page found here: https://row.sewsporty.com/collections
Basically we have created hundreds of "team stores" using collections, and link to all of these collections by using the All Collections page.
The load times are anywhere from 15s to 30s. Here are some screenshots from webpagetest:
There are a lot of images on this page, so I suspect it may have something to do with that, but I wanted to make sure before I start messing around in the back-end.
Thank you for any help or insight you can provide!
Solved! Go to the solution
My name is Lilith, I'm on the Social Care team at Shopify.
I'm glad that you've taken some steps to check on the speed of your site. The speed load time can have a pretty big impact on your Search Engine Optimization (SEO) long term.
I ran a quick test with Pingdom to see where your page is slowing down. It appears that the majority of the slow down is from the images on your page. Here's a link to the report to your page load speed. I've grabbed a screenshot to help point you in the right direction:
All of that said, I'd highly recommend making a few crucial adjustments to the number of products that show up on the page. If you need a bit of help to make sure that your site can be customized to your business needs you can hire a fantastic Shopify Expert. If you can reduce the number of images that show up on that collections list page, it'll help to speed that page up significantly. If necessary there may be some options to have a Shopify Expert consolidate your scripts and code to make sure those also help to load a bit faster on your site.
I'd also suggest checking out our Enterprise blog post on improving your site's performance and speed. There are some exceptional tips and guidelines in that blog post that may be of benefit to your business.
Let me know how you do with this! I'm happy to answer any questions you think of as you work on your business.
Thanks for responding to my question. After reviewing your advice and trying a few things, I think the most helpful solution would be to lazy load the images on this collections page. However, I am a bit confused on how to efficiently do this.
All of the write-ups I read include a step where you change the img src code for the images you want to lazy load. However, in the case of the page I mentioned in my post, I see two potential roadblocks to this:
1. The coding for the page in question does not have individual image links in it, as it is pulling the images from various collections.
2. If I were to need to change the image code properties for each photo, that would be 1,000+ photos. No way would I be able to do that manually.
So in the end my questions is this: Is there a way to add lazy loading of images to my master collections page that would not be extremely time consuming?
Hey there! Thanks for the reply. I like that you're choosing a good solution for the load time.
We do have some strategies in our Shopify Partners Blog to help you condense the time it takes to lazy load all the images. It'll still be a bit of a time crunch to get that done in an efficient manner. So I've put together some choices based on the importance of time.
The first option I'd recommend highly is hiring an Expert. The reason this is my first suggestion is that the partner you hire will have outstanding experience to get this done efficiently for you. They may also be able to address the low speed and other negative factors that might also be affecting SEO as well.
Here are the two places you can check in the Experts Marketplace to get the specialized partners for the job:
The second option is to use an app called Infinite Scroll & Load More to help with recovering the speed as well as indirectly addressing image load issues. Have you thought about including an infinite scroll option on your homepage?
Infinite scrolling would load a set number of product images right away and as the visitor scrolls down will load more or they can choose to load more. You can implement this to help save the load time of your site but still offer the catalog on your homepage.
This would be a less time consuming and inexpensive way to adjust the speed. However, this will install new script into your homepage which can in some cases affect load time as well. Though I'm sure that it will be a negligible effect in comparison to the benefit.
Let me know how you do with the information above or if you find a new alternative solution to the lazy load implementation!
Hii there, we know that it's difficult to maintain page speed and others, but if you reduce the images sizes and others staffs like videos and extra custom java script codes then you can increase your speed. know more contact us Contact Us
This is an accepted solution.
I took a look at that page and a couple things stood out to me:
1) I ran this page through a few analyzer tools and they all gave abnormal results. This usually means you have a problem with 1 of your apps / scripts. A deeper analysis would be required to find it, but you might try your theme.liquid file and commenting out each app script 1 by 1 to find the culprit.
Supporting this with a screenshot: the "response headers" are exceptionally high (these should be less than 50kb in most cases):
2) This is the longest collection page I've ever seen :) ... I recommend limiting your products to about 20 - 30. This gives you the benefit of pagination, so when users click to the next page, it signals user engagement (a good stat for SEO).
3) Console errors look ok, you just have a missing file for your favicon.ico. That's probably not a big issue but should be fixed still:
4) Lazy loading
It looks like this is partially working, but I still see "srcset" attribute, which indicates the images are loading on the initial page load. With a huge collection like that you're loading a lot of heavy files.
- I wrote a post about lazy loading here if you want to check against your work: https://speedboostr.com/shopify-lazy-loading/
About editing each product's code, that shouldn't be necessary, check your /snippets/product-grid-item.liquid file, there should be liquid code in there controlling the images.
- I would first limit the # of collection items to about 24 and see how that changes.
- If problem still persists, check your theme code for app scripts loading, and try commenting out some of them and retesting to see if you can find the culprit.
- You should implement lazy loading fully either way.
If you prefer not to handle DIY, our team at Speed Boostr are experts in Shopify performance optimization. Just give us a shout if you need help.