谷歌建站怎么做效果更好 谷歌工程师如何优化

当你浏览网站时，你应该遇到过“图像加载缓慢”的情况。 图像是影响网站性能的因素之一，在 Web 开发中应小心谨慎。 谷歌工程师马尔特·乌布（Marte Ubl）解释了在处理此类图像时如何优化图像。

Maximally optimizing image loading for the web in 2021

https://www.industrialempathy.com/posts/image-optimizations/

◆为 img 元素指定纵横比

要在保持纵横比的状态下更改图像尺寸，经常使用在“style”元素中指定“max-width:100%”或“height:auto”的方法。除此之外，在“img”要素中指定“width”和“height”属性的话，网页浏览器在下载图像之前可以确保图像的配置场所，所以可以改善布局崩溃的指标CLS。

◆通过指定“内容可见性（content-visibility）”属性

CSS 属性的“内容可见性”，可以延迟图像加载，直到需要显示，从而优化 CPU 资源的使用。 请注意，仅通过指定内容可见性属性会导致 CLS 恶化，因此需要使用内容大小属性通知浏览器元素的大小。 在这种情况下，与在 img 元素中指定宽度和高度不同，还必须指定纵横比。

◆ AVIF

AVIF 是一种图像格式，默认情况下仅支持 Chromium 浏览器，它始终比 JPEG 性能更好。使用AVIF时，使用“picture”元素，如下所示代码。说明picture元素本身没有布局，实际渲染的是img元素。

此外，还有“sharp”等库，可以在服务器端对 AVIF 进行编码。

◆在图像的 URL 中包含哈希值

如果图像 URL 包含哈希值，并在更新图像时更改哈希值，则可以无限期地设置图像缓存的生存期。

◆延迟加载

如果为 img 元素指定指定“loading=”lazy“，则可以延迟图像加载，直到实际显示图像。

◆解码处理的异步化

通过在img要素中指定“decoding=”async“，可以将图像的解码处理转到背景。可以在不妨碍其他内容处理的情况下导入图像。

◆ 通过在使用模糊图像作为占位符的

img 元素的“背景图像”属性中指定模糊图像，可以在不使用 JavaScript 的情况下显示图像作为占位符，直到显示实际图像。 此外，通过将实际图像的 URI 包装在 SVG 图像的 URI 中，可以在 SVG 级别而不是 CSS 级别执行模糊处理，从而节省 CPU 资源。

谷歌在GitHub上发布了一个模板，面向在优化图像加载的同时开发博客的人。

GitHub - google/eleventy-high-performance-blog: A high performance blog template for the 11ty static site generator.https://github.com/google/eleventy-high-performance-blog