Home 技术文章 网络生命体征的核心
Applications

About The Author

Outline

导言

自2020年5月推出以来,Google的核心Web虚拟化(CWV)套件已成为衡量网站性能的重要指标。 鉴于谷歌将这些值视为其页面排名算法的一部分,在CWV方面最大化您的网站性能不仅可以增强您的用户体验,还可以提高您的搜索引擎排名。 本文将探讨帮助提高页面分数,提高用户满意度和提高利润的技巧和技巧。

什么是核心Web生命体征?

就像许多其他的技术,谷歌的Web虚拟现实是一群三个字母的缩略语,每一个都代表了一个网站性能的一些可衡量的方面。 要设置阶段,让我们定义定义核心Web虚拟元素的三个关键指标:

最大的内容画

最大内容画图(LCP):通过集中于将可见内容放置在折叠上方所需的时间量来测量 感知的加载速度 。 为了提供理想的用户体验,LCP应在页面加载时间线的2.5秒内触发。

首次输入延迟

首次输入延迟(FID):通过测量用户操作和页面响应之间的延迟来测量页面 响应 。 要提供理想的用户体验,页面的FID应小于或等于100毫秒。

累积版式偏移

累积版式偏移(CLS): 使用页面渲染时的版式偏移的复合度量来测量视觉稳定性 。 为提供理想的用户体验,页面应保持0.1或更低的CLS;0.1至0.25之间的所有内容都被视为中等,大于0.25的内容较差。

… 为什么它们很重要?

对于许多企业来说,网站性能与业务成功有直接关系。 研究表明,通过CWV分数的网站在搜索结果中的可见性可能比不通过的页面多37 %( Beus );提高CWV分数可以提高每位访客的收入和转化率( Duong等人)。

使用时 Akira.作为一家女性时尚精品店,Edgio能够改善网站的CWV,将首页加载时间从5秒提高到~1秒,改善CWV测量,最终实现有机流量增长+30 %,结账启动提高+61 %,转化率提高37 %。

简单地说,更快的网站可以提高SEO排名,让用户更满意——特别是在电子商务网站的环境中;这些结合在一起,可以降低跳出率,提高转化率。

那么,我们如何才能改进它们呢?

首次输入延迟

让我们从低垂的成果开始:首次输入延迟。 好消息是,网站有通过FID分数比不经常,这是很高兴看到! 但是,如果情况并非如此,则通常情况下,罪魁祸首是在网站生命周期早期加载的第三方脚本,这可能会阻止接收用户输入所需的主线程执行。 捕获错误和执行屏幕记录的工具是进行额外审查的主要候选工具。

事实上,任何阻止主执行线程的操作都会导致FID性能下降。 密切关注资源密集型或长期运行的JavaScript任务,并考虑将非UI相关代码重构到Web工作者,以及使用延迟加载和代码拆分技术,以确保仅在需要时加载所需的JavaScript。

此外,虽然在技术上不是CWV的核心元素,但值得一提的是另一个相关指标:与Next Paint的交互(INP)。 INP测量与页面交互和反映该交互的后续页面更新之间的时间。 虽然INP和FID都衡量整体页面响应度,但INP关注的是所有页面交互,而不是第一次交互,目的是确保页面在整个会话期间保持响应度,而不仅仅是前期交互。 INP跟踪用户体验中最差的交互性能,并将其报告给Crux。 很可能很快INP将取代FID作为衡量页面响应能力的指标,因此值得关注。

最大的内容画

可以说,用于衡量页面性能的最重要和最有影响力的指标是LCP。 有些可以预见,最大内容画图的最常见示例是”英雄”图像–大图像或视频,通常占据”折叠”上方视口的全宽。 虽然优化此元素的技术与任何其他页面资源相同,但呈现该资源所需的时间非常重要,因为这是用户将体验的第一个主要元素。

在队列中等待
分解LCP元素的请求计时对于优化其性能非常有用。 浏览器发出的任何请求都以队列开头。 队列中每花费毫秒的LCP请求就会产生一毫秒的LCP分数,因此,如果您发现这些元素在浏览器队列中花费的时间不成比例,请调查之前请求的内容及其原因, 并采取措施确定LCP资源的优先级。 可能资源低于折页,或者其他脚本可以延迟加载或延迟。 操作的顺序是关键。

