Ускорение сайта за счет ленивой загрузки изображений. Пример реализации Image Lazy Loading

Какой новый атрибут стал поддерживать Google?

1. Увеличивается размер сайта из-за использования дополнительных скриптов;
2. Возрастает сложность поддержки;
3. Не поддерживается индексация поисковой системой.

Как использовать атрибут loading на сайте?

• img — тег для встраивания изображений на страницы сайта;
• iframe — тег для встраивания медиа элементов.

<img align="center" src="celebration.jpg" loading="lazy" alt="image" />

<iframe src="video-player.html" loading="lazy"></iframe>

• lazy;
• eager;
• auto.

<img align="center" src="megaindex.jpg" loading="lazy" alt="megaindex"/>

<img align="center" src="megaindex.jpg" loading="eager" alt="megaindex"/>

<img align="center" src="image.jpg" loading="auto" alt="image"/>

<iframe src="video-player.html" loading="lazy"></iframe>

<script>
if ('loading' in HTMLImageElement.prototype) { 
    // Поддерживается
} else {
   // Применить полифилл или JavaScript
}
</script>

Вопросы и ответы

Зачем нужен атрибут loading?

Как проверить поддерживается ли атрибут в браузере?

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

• Близость элемента к видимой части;
• Скорость соединение с интернетом.

Как браузер узнает о размере изображений?

Как включить поддержку атрибута в Google Chrome до глобального релиза?

В каких случаях атрибут lazy=loading использовать не следует?

Какие браузеры будут поддерживать атрибут?

• Chrome;
• Chrome Android;
• Opera;
• Microsoft Edge;
• Safari;
• iOS Safari.

Выводы

• Увеличить скорость открытия страниц сайта. Скорость загрузки влияет на поисковую оптимизацию;
• Сэкономить трафик, а значит снизить расходы на интернет для пользователя;
• Улучшить поведенческие факторы. Загрузки данных в видимой области страницы будет происходить быстрее. Исходя из аналитических данных Google известно, что от скорости загрузки сайта зависит показатель конверсии;
• Снижение объёма передаваемых данных, что позволяет экономить средства для больших сайтов;
• Уменьшить размер страниц за счет устранения из кода лишних скриптов, которые использовались для реализации ленивой загрузки ранее.

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

• Повышение лояльности пользователя;
• Улучшение поисковой оптимизации сайта;
• Экономия на пропускном канале.

• Индексация краулером поисковой системы изображений, которые загружаются с использованием атрибута loading=lazy;
• Улучшение поведенческих факторов за счет повышения скорости загрузки страницы;
• Улучшение поисковой оптимизации за счет повышения скорости загрузки сайта.

• SEO оптимизация изображений — Как получать трафик за счет SEO оптимизации изображений;
• Как проанализировать и увеличить скорость загрузки сайта;
• Самый простой способ ускорить загрузку сайта.