Большинство людей по своей природе являются визуалами. Это значит, что им важнее увидеть картинку, нежели прочитать длинный текст. Это особенно проявляется в эпоху «клипового» мышления. Поэтому, без изображений на сайте обойтись не удастся. Тем более, если это продающая страница. Это и баннеры, и логотипы, и картинки товаров. Изображения занимают приблизительно 50% от общего объёма сайта.
Чем больше на странице изображений, тем больше это сказывается на времени её загрузки. Причём, не в лучшую сторону. Для того, чтобы пользователю было комфортно взаимодействовать с сайтом — картинки и другую графику необходимо настроить таким образом, чтобы они не влияли на скорость. Одним из приёмов является отложенная загрузка изображений.
Что такое ленивая загрузка изображений
Открывая страницу, пользователь не видит её сразу полностью. Ему доступна исключительно та часть, которая отображается на экране устройства. Чтобы пролистать ниже, необходимо скролить. Так зачем загружать сразу все изображения, которых попросту нельзя увидеть? Они являются закадровыми и при начальной загрузке страницы необходимости в них нет. Если такие изображения отложить — это значительно ускорит взаимодействие.
Пример подобной «ленивой загрузки» можно наблюдать в правильно настроенной работе интернет-магазинов или фото-сервисов. Они используют плейсхолдеры, которые по мере прокручивания страницы вниз, оперативно меняются на изображения. Следовательно, если по каким-либо причинам пользователь покинет сайт, то часть картинок так и не загрузится.
Картинка попадает в видимую часть экрана
Зачем нужна отложенная загрузка
Основная задача любого ресурса — дать пользователю нужную информацию. И если изображения в данный момент в неё не входят, то и необходимости в них нет. Отложенная загрузка позволяет улучшать производительность и экономить ресурсы.
● На сайтах с функционалом JS, DOM-загрузка крайне важна, так как скрипты будут ждать её выполнения. Если страница содержит много изображений, то их асинхронная загрузка позволит существенно сократить время взаимодействия. Зачастую данный фактор является решающим для пользователя — остаться на сайте или нет.
● Настройка «ленивой загрузки» позволяет пользователям существенно экономить трафик. Если страница не была проскролена до конца, тяжёлые картинки не подгрузились. Это важно при просмотре контента с телефона и других мобильных устройств, а так же при слабом соединении с сетью.
Отложить можно загрузку практически любых изображений. Проверить какие из них подходят для этой цели доступно используя расширение Lighthouse в Google Chrome. Там же покажет и количество ресурсов, которые экономятся в процессе оптимизации.
Каким образом организовать ленивую загрузку изображений
Существует несколько способов, чтобы настроить отложенную загрузку изображений. Это можно сделать используя тег <img> внедрённый в URL-адрес, либо при помощи свойства CSS «background». Последнее позволяет создавать сразу несколько характеристик. Настройка при помощи тега <img> является затратной по времени, но наиболее распространённой. Поэтому, для начала рассмотрим её опцион.
Как провести настройку <img>
Данная работа состоит из двух этапов. На первом необходимо создать условия, при которых загрузка изображений не будет происходить автоматически, как только пользователь заходит на страницу. Стоит учитывать, что работая с тегом <img/>, браузер пользуется атрибутом «src»,чтобы изображение запустилось. При этом, абсолютно неважно, где эта картинка находится — вверху страницы или в самом низу. Браузер видит «src» и сразу принимает его в работу, начиная процесс запуска.
Следовательно, необходимо принять меры, чтобы загрузка была отложена. Для этого необходимо провести операцию переноса. URL-адрес изображения помещается непосредственно в сам атрибут «src» тега «image». Перенесённый атрибут оказывается пустым, соответственно браузер не видит его автоматически и не начинает загрузку со старта.
На втором этапе требуется дать указания браузеру, в какой именно момент он должен произвести загрузку изображения. Чтобы реализовать данную задачу, задаём параметр начинающий загрузку плейсхолдера как только он оказывается в видимой области. Проверить насколько корректно это работает можно двумя путями.
● Используя JavaScript. При этом необходимо учитывать три параметра — прокрутки, смены ориентации экрана или изменения его размера. Задаём любое из событий и смотрим какие изображения на странице ещё не загружены. После этого, нужно определить, что из этого в данный момент находится в «зоне видимости» пользователя. В случае, когда изображение не загружено, но находится в окне просмотра, выбираем URL из «data-scr» и переносим его в «src». После этого потребуется удалить «lazy». Изображения автоматически запустятся. Как только это будет выполнено, все инструменты с помощью которых проводился мониторинг, также нужно удалить. Чтобы повысить эффективность оптимизации, можно добавить тайм-аут при отложенной загрузке.
● Используя Intersection Observer API. Данный API самостоятельно определяет, когда изображение попало в зону видимости пользователя. Проще говоря — автоматизирует процесс. Он не требует просчёта времени и другого анализа, давая при этом отличную производительность. Обнаружив изображение при помощи API, необходимо применить «isIntersecting» и переместить URL из «data-src» непосредственно в «src». Отложенная загрузка запустится. После чего нужно удалить обсервер, а также «lazy» непосредственно из изображения.
Стоит учитывать, что Intersection Observer API в данный момент доступна не для всех браузеров.
Как провести настройку CSS фоновых изображений
Загрузка фоновых изображений CSS требует создания DOM и дерева CSSOM. Это требуется, чтобы определить конкретные задачи по работе с текущим документом. Что это значит на практике? В случае, когда CSS фонового документа изображения к данному документу не применяется, то браузер его и не загрузит. Таким образом, если не применить CSS «background-image» к конкретному элементу до того момента, как он попадёт в зону видимости, браузер и подозревать не будет о его существовании.
Скрипты остаются такими же, но есть нюансы именно в работе CSS. Потребуется найти элементы «bg-image». Как только к «background-image» добавляется «lazy», его требуется изменить на «none». В CSS комбинация использующая «lazy» имеет приоритет выше, нежели просто «background-image». Соответственно, ко всем элементам в которых произведена замена на «none», браузер применит опцию изначально.
В момент, когда изображение попадёт в окно просмотра, браузер автоматически удалит класс «lazy-none» и фоновое изображение начнёт загружаться.
Когда отложенную загрузку применять не стоит
Пытаясь максимально оптимизировать сайт, некоторые пользователи и разработчики могут применить опцию ленивой загрузки абсолютно ко всем изображениям, которые есть на странице. Однако, это стоит делать далеко не всегда, даже если сильно хочется. Не применяйте отложенную загрузку если это изображение изначально находится в верхней части страницы. Также не стоит этого делать по отношению к логотипам, заголовкам и рекламным баннерам. Они должны быть доступны пользователю при первой загрузке.
Не стоит помещать изображение в отложенные, если его хоть и небольшая часть, но попадает в поле зрения пользователя — это не способствует просмотру контента. То же самое касается и небольших страничек, если её можно проскролить несколькими движениями — ленивой загрузке здесь не место.
