优化Web性能：通过指定图片尺寸避免布局抖动 (CLS)

本教程旨在解决web页面中图片加载时常见的布局抖动（cls）问题。通过详细讲解为``标签添加`width`和`height`属性的重要性，文章阐述了如何预留图片空间，从而在图片加载完成前稳定页面布局。内容涵盖了基本实现、响应式处理及现代css方案，旨在提升用户体验和页面性能。

引言：理解图片加载与布局抖动 (CLS)

在现代Web开发中，用户体验和页面性能是至关重要的指标。其中，布局抖动（Cumulative Layout Shift, CLS）是Google Core Web Vitals中的一项关键指标，它衡量了页面内容在加载过程中非预期地移动的程度。当用户访问一个页面时，如果图片、广告或其他动态内容在加载完成后才占据其最终空间，就会导致页面上的文本和其他元素发生位移，从而破坏用户的阅读流畅性，甚至可能导致用户误点击。这种现象不仅损害了用户体验，也可能对网站的搜索引擎排名产生负面影响。

图片是导致CLS的常见元凶之一。当浏览器渲染页面时，如果<img>标签没有明确指定其尺寸（宽度和高度），浏览器在图片文件实际下载并解析完成之前，无法得知图片将占据多少空间。这会导致浏览器最初为图片分配一个零高度或默认高度，待图片加载完毕后，再根据其实际尺寸重新计算并调整布局，从而引发明显的布局抖动。

核心解决方案：为<img>标签指定尺寸

解决图片加载引起的布局抖动最直接且有效的方法是为<img>标签明确添加width和height属性。这两个属性会向浏览器提供图片固有的宽度和高度信息，即使图片尚未加载完成，浏览器也能根据这些信息预留出相应的空间。

当浏览器知道图片的尺寸后，它会在渲染页面时为图片元素分配一个占位符空间。这个占位符会保持其固定的宽高比，确保图片加载前后，其在页面上的位置和大小不会发生突变，从而彻底消除因图片加载而导致的布局抖动。

需要注意的是，width和height属性应反映图片的固有尺寸（intrinsic dimensions），即图片文件本身的像素宽度和高度，而非其在页面上最终的显示尺寸。CSS可以随后调整图片的显示尺寸，但width和height属性提供的宽高比是浏览器预留空间的基础。

实践指南：如何应用尺寸属性

以下将通过一个Vue组件中的图片示例，演示如何为<img>标签添加尺寸属性，并结合响应式设计进行优化。

原始代码示例

考虑以下Vue组件中的<img>标签：

<template>
  <div class="bg-white border">
    <div class="pt-24">
      <div class="2xl:px-5">
        <img
          class="block rounded-xl mx-auto h-48 my-12 padel-img"
          :src="require('../assets/img/about-hero.jpg')"
          alt="about image"
        />
      </div>
      <!-- ... 其他内容 ... -->
    </div>
    <!-- ... 其他内容 ... -->
  </div>
</template>

<style>
.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset; /* 在小屏幕上可能导致高度不确定 */
    width: 80%;
  }
}
</style>

在这个例子中，<img>标签通过CSS类h-48和padel-img设置了其显示尺寸，但没有直接在标签上指定width和height属性。这正是导致布局抖动的根本原因。

添加尺寸属性

假设about-hero.jpg这张图片的固有尺寸是1920x1080像素。我们应该将这些尺寸添加到<img>标签上：

达芬奇

达芬奇——你的AI创作大师

144

查看详情

<template>
  <div class="bg-white border">
    <div class="pt-24">
      <div class="2xl:px-5">
        <img
          class="block rounded-xl mx-auto h-48 my-12 padel-img"
          :src="require('../assets/img/about-hero.jpg')"
          alt="about image"
          width="1920"  <!-- 添加图片的固有宽度 -->
          height="1080" <!-- 添加图片的固有高度 -->
        />
      </div>
      <!-- ... 其他内容 ... -->
    </div>
    <!-- ... 其他内容 ... -->
  </div>
</template>

