Ленивая загрузка изображений. Часть 1

Изображения являются важнейшей частью любого сайта. Являются ли они маркетинговыми баннерами, изображениями продуктов или логотипов, невозможно представить сайт без них. К сожалению, именно на изображения приходится наибольшая доля при загрузке страницы.

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

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

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

Что такое ленивая загрузка?

Под словом лень мы часто понимаем желание отложить какую-то работу в долгий ящик или нежелание делать ее вообще.

Аналогично, ленивая загрузка откладывает загрузку ресурсов на странице до тех пор, пока эти ресурсы не понадобятся. Вместо того чтобы загрузить их сразу при загрузке страницы, как происходит обычно, мы позволяем им загрузиться позже.

Ленивая загрузка – это набор техник в создании сайтов и приложений, которые откладывают загрузку ресурсов на странице до того момента пока они не понадобятся реально, вместо их предварительной загрузки. Эти техники улучшают производительность и использование ресурсов устройства, а также сокращают накладные расходы.

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

Зачем нужна ленивая загрузка вовсе?

Если пользователь никогда не проматывает страницу до той части, которая содержит изображения, то пользователь никогда это изображение и не увидит. Поэтому изображение не загрузится в первую очередь, так как оно никогда не будет использоваться.

Вы, наверное, уже можете предположить, как это поможет вам и вашим пользователям. Вот, по крайней мере, два преимущества, которые мы получим, используя ленивую загрузку изображений.

Прирост производительности

Очевидное преимущество, которое мы получим, используя ленивую загрузку – это ускорение загрузки страниц сайта, вследствие уменьшения их общего размера. Ленивая загрузка сокращает количество изображений, подлежащих предварительной загрузке. Меньше изображений означает, меньше байтов для загрузки. А чем меньше байтов изображений будет загружено, тем быстрее будет отрисована страница.

Таким образом, любое устройство даже при слабом сигнале сети будет способно загрузить и обработать необходимые ресурсы намного быстрее. А в итоге, страница становится доступной для пользователя намного раньше.

Сокращение накладных расходов

Облачные сервисы хостинга, такие как Сети доставки контента (CDN), веб-серверы или хранилища, доставляют изображения (или любые другие ресурсы) до конечного потребителя по цене, основанной на количестве переданных байтов. Лениво загруженное изображение может никогда не загрузиться фактически, если пользователь не достигнет его. Таким образом, вы можете уменьшить объем передаваемых данных, и в конечном итоге сохранить себе бюджет.

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