Блог

Отложите загрузку скрытых изображений

Отложите загрузку скрытых изображений — пожалуй один из самых основных факторов который влияет на оценку скорости загрузки сайта в google pagespeed insights. Рекомендуется отложить загрузку всех изображений которые не видны на первом экране страницы. Это уменьшит время до начала взаимодействия. Самый распространенный способ — это lazy loading. Суть метода в том, что изображения динамически подгружаются во время прокрутки страницы.

Для wordpress есть много бесплатных решений с lazy load загрузкой, достаточно в репозитории ввести Lazy Load:

Рассмотрим работу Lazy Load на примере плагина a3 Lazy Load. После его установки и активации, на странице настроек плагина есть следующие опции:

Основная опция — это Активация ленивой загрузки — она включает Lazy Load.
Далее у нас есть дополнительные настройки:

  • Ленивая загрузка изображений
  • Ленивая загрузка для видео и iframe
  • Исключить URI’s и Страницы
  • Оптимизация скрипта загрузки
  • Плагины мобильных шаблонов WordPress
  • Эффекты и стили
  • Порог старта загрузки изображений

В принципе все довольно просто и понятно.

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

Этот код необходимо разместить в header.php. Он сработает для всех изображений с классом lazy. Так же в теге img, должен быть заявлен атрибут srcset.

2 комментариев к “Отложите загрузку скрытых изображений

  1. Есть предположение, что ленивая загрузка и отложенная загрузка скрытых изображений не совсем одно и тоже. Допустим, если на вашем сайте на WordPress, на первом экране есть PNG изображение, которое отображается только на десктопах, то при ленивой загрузке оно загружается сразу. Соответственно если это изображение скрыто на мобилках, оно все равно подгружается сразу (например если вы пользуетесь wordpress и elementor), т.к. плагину ленивой загрузки без разницы отображается картинка в мобилках или нет: если есть картинка на первом экране — надо сразу загружать. Соответственно если вы видите в рекомендациях google pagespeed insights отложить загрузку скрытых изображений, ленивая загрузка с большой долей вероятности вам не поможет.

    В рекомендациях google pagespeed insights говорится о том, чтобы скрипт определял, что данная картинка на данном устройстве скрыта, соответственно ее загружать сейчас не нужно (или вообще загружать не нужно).

    Есть мысли по этому поводу?

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© Copyright 2014 -  vchuy-develop.com. All rights reserved