-3

I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery (https://varvy.com/pagespeed/defer-images.html) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?

The code provided is at the bottom of Patrick's article. https://varvy.com/pagespeed/defer-images.html

Any help would be appreciated :)

I have yet to try to put any code anywhere because I don't want to break something.

Endless Hair Extensions
  • 1
  • 2

1 Answers1

0

You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.

<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images

See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files? – Endless Hair Extensions Jan 03 '19 at 23:17
  • Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine. – Endless Hair Extensions Jan 03 '19 at 23:18
  • It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image. – Diodeus - James MacFarlane Jan 04 '19 at 13:49