Yep, Another Slow Image Loading Question

Shopify Partner
8 0 0

Hello ~

Over the last few days, I've gone through many, many posts regarding the issue of slow image loading times (I actually posted on this once before but was told they loaded fine by those who checked it). When run through Page Speed Insights, I scored a nify 0/100. I only have so-so familiarity with coding, and although I have found tons of breadcrumbs, I haven't been able to find any concrete answers to the following:

In one of the Shopify guides, it states:


"Higher resolution photos will look more polished and professional to your customers, and we typically suggest 1024 by 1024 pixels as a guideline for square product images."

I used 1024 height with a consistent aspect ratio, as suggested, yet on zoom (and often on collection pages as a whole) some can take as long as 4-5 seconds to load. I know that's about a 7% decline in business, but with my very limited knowledge, I can't seem to find any answers on how to efficiently add code to mass reduce the size of my hundreds of images; it seems I would have to go one-by-one, which would take an immense amount of time.

I have heard much about scss, and that it can possibly be of help here, but being fairly new, I wouldn't know where to begin...

Below is a link to my shop for anyone who could help me out with this. Any ideas would be *phenomenally* appreciated!!

http://tahutiantiquarian.com/

Thank you :)))

Sean

0 Likes
Shopify Expert
9807 92 1560

Edits to the css (scss) won't help you here. 

The size suggestion of "1024x1024" could be fine for the product page but makes no sense on your collection grid where the images are never bigger than around 350px wide. You'd want to consider editing the collection grid code and change the image size from 1024x1024 to something smaller (like "large"). Start there and see what happens to the result.

When you get more serious about it you'd then want to look at lazy loading images on your page to avoid loading any more than what's needed.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
8 0 0

Thanks, Jason. I was pretty sure 1024px was pretty gigantic for page listings, but when I read that Shopify resized them, I was under the impression it wouldn't choke-up the loading. I looked into lazy load a few days ago, as well as compression and reducing http requests, but wasn't quite sure which would be better, and Google suggests multiple other options, as well.

From what I can gather about Lazy Load, 

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

goes at the closing of the html code; but when it states that I need to alter my image tags, does that mean one-by-one, or would I be setting a paramter for all of the images to follow? Being faily new at this, it seems very intensive, and I admit I'm pretty lost. Honestly, if I have to go one-by-one or even delete all images, fix them to an appropriate size and start from scratch, whatever, I'll do it, but I think it's more a matter of my not understanding exactly what code goes where.

The site I've been getting the information on Lazy Load is:

http://www.appelsiini.net/projects/lazyload

I'll try to work with it, but it would definitely be nice if there was "an app for that"..

Thanks again!

Sean


 
0 Likes
Shopify Expert
9807 92 1560

Adding lazy image loading to a site is not something I'd recommend to someone that's not dealt with it before. It's not something you want to get wrong! 

I'd stick to changing the image size first since that's an easier change.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
8 0 0

Haha...advice taken. I can always look around and see what the going rate is if I decide that going through the resizing, renaming and re-everything else process gets too troublesome.

I put way too much time into the site to screw it up now :)

Thanks!!!

0 Likes
Shopify Partner
165 0 36

I agree with Jason that you should first be wary of lazy-loading. 

I don't think you are fixing the right problem. Lazy-loading will delay loading of an item until it has to be "seen" but does not change the fact that it will still take a long time to load it when it does. 

Moreover, the point is, you dont need such a big image. An image that big would take up nearly your entire screen. 

You need to view this as a prevention versus treatment issue. Resizing after you've asked for a deliberately large image is both a waste of your time, the visitor's time, and even Shopify's time. 

Here's a real-world analogy. Imagine you went to a clothing store, and bought 10 XXXL shirts even though you're a medium. To fix this,you then go to a tailor to get them each tailored down to a M, even though you could have just bought 10 Medium shirts from the beginning at the store. This is essentially what resizing via CSS, lazy-loading or any other post-retrieval method is doing. You're fixing the wrong problem. 

Shopify ALREADY does the resizing for you. Just ask for a medium instead of an XXXL, first. Or in your case, go back to the store, and exchange each XXXL shirt for a medium one. 

