Одним из ключевых моментов оптимизации сайта является скорость загрузки. Она влияет на процент отказов, продолжительность пребывания на сайте, ранжирование поисковиков и стоимость клика.
Чаще всего страницы долго грузятся из-за тяжелых картинок и видео. Google рекомендует несколько способов их оптимизации:
- сжатие медиафайлов;
- кэширование;
- отложенную загрузку.
С последней и будем разбираться.
Lazy loading – что это такое?
«Ленивая» загрузка — это способ оптимизировать те изображения, которые не обязательны при загрузке страницы или взаимодействия с пользователями. Эти файлы будут отображаться, только если понадобятся посетителю — при скролле или нажатии на элемент (в зависимости от настроек).
Отложенную загрузку рекомендуется применять для картинок вне экрана, то есть расположенных ниже области страницы, которую просматривает пользователь. И это логично: зачем загружать то, чего не видно, тем более это увеличивает время загрузки для взаимодействия.
Каким сайтам нужна отложенная загрузка?
- На страницах, содержащих много изображений (фотоотчеты, статьи с большим количеством медиафайлов).
- Если скорость низкая в сравнении с конкурентами.
- Если по оценке PageSpeed Insights меньше 50 баллов.
- Если сайт расположен на слабом сервере.
- Если больше половины трафика идет с мобильных устройств.
Зачем ее использовать?
- Чтобы пользователь мог взаимодействовать со страницей, пока страница грузится.
- Сэкономить трафик, что особенно актуально с мобильным или слабым интернетом. Пока до изображения не доскроллят — он не будет грузиться, съедая килобайты.
Как отображаются медиафайлы при «ленивой» загрузке?
- через клик на элемент (на миниатюру, ссылку);
- скроллингом — когда файл попадает в зону видимости или пользователь доходит до определенного места на странице (например, так подгружаются изображения товаров в каталогах интернет-магазинов). При этом на месте файла может стоять картинка-заглушка.
- в фоновом режиме — используется для тех файлов, без которых не обойтись при последующих действиях (например, какие-то чертежи, схемы, образцы документов). Прежде чем внедрить это решение, нужно протестировать на нескольких страницах, нужна ли пользователю такая загрузка.
Таким образом, при «ленивой» загрузке сокращается время до отображения страницы и взаимодействия, и пользователь моментально видит рабочий сайт.