Статьи

Как правильно реализовать Lazy Load изображений на сайте

После выступлений и публикаций специалиста по реверс-инжинирингу и техническому SEO, известного под ником Demi Murych (Максим Бобров) у многих возникли вопросы "а как же на практике реализовать правильный Lazy Load изображений?".

Существует несколько выступлений, вебинаров и видео, где Demi Murych объясняет каким образом нужно изменить скрипт для отложенной загрузки изображений. Вот пример одного из таких видео (смотреть с 29:16):

Кое что по поводу реализации отложенной загрузки писал и я - например эта статья на vc.ru

Примеры реализации

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

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

Пример изображения

У изображения ниже:

  • в атрибуте src максимальное качество изображения
  • в атрибуте srcset до прокручивания страницы заглушка в виде svg
  • в атрибуте srcset после прокручивания страницы различные размеры исходного изображения, которые браузер загружает в зависимости от типа устройства и экрана
  • реализован правильный LightBox, когда картинка не находится внутри ссылки на полное изображение

Как правильно реализовать Lazy Load изображений на сайте

Автор изображения: Patti Black Лицензия: Unsplash License

Правильный Lazy Load WordPress

Все эти и многие другие функции для оптимизации изображений на сайте реализованы в нашем плагине для WordPress True Image & Lazy Load:

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *