图中由于图像加载而导致的文本移动是

geyekak473

题的方法是使用srcset。它是一段 HTML 代码，允许浏览器根据屏幕大小选择并加载最接近的图像版本。这样，在所有设备上，我们都会看到适合屏幕尺寸的高质量图像，并且网站的速度不会降低。这段代码的使用方法如下：> 开头的代码大家都很熟悉，一个放置图片的标准代码。但接下来是图像尺寸指南，它告诉浏览器该图像还有两个其他版本，一种是中型，一种是大型。 这样，浏览器将执行计算，根据该计算选择合适的图像进行加载。假设所需的屏幕宽度为 320 像素。主照片宽 500 像素，中版宽 1000 像素，大版宽 2000 像素。浏览器计算出尺寸最接近屏幕的版本是 500px 版本。所以它会加载相同的内容。但如果屏幕宽度是 720 像素，那么 500 像素的照片就太小了。因此它将显示 1000 像素宽的中等版本。 请注意，WordPress 会自动执行所有这些操作，并且在上传照片后，它会生成同一张照片的多个不同尺寸的副本。


对于您上传到 WordPress 网站的每张照片，都会创建 5 个不 西班牙电报号码 同的版本： 缩略图：150 x 150 像素的图像剪切图 Medium：宽度或长度减少到 300 像素的图像版本 Medium Large：调整后的版本，宽度为 768px Large：宽度或长度为 1024 像素的图像版本 完整：照片的原始版本 然后 WordPress 将自动设置该图像的 srcset。因此，最好注意网站重要页面上提到的要点，并将尺寸准确且合适的照片放置在页面上。 10-最好在html代码中定义照片的尺寸 您可能有过这样的经历，在加载网站时，网站上的元素突然移动，或者当您要单击按钮时，按钮突然移动，而您单击了其他内容。下图显示了一个示例。 累积布局移位示例 上 CLS 问题的一个示例。



Google引入了一种称为累积布局偏移 (CLS)的措施来检查页面上元素的位置 。该指标可以翻译为“复合设计位移”。 CLS是指网站上影响网站主要内容的移动元素的数量。 在html代码中定义图像的尺寸使浏览器在等待图像加载时考虑图像的空白空间，并防止图像加载后内容移动。这个问题更多地与UX用户体验相关，并不直接影响照片SEO。如果您的网站是 WordPress 并且使用 wp-rocket 插件，则可以通过转到设置部分和媒体标题将图像尺寸添加到照片的 html 代码中。 Google 建议在 html 代码中添加图像长度和宽度的屏幕截图 很高兴知道： CLS 与 FID 和 LCP 一起构成 Web Vitals（核心 Web Vitals）。 Web Vitals 或 Blind Web Vitals 是 SEO 社区中的一个新概念。改善关。