我插入，以显示我的webpsges上的图像，这个网站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
该修复程序是否被视为有效的“延迟加载屏幕外”解决方案？我认为这样可以解决问题。其他修复更好的解决方案吗？谢谢。
我建议使用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，因此请务必添加polyfill。
祝好运！