Даже сейчас многие крупные компании подводят своих пользователей и, в свою очередь, теряют трафик из-за низкой скорости сайта. Почти всегда самым большим виновником являются большие файлы изображений, и тем не менее многие компании до сих пор не ленятся их загружать.

Скорость страницы важна как для вашего пользователя, так и для поисковых систем. Изображения играют ключевую роль на многих веб-сайтах и ​​часто вносят наибольший вклад в раздувание страниц. Независимо от того, сжаты ли ваши изображения или вы работаете с последними форматами изображений, о простой отложенной загрузке еще многое можно сказать.

Ленивая загрузка — это термин, используемый для описания загрузки скриптов или контента, когда они нам нужны. Без отложенной загрузки большие веб-страницы могут загружать большие объемы данных, которые пользователь никогда не увидит и не использует, что приведет к задержке начальной загрузки страницы и отрицательно скажется на пользовательском опыте. Время загрузки страницы может иметь существенное влияние на цели веб-сайта. Компания Doubleclick от Google обнаружила, что ошеломляющие 53% посещений с мобильных устройств были прекращены, если загрузка сайта занимала более 3 секунд, в то время как BBC обнаружила, что они потеряли еще 10% пользователей. за каждую дополнительную секунду загрузки их сайта.

Скорость страницы зависит не от скорости сайта, а от того, насколько быстро пользователь воспринимает страницу. Используя загрузчики и анимацию, мы предлагаем движение и то, что что-то происходит. Pinterest обнаружил, что, сократив воспринимаемое время ожидания на 40%, они увеличили количество регистраций на 15%.

Конечно, не только конечный пользователь любит, чтобы наши страницы были быстрыми, но и поисковые системы. В июле 2018 года Google выпустил «Обновление скорости», в котором скорость страницы была введена в качестве фактора ранжирования для мобильного поиска.

Поскольку от скорости страницы зависит очень многое, от рейтинга SEO до коэффициента конверсии и общего удовлетворенности пользователей, важно, чтобы мы оптимизировали наши веб-страницы для повышения скорости везде, где это практично и возможно. Обзор сайта показал, что первоначальная загрузка домашней страницы составляла 5 МБ с более чем 3 МБ изображений. По данным британского сайта телефонной сети 4g.co.uk, при средней скорости загрузки 3G в Великобритании загрузка домашней страницы займет 13 секунд, из которых 8 секунд будут изображениями. Сократив объем данных, требуемых изображениями при начальной загрузке страницы, мы могли бы значительно улучшить взаимодействие с пользователем. Чтобы поместить это в контекст, используя данные BBC о потере 10% пользователей за каждую дополнительную секунду времени ожидания сверх ожидаемых 3 секунд, если бы мы начали со 100 пользователей 3G, при текущей скорости страницы 13 секунд для домашней страницы мы были бы осталось всего 35 пользователей. Однако, если бы мы загрузили изображения позже и уменьшили первоначальную загрузку всего до 2 МБ, наша страница загружалась бы намного быстрее, за 5 секунд, и у нас остался бы 81 пользователь — увеличение примерно на 57%.

Вот тут-то и появляется отложенная загрузка. Существует несколько доступных библиотек отложенной загрузки с открытым исходным кодом, которые обрабатывают загрузку немного по-разному. Однако общий принцип тот же: тег изображения помещается в ваш HTML либо с пустым атрибутом src, либо с атрибутом src, указывающим на заполнитель, и с атрибутом data-src (или подобным), который указывает на ваше лениво загруженное изображение — Как только начальная страница загружена, JavaScript может вступить во владение, загружая все изображения сразу или загружая изображения по мере их прокрутки пользователем, если они необходимы.

На этом этапе есть несколько моментов, которые мы можем подвергнуть сомнению:

Зачем нам загружать заполнители? Это нежелательные данные изображения

Как насчет SEO-оптимизации изображений?

Что делать, если у пользователя не включен JavaScript?

Разве LazyLoading не становится нативным?

Это действительные моменты, которые имеют веские основания для тщательного рассмотрения.

