Google Page Speed нам дал указание к работе по нашим сайтам:
Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений после того, как все важные ресурсы будут загружены
Не вопрос, сделаем отложенную загрузку скрытых изображений.
Напоминалка самому себе, как сделать под требовательный Google Page Speed, одну из его задач. Никаких разных версий jQuery, а то устанешь следить за ПО от версии к версии, только js по возможности. Увы плагин писать не целесообразно, только правка тем. И так, вот схема:
1) img стандарт – тег в html
Используем Lazysizes – https://github.com/aFarkas/lazysizes
Можно в тело темы вставить и CDN – ссылку на скрипт
<script src="https://unpkg.com/lazysizes@4.1.7/lazysizes.js"></script>
Основной массив настроечек, который мы видим в опенсорс коде:
var lazySizesDefaults = {
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
//strictClass: 'lazystrict',
autosizesClass: 'lazyautosizes',
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
//preloadAfterLoad: false,
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125,
};
Наглядный пример ленивого тега img с разными извращенными настройками перечисленными в верхнем массиве – http://afarkas.github.io/lazysizes/
Короче скрипт реально крут, чего там только нельзя залЭзить. )))
Ну, а если по самому легкому, то подправить тег img и crs меняем на data-src, на примере популярно CMS Вебасист, со ставкой смарти кода.
<img class="lazyload" data-src="https://site.com/wa-data/public/shop/img/2019/01/beautyview/{if $wa->isMobile()}mobile/{/if}topshort.jpg" alt="Я ленивая картинка">
2) CSS – Background url
Кто-то уверял, что для сайта лучше по возможности использовать не тег img, а background через css url правило для вставки изображений. Вот так появляется лишняя работа, очередной горе СЕО специалист бредил, лучше бы программирование учил и зачем я уши развесил))). Один стандарт везде – стандартизация, вот сила. В итоге оказались в такой ситуации, что для бэкграунда нужно сделать совсем не так, как в первом пункте, а по другому и подцепить еще один скрипт.
Подсоединяем вот этот, только минифицированый скрипт https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/bgset/ls.bgset.js в тело страницы, он лежит там же в родительской директории, где его не сжатая версия, либо сожмите этот сами.
<script src="https://site.com/wa-content/js/lazyload/ls.bgset.min.js"></script>
Для того, чтобы было проще Вам понять суть, мы выносим url стиль из css в нужный нам тег, у меня это сделано опять в комбинации со smarty
<div class="advantage__content" style="background: url(https://site.com/wa-data/public/shop/img/2019/01/advartages/{if $wa->isMobile()}AdvartageMobile.jpg{else}AdvartageDesctop.jpg{/if}) no-repeat center;">
и приводим этот код к нужному виду, для этого второго подсоединенного js скрипта на html страницу.
<div class="advantage__content lazyload" data-bgset="https://www.fvsport.com/wa-data/public/shop/img/2019/01/advartages/{if $wa->isMobile()}AdvartageMobile.jpg{else}AdvartageDesctop.jpg{/if}">
Все проверяем эти две интеграции через консоль Chrome DevTools вкладка “Network”
Обновляем страницу. Ждем в шапке пока она вся прогрузица, зачищаем табло нажатием на значек clear(кружок перечеркнутый линией), крутим вниз до фоток.
Ура, инициатор загрузок картинок скрипт lazysizes! У меня получилось, надеюсь и у Вас.
3) Формат изображений webp.
Допустим нужно интегрировать в ленивую подгрузку также изображения формата webp.
Вес так же просто как в первом и втором пункте. Вот такой код:
<picture>
<source type="image/webp" srcset="https://site.com/wa-data/public/shop/img/2019/03/beautyview/{if $wa->isMobile()}mobile/{/if}Clothes-for-dancing.webp">
<img src="https://site.com/wa-data/public/shop/img/2019/03/beautyview/{if $wa->isMobile()}mobile/{/if}Clothes-for-dancing.jpg" alt="одежда для танцев">
</picture>
Преобразуем к такому:
<picture>
<source type="image/webp" class="lazyload" data-srcset="https://site.com/wa-data/public/shop/img/2019/03/beautyview/{if $wa->isMobile()}mobile/{/if}Clothes-for-dancing.webp">
<img class="lazyload" data-src="https://site.com/wa-data/public/shop/img/2019/03/beautyview/{if $wa->isMobile()}mobile/{/if}Clothes-for-dancing.jpg" alt="одежда для танцев">
</picture>
Мне просьба не писать и вопросы умные не задавать, а если задаете, то донат вперед!)
