Практически каждый сайт на своём борту имеет множество изображений, которые загружаются при открытии какой-либо страницы. В связи с этим, может возникнуть необходимость оптимизации скорости загрузки изображений. Особенно это актуально, когда изображений целое множество, к примеру, это витрина магазина, различные списки с превью изображениями, все подобные решения могут нуждаться в оптимизации скорости отрисовки страницы.
Для этих целей существует решение, которое так же называют Lazy Load (ленивая загрузка). Особенность данной реализации в том, что при загрузке элементов изображений на странице, загрузка изображений происходит только в видимой области. Таким образом, если мы начинаем прокручивать страницу в низ, то изображения, которые находятся ниже, будут уже загружены после. Такое решение экономит время на загрузку сайта, в свою очередь это дополнительные плюсы для пользователей и поисковых систем.
Теперь о внедрении данного решения. Решение на самом деле очень простое. Тег изображения (img) на странице подгружается привычным образом, однако вместо атрибута src ссылка на изображение указывается в атрибуте data-original. Первично страница загружается без загрузки самой картинки, но тег в теле присутствует. Загрузку изображения инициализирует js-скрипт, который и определяет, находится ли изображение в видимой области или нет.
Для использования скрипта Lazy Load достаточно подключить в заголовке страницы JQuery, после этого сам файл lazyload.js.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/lazyload.js">
Далее в теле документа выводятся изображения привычным образом, но с некоторыми особенностями.
<img class="lazy" data-original="img/example.jpg">
Как вы уже заметили ссылка на оригинал изображения указан в атрибуте data-original. Самого же атрибута src нет, его будет задавать скрипт Lazy Load после инициализации. И наконец, чтобы инициализировать работу скрипта, в конце страницы следует добавить код вида:
$("img.lazy").lazyload();
Всё довольно просто и удобно, так как не требует больших модернизаций на сайте для существующих проектов.
Кто интересовался вопросами оптимизации скорости загрузки сайта с большой вероятностью сталкивались с сервисом Google PageSpeed. Сервис оценивает скорость загрузки сайта и даёт некоторые рекомендации по оптимизации. Среди таких рекомендаций можно встретить пункт в справке Google, где рекомендуется использовать Lazy Load. Это хороший знак в том плане, что у поисковой системы однозначно не будет вопросов с распознаванием изображений и отложенной загрузкой.
Кстати иногда требуется использовать заглушку для изображений. Делается это с точки зрения эстетики отрисовки страницы. Заглушка представляет из себя простую картинку, которая существенно имеет меньше размер файла и максимально оптимизирована по размеру. Ссылку на заглушку указывают непосредственно в атрибут src тега img. Получается при первичной загрузки элемента, загружается заглушка. А далее уже Lazy Load делает своё дело. Так же чтобы исключить лишний запрос при загрузке заглушки, её кодируют в формат base64, таким образом она загружается вместе с основной страницей.
