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

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

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

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

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

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

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

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

	<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;

  if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;

if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

let lazyImage = entry.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.srcset = lazyImage.dataset.srcset;

lazyImage.classList.remove("lazy");

lazyImageObserver.unobserve(lazyImage);

}

});

lazyImages.forEach(function(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

</script>

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

Post Views: 2 885

+359-87-701-35-06

vchuy.develop@gmail.com