Так зачем нам изображения-заполнители? Ну, проблема с отложенной загрузкой изображений заключается в том, что если мы не будем осторожны, как мы называем наши изображения, они могут привести к смещению содержимого на странице, иногда резкому, вызывая плохой пользовательский опыт. Есть несколько способов справиться с этим: первый и самый простой — обрезать все наши лениво загруженные изображения до одинакового размера — тогда нам нужно загрузить только одно изображение-заполнитель для всего. Однако это очень ограничивает с точки зрения дизайна и редактора контента. Мы могли бы дать себе немного больше свободы, работая с соотношением размеров изображения и свойством CSS object-fit. Однако для максимальной свободы мы можем создавать отдельные заполнители изображений — этот метод легко быстро отклонить как бессмысленный, потому что мы все еще загружаем изображения на

SEO всегда вызывает беспокойство при внесении больших изменений на наш сайт, и его следует тщательно учитывать. Согласно панели ClickSteam компании Marketing Insights в США, по состоянию на февраль 2018 года поиск изображений Google знаком с более чем 22% поиска в Интернете в США, хотя нам не удалось найти данные по Великобритании, это число по-прежнему требует уважения. Итак, если поиск изображений так важен для SEO, зачем нам скрывать все наши изображения? Что ж, на самом деле Google сами продвигают ленивую загрузку в целях SEO, если все сделано правильно, и используют эту технику в своей собственной функции поиска изображений. К счастью, у нас есть инструменты для имитации поисковых роботов Google — с помощью Google Puppeteer API мы можем сделать снимок того, что видит Google, и убедиться, что поисковая система ожидает загрузки наших ленивых изображений, прежде чем очищать веб-сайт для данных.

Как мы уже говорили, отложенная загрузка полагается на JavaScript для работы, что совершенно нормально для 99,8% пользователей по всему миру — по данным Blockmetry в 2016 году — Однако они отмечают, что эта цифра скрывает множество интересных региональных географических закономерностей. Исключительно высокий уровень отключенного JavaScript был в регионах Восточной Азии и Африки, а также в Финляндии. Однако с помощью нескольких простых приемов мы можем обеспечить бесперебойную работу для этих пользователей, не теряя возможности отложенной загрузки для 99,8%. Добавив класс «no-js» в наш тег ‹html› и добавив строку в начало нашего файла JavaScript, чтобы удалить его (метод, используемый в библиотеках, таких как Modernizer), мы можем определить, включен ли у пользователя JavaScript, и отобразить содержание соответствующим образом. Комбинация этого с блоком ‹noscript›, содержащим неленивую версию нашего изображения, непосредственно перед или после нашего ленивого изображения и классом CSS, который скрывает все ленивые изображения, если присутствует класс no-js, у нас есть ленивая загрузка для большинства и плавный откат без JavaScript.

<div class="image-container">
    <noscript>
        <img alt="My image" src="hero.jpg" class="lazy-fallback">
    </noscript>
    <img alt="My image" src="hero-blank.jpg" data-src="hero.jpg" class="lazy">
</div>

Открывающий тег ‹html›:

<html lang="en" class="no-js">

JavaScript (es6):

(() => {
    document.querySelector('html').classList.remove('no-js');
})();

CSS:

.no-js .lazy,
.lazy-fallback {
    display: none;
}

.no-js .lazy-fallback {
    display: block;
}

Но является ли все это пустой тратой времени, если отложенная загрузка должна стать встроенной функцией браузера — короче говоря, нет. Хотя отложенная загрузка должна стать встроенной функцией в течение следующих нескольких лет, мы еще не достигли этого.

В заключение, отложенная загрузка имеет много преимуществ, будь то для конечного пользователя или для поисковых систем, и с относительно небольшим объемом работы мы можем обеспечить более плавную и быструю работу для 99,8% пользователей Интернета в мире, одновременно повышая нашу SEO и иметь изящный запасной вариант для 0,2% пользователей, у которых может быть отключен JavaScript. Самое замечательное в реализации отложенной загрузки то, что это не должно быть все или ничего — мы могли бы ввести отложенную загрузку, по одному изображению за раз на нашем сайте, и это не окажет негативного влияния на изображения, которые мы решили оставить в виде простого HTML. только изображения.