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

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

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

Отложите загрузку скрытых изображений – пожалуй один из самых основных факторов который влияет на оценку скорости загрузки сайта в 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.

О авторе:

Я занимаюсь веб-разработкой и freelance более 4-х лет, ранее работал 5 лет в банковской сфере, в отделе it-технологий. Специализируюсь на таких популярных CMS: WordPress, Drupal и Joomla. Разрабатываю сайты любой сложности, среди которых: блоги, landing page (лендинги), интернет-магазины, сайты-визитки, корпоративные сайты и прочее.

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