Попытка отложить изображения без ленивой загрузки или jquery, используя shopify

Question

Я использую Shopify, и у меня есть некоторые проблемы со скоростью мобильного устройства, на моей домашней странице все мои изображения загружаются одновременно, поэтому я перешел к уроку Патрика Секстона на статью на varvy.com: Отложите изображения без ленивой загрузки или jquery (https://varvy.com/pagespeed/defer-images.html) Я застрял на том, куда поместить фактический HTML-код и код javascript. И нужно ли вводить код один раз для каждого изображения или этот код, представленный в руководстве, охватывает все изображения?
Кто-нибудь может помочь, пожалуйста?

Приведенный код находится в нижней части статьи Патрика. https://varvy.com/pagespeed/defer-images.html

Любая помощь будет оценена :))

Я еще не попробовалпоместить любой код куда угодно, потому что я не хочу что-то сломать.

Answer 1

Вы можете использовать srcset для загрузки изображений с определенным разрешением.Это не откладывает их, но облегчит использование полосы пропускания.

<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"> 

Это поддерживается Shopify: https://www.shopify.ca/partners/blog/using-responsive-images

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