Как правильно реализовать 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 WordPress
Все эти и многие другие функции для оптимизации изображений на сайте реализованы в нашем плагине для WordPress True Image & Lazy Load:
-
True Image & Lazy Load3,600.00₽ – 12,000.00₽
