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

Енот
Новичо́к, через «о́»
Регистрация
13 Июн 2020
Сообщения
91
#1
@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 %>');">
Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.
 
Енот
Новичо́к, через «о́»
Регистрация
15 Янв 2020
Сообщения
102
#2
@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 %>');">
Буду очень благодарен за ответ, ибо уже не знаю, как с этим бороться.
Вот тоже не могу заставить работать ленивую загрузку на картинке в бэкграунде!
CSS:
Типо такого:

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);"
Может кто посоветовать как реализовать?
 
Енот
Новичо́к, через «о́»
Регистрация
13 Июн 2020
Сообщения
91
#3
@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-ым разобрался.
 
Енот
Новичо́к, через «о́»
Регистрация
13 Июн 2020
Сообщения
91
#4
@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-ое не решил полноценно.
 
Последнее редактирование:
Думает, что помогает
Регистрация
15 Дек 2017
Сообщения
4,761
#5
Все шаблоны переведены в режим работы lazyload:
  • Все постеры и кадры на сайте вначале маленькие (<%- movie.poster_min %>);
  • После загрузки всех маленьких постеров и кадров происходит сценарий:
    • Если все ресурсы (JS, CSS, и т.п.) на страницы загружены, маленькие постеры и кадры изменяются в фоне на качественные постеры и кадры (<%- movie.poster %> или <%- movie.poster_big %>);
    • Если ресурсы еще не загружены, даём им на загрузку еще 5 секунд, и затем принудительно изменяем все постеры и кадры на качественные (<%- movie.picture %> или <%- movie.picture_big %>).
Код ставить в самый низ шаблона:
JavaScript:
<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>
В шаблоне сделать замену:
  • Было
HTML:
<img src="<%- movie.poster %>">
<img src="<%- movie.picture %>">
<div style="background-image:url(<%- movie.poster %>)">
<div style="background-image:url(<%- movie.picture %>)">
  • Стало
HTML:
<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