Оптимизация загрузки мобильной версии, как сделать lazyload на фоновое изображение?

[Sobra]

@Alisa есть два вопроса, по которым не нашел ответа в интернете. В PageSpeed Insights для мобильной версии:
1. "Удалите неиспользуемый код JavaScript" - tag метрики яндекс тормозит загрузку от 1 секунды до 1,5. Код метрики находится в head, пробовал в подвал сайта, но ощутимо ничего не давало, при это и советуют вставлять его в head. Все дополнительные функции метрики отключены. Как можно с этим бороться? В интернете много инфы посмотрел и на habr, но там максимум, что могут предложить, это чтобы скрипт находился у себя на сервере.
2. "Отложите загрузку скрытых изображений" - у меня установлена lazy загрузка через скрипт, на все постеры она работает, но на картинки коллекции я не знаю как правильно использовать, пробовал пару раз, но у меня не прогружается ничего.
Код на картинки к коллекциям выглядит так:

<a href="<%- content.url %>" class="cinemapress-news"
                   style="background-image:url('<%- content.image %>');">

Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.

 

[Forgotten]

@Alisa есть два вопроса, по которым не нашел ответа в интернете. В PageSpeed Insights для мобильной версии:
1. "Удалите неиспользуемый код JavaScript" - tag метрики яндекс тормозит загрузку от 1 секунды до 1,5. Код метрики находится в head, пробовал в подвал сайта, но ощутимо ничего не давало, при это и советуют вставлять его в head. Все дополнительные функции метрики отключены. Как можно с этим бороться? В интернете много инфы посмотрел и на habr, но там максимум, что могут предложить, это чтобы скрипт находился у себя на сервере.
2. "Отложите загрузку скрытых изображений" - у меня установлена lazy загрузка через скрипт, на все постеры она работает, но на картинки коллекции я не знаю как правильно использовать, пробовал пару раз, но у меня не прогружается ничего.
Код на картинки к коллекциям выглядит так:

<a href="<%- content.url %>" class="cinemapress-news"
                   style="background-image:url('<%- content.image %>');">

Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.

Вот тоже не могу заставить работать ленивую загрузку на картинке в бэкграунде!

Типо такого:

style="z-index:1;width:100%;height:300px;background: url('/files/poster/medium/571335.jpg') center no-repeat;background-size: cover;box-shadow: 0 6px 12px rgba(0,0,0,.23),0 10px 40px rgba(0,0,0,.19);"

Может кто посоветовать как реализовать?

 

[Sobra]

@Alisa есть два вопроса, по которым не нашел ответа в интернете. В PageSpeed Insights для мобильной версии:
1. "Удалите неиспользуемый код JavaScript" - tag метрики яндекс тормозит загрузку от 1 секунды до 1,5. Код метрики находится в head, пробовал в подвал сайта, но ощутимо ничего не давало, при это и советуют вставлять его в head. Все дополнительные функции метрики отключены. Как можно с этим бороться? В интернете много инфы посмотрел и на habr, но там максимум, что могут предложить, это чтобы скрипт находился у себя на сервере.
2. "Отложите загрузку скрытых изображений" - у меня установлена lazy загрузка через скрипт, на все постеры она работает, но на картинки коллекции я не знаю как правильно использовать, пробовал пару раз, но у меня не прогружается ничего.
Код на картинки к коллекциям выглядит так:

<a href="<%- content.url %>" class="cinemapress-news"
                   style="background-image:url('<%- content.image %>');">

Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.

C 1-ым разобрался.

 

[Sobra]

@Alisa есть два вопроса, по которым не нашел ответа в интернете. В PageSpeed Insights для мобильной версии:
1. "Удалите неиспользуемый код JavaScript" - tag метрики яндекс тормозит загрузку от 1 секунды до 1,5. Код метрики находится в head, пробовал в подвал сайта, но ощутимо ничего не давало, при это и советуют вставлять его в head. Все дополнительные функции метрики отключены. Как можно с этим бороться? В интернете много инфы посмотрел и на habr, но там максимум, что могут предложить, это чтобы скрипт находился у себя на сервере.
2. "Отложите загрузку скрытых изображений" - у меня установлена lazy загрузка через скрипт, на все постеры она работает, но на картинки коллекции я не знаю как правильно использовать, пробовал пару раз, но у меня не прогружается ничего.
Код на картинки к коллекциям выглядит так:

<a href="<%- content.url %>" class="cinemapress-news"
                   style="background-image:url('<%- content.image %>');">

Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.

2-ое не решил полноценно.

 

[Alisa]

Все шаблоны переведены в режим работы lazyload:

• Все постеры и кадры на сайте вначале маленькие (<%- movie.poster_min %>);
• После загрузки всех маленьких постеров и кадров происходит сценарий:
  • Если все ресурсы (JS, CSS, и т.п.) на страницы загружены, маленькие постеры и кадры изменяются в фоне на качественные постеры и кадры (<%- movie.poster %> или <%- movie.poster_big %>);
  • Если ресурсы еще не загружены, даём им на загрузку еще 5 секунд, и затем принудительно изменяем все постеры и кадры на качественные (<%- movie.picture %> или <%- movie.picture_big %>).

Код ставить в самый низ шаблона:

<script>
  (function() {
    var dataAllSrc = document.querySelectorAll('[data-cinemapress-src],[data-cinemapress-bg-src]');
    var dataAllSrcCount = (dataAllSrc && dataAllSrc.length) || 0;
    if (!dataAllSrcCount) return;
    var dataAllSrcCountComp = 0;
    var fSrc = {
      'dataCountImage': function() {
        dataAllSrcCountComp = dataAllSrcCountComp+1;
        if (dataAllSrcCount && dataAllSrcCountComp >= dataAllSrcCount) {
          dataAllSrcCount = 0;
          var st;
          window.addEventListener('load', function() {
            clearTimeout(st);
            fSrc['checkLoad']('dataSetImage');
          });
          st = setTimeout(function() {
            fSrc['checkLoad']('dataSetImage');
          }, 5000);
        }
      },
      'dataSetImage': function(el) {
        var src = el.dataset.cinemapressSrc;
        var bgSrc = el.dataset.cinemapressBgSrc;
        if (!src && !bgSrc) return;
        var img = new Image();
        img.src = src ? src : bgSrc;
        img.onload = function() {
          if (src) { el.src = src; }
          else { el.style.backgroundImage = 'url("' + bgSrc + '")';}
        }
      },
      'checkLoad': function(fn) {
        if (!dataAllSrc) return;
        dataAllSrc.forEach(function(src) {
          if (typeof src.complete === 'undefined' || src.complete) {
            fSrc[fn](src);
          } else {
            src.addEventListener('load', function() {
              fSrc[fn](this);
            }, { once: true });
          }
        });
      }
    }
    fSrc['checkLoad']('dataCountImage');
  })();
</script>

В шаблоне сделать замену:

• Было

<img src="<%- movie.poster %>">
<img src="<%- movie.picture %>">
<div style="background-image:url(<%- movie.poster %>)">
<div style="background-image:url(<%- movie.picture %>)">

• Стало

<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>">
<img src="<%- movie.picture_min %>" data-cinemapress-src="<%- movie.picture %>">
<div style="background-image:url(<%- movie.poster_min %>)" data-cinemapress-bg-src="<%- movie.poster %>">
<div style="background-image:url(<%- movie.picture_min %>)" data-cinemapress-bg-src="<%- movie.picture %>">

Либо используйте https://github.com/verlok/vanilla-lazyload