«Ленивая» загрузка
Одним из наиболее простых способов оптимизации работы сайта считается сокращение времени загрузки картинок. Для этого принято использовать программы TinyPNG и ImageOptim. Для минимизации изображений также используют адаптивные спрайты, унифицированные идентификаторы ресурса и отложенную загрузка файлов (lazy load).
«Ленивая» загрузка представляет собой технику отображения содержимого сайта, в рамках которой его элементы загружаются асинхронно, то есть по мере необходимости. Применение lazy loading актуально по той причине, что все современные браузеры выполняют синхронную загрузку изображений, что способствует увеличению времени загрузки сайта. Благодаря lazy load images, можно предотвратить появление одновременных запросов, что способствует оптимизации работы сайта.
HTML-код для Lazy loading
Для того чтобы воспользоваться «ленивой» загрузкой, необходимо применить тег img. Эта техника предусматривает использование атрибута src с временным значением.
Благодаря этому, lazy loading images способствует неодновременному произведению запросов к различным внешним ресурсам. Запрос направляется только к временной картинке, указанной в src, который кэшируется веб-браузером. Оригинальный src используется исключительно при соблюдении предусмотренных заранее условий.
<img alt="" data-src="/path/to/image.jpg" src="https://dummyimage.com/600x400/000/fff" />
CSS-код для Lazy Loading
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
Lazy load jquery предусматривает дальнейшую работу с атрибутом data-src.
Javascript
Используя технику lazy loading jquery, стоит знать, что data-src будет сразу же удаляться из кода в случае загрузки изображения. Стоит заметить, что использование transition-property в CSS обеспечивает максимально плавную загрузку картинки на странице.
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
Следует сказать, что этот код не учитывает lazy loading в wordpress при прокрутке страницы. Для этого нужно использовать подходящие плагины JavaScript. Поэтому lazy load в wordpress, прежде всего, актуален для небольших интернет-ресурсов. Также эту технику можно использовать с целью ознакомления с различными вариантами отложенной загрузки изображений.