Асинхронная загрузка изображений без js

Алексей Будагов,

На некоторых страницах сайта количество изображений переваливает за 100. И пока они все не загрузятся - браузер не покажет контент. Решением будет загрузка изображений после загрузки страницы.

Есть много решений на js, красивых и удобных. Но использовать js, как по мне, не самый лучший вариант.

Есть другой, простой способ - отображение картинок в качестве фона (style="background-image: url('#path-to-img#');")

Тег img против background-image

Слева
<img src="/upload/resize_cache/iblock/0b8/128_128_2/zelenyy_kitayskiy_chay_s_zhasminom_khua_chzhu_cha.jpg" alt="Зеленый китайский чай с жасмином - Хуа Чжу Ча">
Справа
<div style="background-image: url('/upload/resize_cache/iblock/0b8/128_128_2/zelenyy_kitayskiy_chay_s_zhasminom_khua_chzhu_cha.jpg');"></div>
Гифка с показательной загрузкой

Очевидно, что при использовании background-image контент появляется намного раньше, а картинки появляется уже после, по мере их загрузки.

Проверил, прогрессивный jpeg поддерживается (загрузка картинки в несколько этапов). А так же javascript начинает обрабатываться раньше (до загрузки всех картинок). Включил на телефоне опцию "принудительно использовать только 2G" разница колоссальная.

Но есть и минусы:

  • При печати страницы сайта теги img печатаются, а background-image нет.
  • Плохая индексация поисковиками
  • Браузеры разработанные для людей с ограниченными возможностями читают альты картинок. У background-image нечего прочитать.
Опубликовано 7 Апреля 2017
производительность, верстка

Возврат к списку

Комментарии