Lighthouse 报告的“优化建议”部分会列出您页面中的所有屏幕外或隐藏的图片,以及可能节省的千比字节 (KiB) 图片。考虑在所有关键资源加载完毕后延迟加载这些图片,以缩短可交互时间:
![Lighthouse Defer 屏幕外图片审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/offscreen-images/image/a-screenshot-the-lightho-886f5632a8905.png?authuser=6&hl=lt)
另请参阅“使用 lazysizes 延迟加载屏幕外图片”Codelab。
针对特定堆栈的指南
AMP
Drupal
安装可以延迟加载图片的 Drupal 模块。此类模块能够推迟加载所有屏幕外图片以提高性能。
Joomla
安装能够延迟加载所有屏幕外图片的延迟加载 Joomla 插件,或者改用可提供该功能的模板。从 Joomla 4.0 开始,您可以使用“Content - Lazy Loading Images”插件启用专用的延迟加载插件。此外,您还可以考虑使用 AMP 插件。
Magento
请考虑修改产品和目录模板,以利用 Web 平台的延迟加载功能。
WordPress
安装能够延迟加载所有屏幕外图片的延迟加载 WordPress 插件,或者改用可提供该功能的主题背景。此外,您还可以考虑使用 AMP 插件。