网站制作需要构建有效的图像组件

图像是网站制作应用程序性能瓶颈的常见问题，也是优化的重点领域。未优化的图像会导致页面膨胀，目前占第 90个百分位的总页面权重的 70% 以上（以字节为单位）。多种优化图像的方法需要一个智能的“图像组件”，其中包含默认的性能解决方案。 图像不仅会影响性能，还会影响业务。页面上的图像数量是用户访问网站的转化率的第二大预测因素。用户转换的会话比未转换的会话少 38% 的图像。作为其最佳实践审核的一部分，Lighthouse 列出了多种优化图像和改进网络重要信息的机会。图像可能影响核心 Web 生命和用户体验的一些常见领域如下。 未调整大小的图像伤害了 CLS #，未指定大小的图像会导致布局不稳定并导致高累积布局偏移 ( CLS )。在img元素上设置width和height属性可以帮助防止布局偏移。例如： 宽度和高度应设置为使渲染图像的纵横比接近其自然纵横比。纵横比的显着差异可能导致图像看起来失真。允许您在 CSS 中指定纵横比的相对较新的属性可以帮助响应性地调整图像大小，同时防止 CLS。 图像的文件大小越大，下载所需的时间就越长。大图像可以是页面的“英雄”图像，也可以是视口中负责触发最大内容绘制 ( LCP )的最重要元素。作为关键内容的一部分并且需要很长时间下载的图像会延迟 LCP。 在许多情况下，开发人员可以通过更好的压缩和使用响应式图像来减小图像大小。元素的srcset和sizes属性有助于提供不同大小的图像文件。然后浏览器可以根据屏幕大小和分辨率选择正确的。 糟糕的图像压缩会损害 LCP # AVIF或WebP等现代图像格式可以提供比常用的 JPEG 和 PNG 格式更好的压缩。在某些情况下，对于相同质量的图像，更好的压缩可以将文件大小减少 25% 到 50%。这种减少导致下载速度更快，数据消耗更少。该应用程序应为支持这些格式的浏览器提供现代图像格式。 加载不必要的图像会损害 LCP # 加载页面时，不会向用户显示折叠下方或不在视口中的图像。它们可以被推迟，这样它们就不会对 LCP 做出贡献并延迟它。当用户向它们滚动时，延迟加载可用于稍后加载此类图像。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=689