Как сделать “правильный” Lazy Load

Как сделать “правильный” Lazy Load

Для большенства проектов, все можно прописать и оптимизировать в ручную, для Вордпресс ситация обстоит хуже - в репозитории WordPress нет ни одного плагина, который реализует правильный Lazy Load. Неважно что Вы поставите: Lazy Load от Smush, Lazy Load от WP Rocket или a3 Lazy Load - они все подставляют в src заглушки. 

Но Вы можете сделать сами правильную отложенную загрузку. Для этого нужно, чтобы в атрибуте src всегда была ссылка на изображение, а заглушка подставлялась в атрибут srcset.

Вот так должно быть до прокручивания страницы:

<img src="/full-img.jpg" alt="" srcset="placeholder.svg" sizes="(max-width: 680px) 100vw, 680px" data-srcset=" /full-img-300x169.jpg 300w, /full-img-768x432.jpg 768w, /full-img.jpg 1200w">

Вот так после прокручивания страницы:

<img src="/full-img.jpg" alt="" srcset="/full-img.jpg" sizes="(max-width: 680px) 100vw, 680px" data-srcset=" /full-img-300x169.jpg 300w, /full-img-768x432.jpg 768w, /full-img.jpg 1200w">

В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .

 

О нас

Вы уверены, что ваш бренд нуждается в помощи креативной команды? Свяжитесь с нами, чтобы мы начали работать над вашим проектом !

Подробнее

Ищете