Trying to defer off screen images... not sure where to add one piece of code... please help?

20 0 1

I am trying to make my home pages faster, I want to use large images on the home page and while they are all optimized, they are killing the load time of my site. I want to try to defer off screen images (anyone have any other suggestions?). I had to add a bunch of code but I can't figure out how to implement step #3, could someone please advise?


3. Change the image tags in your theme by adding class “lazyload” to the image tags and changing the src attribute to data-src attribute:

{% for img in product.images %}
 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
 <img class="lazyload"
 src="{{ img | img_url: '300x' }}"
 data-src="{{ img_url }}"
 data-widths="[720, 1080]"
 data-aspectratio="{{ img.aspect_ratio }}"
{% endfor %}