Отложенная загрузка картинок – 2 простых способа ускорить сайт

За все годы работы с сайтами в целом я уверенно могу сказать, что более 65% всего контента мы получаем именно в картинках. Я не говорю конкретно о своем сайте, но вспомнив Facebook, Vk и другие социальные сети, не говорю уже об Instagram сразу хочется согласиться с моим утверждением.

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

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

Если ты решил проверить свой через Google PageSpeed Insights, то скорее всего ты получишь сообщение:

Отложенная загрузка файлов

Как видно на картинке Google выписывает отложите загрузку скрытых изображений, и вот в моем случае это поможет мне увеличить скорость загрузки сайта на 8 секунд.

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

То есть когда пользователь загружает сайт, сначала браузер скачивает лишь html без картинок, после чего картинки начинают скачиваться, появившись на видимой части сайта (то есть при прокрутке).

Это очень сильно влияет на общий показатель скорость загрузки страниц.

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

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

Почему тебе нужна ленивая загрузка картинок?

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

  • Сайт начнет загружаться значительно быстрее;
  • Более быстрая загрузка влияет на поведение пользователей на сайте;
  • А вот поведенческие факторы влияют на позиции сайта в поисковых системах;
  • Изображения загружаются только тогда, когда попадают в viewport устройства, а значит если пользователь не будет прокручивать страницу полностью, то и экономия трафика будет максимальной.

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

Ленивая загрузка картинок от Google

Этот способ рекомендует сам Google, не знаю на сколько он идеальный, но в целом если они рекомендуют значит так нужно. Рекомендуют они использовать скрипт lazysizes. Все что нужно, это подключить у себя на странице этот скрипт (перед закрывающим тегом </body>):

  <script src="lazysizes.min.js" async></script>

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

<img data-src="images/flower3.png" class="lazyload" alt="">

То есть вместо src указываем data-src, а также добавляем класс lazyload.

В целом все работает максимально четко.

Отложенная загрузка картинок, которую использую я по аналогии с Google

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

 <script src="lazyImage.js" async></script>

Дальше все картинки, у которых вместо src будет прописан data-src, будут лениво погружаться.

<img data-src="someImage.png" class="lazyload" alt="">

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

Решил я ее следующим способом. Копируем содержимое скрипта, и делаем с него функцию. После завершения Ajax запроса выполняем его в виде функции.

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

Дело в том, что в jQuery ну уж слишком много лишнего кода, а подключать эту библиотеку только ради этого нет смысла.

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

Все потому что и красиво получается и по делу.

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

Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Оставьте комментарий