Я вставил отсрочку изображения на свои веб-страницы, но Google SpeedTest советует мне рассмотреть ленивую загрузку закадровых и скрытых изображений

Question

Я вставил, чтобы показывать изображения на своих веб-страницах, решение, предлагаемое этим сайтом https://varvy.com/pagespeed/defer-images.html

Я изменил IMG-вызовы

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">

и вставил внизустраница, код JS

<script>function init() { var imgDefer = document.getElementsByTagName('img'); for (var i = 0; i < imgDefer.length; i++) {if (imgDefer[i].getAttribute('data-src')) {      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));}}} window.onload = init; </script>

Работает нормально.Однако при использовании инструмента Google PageSpeed ​​Insights по-прежнему появляется следующее сообщение:

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive

---

Является ли исправление, которое я считаю, правильным решением для "отложенной загрузки вне экрана"?Я думал, что это решит проблему.Другие исправления - лучшие решения?Спасибо.

Answer 1

Я бы порекомендовал использовать lozad.js + polyfill для отсрочки закадровых изображений (иначе говоря, ленивая загрузка).Я не читал статью о varvy, но кто-то написал, что метод откладывает загрузку изображений только после события onload, поэтому начальный вес загрузки страницы остается прежним.

Lozadне будет загружать изображение, пока его не прокрутят в область просмотра.

Для <img> s используйте пустое <svg> в качестве начального значения src, где 6 9 в viewBox ниже определяетОтношение между шириной (6) и высотой (9) => изменить эти значения в соответствии с вашим контекстом.Это обеспечит отсутствие перекомпоновки в макете страницы после загрузки изображений.

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E"

Обратите внимание, что lozad.js использует Intersection Observer API, который все еще не поддерживает браузер, поэтому обязательно добавьтеполифилл.

Удачи!