Post by harrysand on Apr 2, 2024 3:44:04 GMT
我们都在互联网的网页上看到过它们。特色幻灯片(更广为人知的名称是“轮播”)多年来越来越受欢迎,随之而来的评价褒贬不一。一些最一致的批评围绕着如果实施不当,它们会对网站的核心网络生命分数产生负面影响。 您可能会问, Core Web Vitals到底是什么? Core Web Vitals 通常缩写为 CWV,是一组标准化指标,可帮助开发人员了解用户体验,重点评估网站的加载时间、交互性和整体视觉稳定性。由于图像大小的范围不同,轮播可能会损害网站的 CWV 分数,从而导致页面加载时间变慢和用户体验不佳。关于如何解决此问题的意见多种多样,从将它们从您的网站中完全删除到将它们改造为更优化的体验。 因此,如果您正在为客户构建一个网站,其中一个关键功能是轮播,或者您是一名网站所有者,发现很难放弃自己的轮播,请不要担心。在这篇文章中,我们将详细介绍轮播如何影响您的 Core Web Vitals,以及您可以采取哪些措施来减轻其影响,从而获得更平衡的用户体验。
什么是网站轮播? 我们先来谈谈我们的朋友,旋转木马。这个用户体验组件最 荷兰 Whatsapp 数据 容易被描述为卡片幻灯片,用于展示产品图像、有关服务和促销的文本信息或两者的组合。 Apple 网站轮播示例的屏幕截图 Apple的网站轮播示例 轮播有各种各样的用例。它们可以用大图像作为主页标题展示,也可以用作信息卡幻灯片,使用较小的图像与描述性文本配对,以提供有关服务、奖项、评论等的更多详细信息。有些轮播根本不包含图像,而是用于突出企业的推荐或其他小细节。 虽然轮播可能很麻烦,但在选择设计或将其构建到网站中时,认识到它们的多功能性和潜力非常重要。 实施不当的轮播会对核心网络生命指标产生负面影响 CWV 是 Google 发起的一项举措,旨在为如何打造更好的在线用户体验提供统一指导。这些定义的指标可以很好地表明您网站的可用性,并且也可以用作 Google 有机搜索算法中的有机排名因素。因此,您的网站在 CWV 方面表现良好非常重要。 如果轮播未正确实施,它们可能会影响或破坏您网站上的用户体验,从而降低您的 CWV 分数。让我们看一下大型轮播可能影响您网站的可能方式。 轮播对 LCP 的影响 Core Web Vitals 中的最大内容绘制 (LCP)测量是指浏览器在视口中加载最大图像或文本内容所需的时间。
当轮播出现在页面上时,轮播通常是对 LCP 影响最大的组件,尤其是在首屏上使用较大图像时,因为它们可以由多个图像和多行文本组成。 根据 web.dev 的说法,轮播的 LCP 是根据第一个呈现的图像以及页面第一次加载时显示的每个图像的大小来计算的。例如,如果轮播设置为“自动播放”,LCP 将重复重新计算,或者如果页面加载时出现多个幻灯片图像并且每个幻灯片图像的大小、高度或宽度各不相同,LCP 将受到影响。 轮播对 FID 的影响 首次输入延迟 (FID)是根据用户执行第一个操作(例如单击按钮或链接)后页面响应所需的时间来测量的。通常,当检测到延迟时,它是由站点的某个组件或功能占用大量资源或渲染阻塞造成的。 幸运的是,轮播通常对 JavaScript 的要求最低,并且通常不会导致与交互性相关的问题。如果您的转盘导致 FID 延长,这可能表明您需要考虑更换组件后面的工具。 轮播对 CLS 的影响 累积布局偏移 (CLS)是视觉稳定性或页面完成完全加载时停止混乱所需的时间的度量。轮播可能是大而笨重的动画幻灯片,最终可能需要更长的时间来加载。 如果轮播中的幻灯片没有一致的高度、宽度等测量属性,或者如果轮播设置为自动播放,则它们的影响通常会更大,因为它有可能无限期地导致 CLS。
什么是网站轮播? 我们先来谈谈我们的朋友,旋转木马。这个用户体验组件最 荷兰 Whatsapp 数据 容易被描述为卡片幻灯片,用于展示产品图像、有关服务和促销的文本信息或两者的组合。 Apple 网站轮播示例的屏幕截图 Apple的网站轮播示例 轮播有各种各样的用例。它们可以用大图像作为主页标题展示,也可以用作信息卡幻灯片,使用较小的图像与描述性文本配对,以提供有关服务、奖项、评论等的更多详细信息。有些轮播根本不包含图像,而是用于突出企业的推荐或其他小细节。 虽然轮播可能很麻烦,但在选择设计或将其构建到网站中时,认识到它们的多功能性和潜力非常重要。 实施不当的轮播会对核心网络生命指标产生负面影响 CWV 是 Google 发起的一项举措,旨在为如何打造更好的在线用户体验提供统一指导。这些定义的指标可以很好地表明您网站的可用性,并且也可以用作 Google 有机搜索算法中的有机排名因素。因此,您的网站在 CWV 方面表现良好非常重要。 如果轮播未正确实施,它们可能会影响或破坏您网站上的用户体验,从而降低您的 CWV 分数。让我们看一下大型轮播可能影响您网站的可能方式。 轮播对 LCP 的影响 Core Web Vitals 中的最大内容绘制 (LCP)测量是指浏览器在视口中加载最大图像或文本内容所需的时间。
当轮播出现在页面上时,轮播通常是对 LCP 影响最大的组件,尤其是在首屏上使用较大图像时,因为它们可以由多个图像和多行文本组成。 根据 web.dev 的说法,轮播的 LCP 是根据第一个呈现的图像以及页面第一次加载时显示的每个图像的大小来计算的。例如,如果轮播设置为“自动播放”,LCP 将重复重新计算,或者如果页面加载时出现多个幻灯片图像并且每个幻灯片图像的大小、高度或宽度各不相同,LCP 将受到影响。 轮播对 FID 的影响 首次输入延迟 (FID)是根据用户执行第一个操作(例如单击按钮或链接)后页面响应所需的时间来测量的。通常,当检测到延迟时,它是由站点的某个组件或功能占用大量资源或渲染阻塞造成的。 幸运的是,轮播通常对 JavaScript 的要求最低,并且通常不会导致与交互性相关的问题。如果您的转盘导致 FID 延长,这可能表明您需要考虑更换组件后面的工具。 轮播对 CLS 的影响 累积布局偏移 (CLS)是视觉稳定性或页面完成完全加载时停止混乱所需的时间的度量。轮播可能是大而笨重的动画幻灯片,最终可能需要更长的时间来加载。 如果轮播中的幻灯片没有一致的高度、宽度等测量属性,或者如果轮播设置为自动播放,则它们的影响通常会更大,因为它有可能无限期地导致 CLS。