<style>
.padel-img {
  width: 90%;
  max-width: 1560px;
  height: auto; /* 确保高度按比例自动调整 */
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: auto; /* 确保高度按比例自动调整，而非 unset */
    width: 80%;
  }
}
</style>

关键改动说明：

1. width="1920" 和 height="1080": 这两个属性告诉浏览器图片文件的原始尺寸。浏览器会根据这个宽高比（1920/1080 ≈ 1.777）预留空间。
2. height: auto;: 在CSS中，为了确保图片在响应式布局下能够正确地根据其宽度按比例缩放，通常会将height设置为auto。这样，浏览器会根据width属性和CSS定义的宽度（如width: 90%;）以及图片固有的宽高比来计算实际显示的高度。height: unset在某些情况下可能表现不一致，height: auto是更稳健的选择。

通过上述修改，即使图片尚未加载完成，浏览器也会根据width="1920"和height="1080"这两个属性预留一个16:9比例的占位符，从而避免了布局抖动。当图片加载完成后，CSS定义的样式（如width: 90%; max-width: 1560px;）将控制图片的最终显示尺寸，但布局的稳定性已经得到了保障。

进阶优化与现代CSS实践

除了直接在<img>标签上指定width和height属性外，还有一些现代CSS技术和最佳实践可以进一步优化图片加载和布局稳定性。

使用 aspect-ratio CSS 属性

CSS的aspect-ratio属性提供了一种更灵活、更现代的方式来定义元素的宽高比，特别适用于那些没有固有尺寸（如<iframe>）或需要动态调整宽高比的场景。

.padel-img {
  width: 90%;
  max-width: 1560px;
  height: auto;
  aspect-ratio: 16 / 9; /* 显式设置宽高比，例如16:9 */
}

当<img>标签同时拥有width和height属性时，aspect-ratio属性会作为一种补充或覆盖机制。如果CSS中设置了width: 100%; height: auto;，并且aspect-ratio也被定义，那么aspect-ratio将优先于由固有尺寸推断出的宽高比来计算高度，尤其是在图片加载前。这对于控制图片占位符的精确比例非常有用。

占位符技术

为了进一步提升用户体验，可以在图片加载前显示视觉占位符：

• 骨架屏（Skeleton Loader）: 显示一个灰色或动画的矩形，模拟图片最终的形状，告知用户内容即将出现。
• 模糊加载（Blur-up Technique）: 先加载一个极低质量的图片版本，然后逐步加载高质量版本，平滑过渡。
• 背景色占位符: 使用图片的平均颜色作为背景，减少视觉突兀感。

这些技术通常与width/height属性或aspect-ratio结合使用，以确保占位符本身也遵循正确的尺寸和比例，从而避免额外的布局抖动。

其他图片优化建议

• 图片格式: 使用现代图片格式（如WebP、AVIF），它们提供更好的压缩率和质量。
• 图片压缩: 对图片进行适当压缩，减少文件大小，加快加载速度。
• 响应式图片（srcset和sizes）: 使用srcset和sizes属性为不同设备和屏幕分辨率提供不同尺寸的图片，确保浏览器加载最合适的图片。
• 延迟加载（Lazy Loading）: 对不在视口内的图片使用loading="lazy"属性，延迟加载直到用户滚动到它们附近，减少初始页面加载时间。值得注意的是，即使是延迟加载的图片，也应指定width和height属性以避免在加载时发生布局抖动。

总结

避免图片加载导致的布局抖动是优化Web性能和提升用户体验的关键一环。通过在<img>标签上明确指定width和height属性，开发者可以有效地预留图片空间，防止页面内容在图片加载时发生位移。结合CSS的height: auto;进行响应式处理，并考虑使用现代aspect-ratio属性，可以构建出既稳定又美观的Web界面。养成在所有图片上指定尺寸的习惯，是每个Web开发者都应遵循的最佳实践。

以上就是优化Web性能：通过指定图片尺寸避免布局抖动 (CLS)的详细内容，更多请关注php中文网其它相关文章！