I also have to ask, do you not have a for-loop going on with your collection grid? Surely, you will only have to change a very small amount of lines to get this changed? 

0 Likes
Shopify Partner
8 0 0

Hi, Justin ~

Yes, I'm aware that the sizes needn't be so large as 1024px; I was going off of a Shopify guide from my research during the week that I was adding images, which was a misunderstanding on my part.

The impression I had at the time was that if they would be "resized" by a few lines of code, then it wouldn't matter what size they were when they were uploaded. I do not come from a background in coding, although I've set some things here and there, but I know now that I was incorrect.

I also misunderstood the function of Lazy Load. To my newbie eyes it looked like a fine idea, though complicated.

As for a "for-loop" in my collection grid, at the moment I couldn't tell you. If there's an easier way, I'd love to hear it.

Sean

0 Likes
Shopify Partner
165 0 36

Here's a breakdown (to my best knowledge) of the 'image' process.

1.Image on your computer    

2.Uploaded to Shopify Server

3.Shopify converts image to multiple file sizes --(when a visitor comes to your site) 

4. Visitor's browser asks for a certain image based on your HTML, and downloads it

5. CSS/JS resizes how the image looks, after it is downloaded 

It doesn't really matter what size the image is when it is uploaded to Shopify (step 1), as long as you give it the biggest version of the image that that image would ever have to be. Since (step 2) Shopify conversts that image to multiple sizes, the upload size is irrelevant. 

Using code to resize the image (step 5), also doesn't help with loading, because it has nothing to do with loading. The point to focus on is step 4. Step 4 is when the actual 'loading' happens, and in your case, you are asking it to download a very very large image. If you ask Shopify, instead, for a medium sized version, it will only have to download a medium-sized amount of data, regardless of what you do in step 5. So, even if your image is absolutely huge when you upload it, as long as you still say 'medium', that's all that matters. 

In the same way, if you have a 2px image that you then decided to resize via CSS to 3000px, it will still be MUCH faster than having a 3000px image resized to 2px. 

In regards to the for-loop, this is where you say something like:

{% for product in collections.featured %}

  <img src="{{ image.src | product_img_url: 'medium' }}">

{% endfor %}

This way, you only have one line of "img" code but it repeats many times. Are you not using something like this? This is pretty much standard in any theme, including Timber. Are you writing this theme from scratch?

 

0 Likes
Shopify Partner
8 0 0

Justin ~

You wrote: "It doesn't really matter what size the image is when it is uploaded to Shopify (step 1), as long as you give it the biggest version of the image that that image would ever have to be."

This is what I did: I photographed all images, ran them through the online PicResizer at 1024px, renamed every file, and then uploaded them to Shopify. I didn't do any enlarging anywhere on Shopify...only through the resizer. Maybe I was a little confusing in my original post, but again, I didn't mess with the images once they were on the website. This is where I got the information on sizing, and I followed it exactly.

I'll have to recheck the for-loop (about to send my daughter off to school in a moment), but as per Jason's post about putting the command 'large', I went through every single line of code on the entire site, and they were already set al 'large'. When I get back, I'll find the for-loop and set them at 'medium' and see if that helps. As I'm sure anyone who knows how to code remembers, it can be intimidating making even small changes due to the potential for gigantic changes, so yesterday I didn't set any lower image size in the css...which may have actually solved the problem :)

I appreciate your patience with a noob, and later today I will go over the css for the for-loop and keep you and Jason's posts handy :))

Again, much thanks!

Sean

0 Likes
Shopify Partner
165 0 36

No problem, I hope you find your solution. Increasing page load speeds is a challenge everyone struggles with, even the smartest people at Google! 

Just a final note, because I think you are still not getting my point. When you upload a product image to Shopify, the Shopify 'system' automatically generates multiple size options. You cannot 'resize' images in the Shopify service yourself. 

But yeah, it's no problem to upload super high quality photos to Shopify, but just don't ask for the image in its original size when you request it in your HTML, since it'll never need to be that big. 

An image in Shopify servers is NOT the exact same image when you request it. You are requesting a 'copy' of it, and you can pick the size.

Anyway, good luck!

0 Likes