在服务器上等待
启动网络请求后,浏览器客户端必须等待服务器接收,处理和响应该请求。 此度量称为第一字节时间(TTFB)。 如果服务器对请求的响应速度较慢,您的LCP分数将受到影响。 这是拥有CDN可以显著影响速度提高的领域之一,因为CDN可以将资源的缓存副本保存在靠近最终用户的地理位置,并比单个应用程序服务器更快地响应该资源。 使用CDN的其他重要方面包括内置安全WAF以及对大型流量高峰的响应能力。 如果您追求速度,您应该使用CDN。

宽线
希望到目前为止,浏览器将在页面生命周期的早期请求LCP资源,服务器应迅速响应这些资源。 下一个要考虑的因素是所请求资源的总体大小。 每一个必须”通过线路”传送到浏览器的字节都需要一段时间,这些字节越多,完成请求所需的时间就越长。 因此,应注意确保资源尽可能少,以尽量减少转移资源所需的时间。 这可能包括使用第三方图像优化和托管服务(如kraken.io或imgix.com),这些服务可以优化和提供”下一代”格式(如WebP)的媒体文件,从而进一步减小文件大小。

帮助浏览器退出
除了尺寸优化之外,请考虑使用 <图片> 标记,这将使浏览器能够更智能地选择正确的资源来请求设备。 桌面浏览器可能有大量的屏幕空间来显示更高分辨率的图像;但是,这些相同的资源会使屏幕较小的移动设备陷入困境。 使用优化的资源和CSS媒体查询,您可以确保浏览器为其设备类型请求正确的资源,并减少将字节从服务器传输到客户端所花费的时间。

此外,您还可以通过要求浏览器预加载LCP资源并指定获取优先级来帮助浏览器。 这些信息将为浏览器提供优先处理关键资源的线索,而不是优先处理不太重要的资源。 访问浏览器的速度越快,渲染速度就越快,LCP发生的速度越快越好。

累积版式偏移

我们一直看着它。 将浏览器发送出去以获取网站后,页面开始加载; 当页面建立起来时,您会看到您感兴趣的部分,并在整个页面突然移动,而您认为您即将单击的链接突然位于其他位置时移动以单击它! 这种现象称为布局偏移。 这对每个人来说都很烦人,通常是自我造成的,我们应该为了人类的利益而尽量减少这种情况。

通常的怀疑
CLS分数较高的典型罪魁祸首是:

  • 粘性标题
  • 在客户端加载并呈现的促销或”英雄”横幅
  • 通讯,优惠券和GPDR通知
  • 动态注入到页面中的其他第三方集成

设置一些边界
还记得 <我们在讨论LCP时引用的图片> 元素吗? 不要忘记为其中包含的各种元素添加尺寸。 忽略这些值将使您在指导浏览器如何呈现这些元素时脱离驱动程序的位置。 通过定义尺寸,浏览器可以留出正确的图像绘制空间量,从而减少偏移。

对于可能动态添加到页面的任何内容也是如此。 广告, <iframe>或其他动态添加的内容可以为CLS做出贡献。 通过提前为这些项目保留空间,页面内容的偏移量将会减少。 此外,避免在现有页面内容上方添加内容,因为这会导致整个页面在下方移动。

帮助浏览器提前挖掘空间将减少CLS,但可能会牺牲整体用户体验,因为用户会等待空白页面的这些部分填充有用的内容。 作为一个中间点,实现 元素加载框架 是一种有用的技术,可以向用户传达更多的内容,使用户获得更快的体验,而浏览器则执行其余的繁重任务来协调额外的页面内容。 更重要的是,这些可以并且应该,使用CSS动画而不是动画GIF来实现,这意味着只需几行CSS就可以在整个网站上实现这种技术。

总结

从表面上看,Core Web Vitas可能看起来像谷歌的最新部分的传说中和阴影算法,以确定在他们的搜索结果中的页面排名–在某种程度上,这可能是正确的。 但是,不仅如此,核心Web虚拟现实还代表了一个更具体的框架,用于衡量页面性能,并建立基准来描述用户体验方面的重要事项。 上述技术虽然不是详尽无遗的,但应帮助您在排除故障和优化网站性能的同时,提高用户体验,页面排名和收入。

Tags

Just For You