简介
自2020年5月推出以来,谷歌的核心网络重要人物(CWV)套件已成为衡量网站性能的重要指标。 鉴于Google将这些值视为其页面排名算法的一部分,在CWV方面最大化您的网站的性能不仅可以增强用户的体验,还可以提高您的搜索引擎排名。 本文将探讨有助于提高页面分数，提高用户满意度和提高利润的提示和技巧。
什么是核心网络生命周期？
就像许多技术领域的其他东西一样,谷歌的Web Vitals是一群三个字母的缩略词,每一个都代表了网站性能的一些可衡量的方面。 要设置阶段，让我们定义定义核心Web生命周期的三个关键指标：
最大的连续油漆
最大连续涂料(LCP)：通过关注折叠上方可见内容加载所需的时间来测量感知的加载速度。 为了提供理想的用户体验，应在页面加载时间线的2.5秒内触发LCP。
第一个输入延迟
首次输入延迟(FID)：通过测量用户操作和页面响应之间的延迟来测量页面响应速度。 为了提供理想的用户体验，页面的FID应为100毫秒或更少。
累积布局偏移
累积布局偏移(CLS)：使用在页面呈现时对布局偏移进行的复合测量来测量视觉稳定性。 为了提供理想的用户体验，页面应将CLS保持在0.1或更低；0.1和0.25之间的所有内容均视为中等，大于0.25的内容均视为较差。
…为什么它们很重要？
对于许多企业来说，网站性能与业务成功有直接关联。 研究表明，与未通过CWV分数的网站相比，搜索结果中的可见性可能会提高37%(Beus)；CWV分数的提高可以增加每位访问者的收入以及转化率(Duong et al .)。
使用时 Akira作为一家女性时尚精品店,Edgio能够改进网站的CWV,将首页加载时间从5秒提高到~1秒,改善了CWV测量结果,最终有机流量增加了30 %,结帐启动率提高了61 %,转化率提高了37 %。
简而言之，更快的网站可实现更好的SEO排名和更满意的用户–特别是在电子商务网站的上下文中；这些结合起来可降低跳出率并提高转化率。
那么，我们如何才能改进它们呢？
第一个输入延迟
让我们从低垂的成果开始：首次输入延迟。 好消息是,网站有通过FID分数比没有,这是伟大的看到! 但是,如果情况不是这样,罪魁祸首往往是在网站生命周期早期加载的第三方脚本,这可能会阻止接收用户输入所需的主线程执行。 捕获错误和执行屏幕记录的工具是额外审查的主要候选工具。
事实上，任何阻止主执行线程的行为都会导致FID性能下降。 密切关注资源密集型或长期运行的JavaScript任务,并考虑将非UI相关代码重构到Web工作者,以及使用延迟加载和代码分割技术,以确保仅在需要时加载所需的JavaScript。
此外,虽然在技术上不是CWV的核心要素,但值得一提的是另一个相关指标:与下一个油漆的交互作用(INP )。 INP测量与页面交互与反映该交互的后续页面更新之间的时间。 虽然INP和FID都衡量整体页面响应度，但INP关注所有页面交互，而不是第一次交互，目的是确保页面在整个会话期间保持响应，而不仅仅是前期交互。 INP跟踪用户体验中最差的交互性能，并将其报告给关键问题。 INP很快就会取代FID作为页面响应度的衡量标准，因此值得关注。
最大的连续油漆
可以说，LCP是衡量页面性能的最重要和最有影响力的指标。 在某种程度上可以预见，最大连续画图最常见的例子是”英雄”图像–大图像或视频，通常占据”折叠”上方视窗的整个宽度。 虽然优化此元素的技术与任何其他页面资源相同,但渲染该资源所需的时间非常重要,因为这是用户体验到的第一个主要元素。
在队列中等待
细分LCP元素的请求计时对于优化其性能极为有用。 浏览器发出的任何请求都以队列开头。 队列中花费的每毫秒LCP请求都是一毫秒，这将增加LCP得分，因此，如果您发现这些元素在浏览器队列中花费了不成比例的时间，请调查之前请求的内容及其原因，并采取措施来区分LCP资源的优先级。 可能资源位于折页以下，或者其他脚本可以延迟加载或延迟。 操作顺序至关重要。
正在服务器上等待
启动网络请求后，浏览器客户端必须等待服务器接收，处理和响应该请求。 此度量称为第一字节时间(TTFB)。 如果服务器响应请求的速度缓慢，您的LCP分数将会下降。 这是拥有CDN可以显著提高速度的领域之一，因为CDN可以将资源的缓存副本保存在靠近最终用户的地理位置，并比单个应用程序服务器更快地响应该资源。 使用CDN的其他重要方面包括内置安全WAF和响应大型流量高峰的能力。 如果您想要提高速度，您应该使用CDN。
电线上的宽度
此时，希望浏览器将在页面生命周期的早期请求LCP资源，并且服务器应该能够快速响应这些资源。 下一个要考虑的因素是请求的资源的总体大小。 每个必须”通过线路”传输到浏览器的字节都需要一些时间，而这些字节越多，请求完成所需的时间就越长。 因此，应注意确保资源尽可能少，以尽量减少转移资源所花费的时间。 这可能包括使用第三方映像优化和托管服务(如kraken.io或imgix.com)，这些服务既可以优化也可以提供WebP等”NextGen”格式的媒体文件，从而进一步减小文件的大小。
帮助浏览者
除了尺寸优化外，请考虑使用<图片>标签，这将使浏览器能够选择正确的资源以更智能地请求设备。 桌面浏览器可能具有大量屏幕空间来显示更高分辨率的图像；但是，这些相同的资源将使屏幕较小的移动设备陷入困境。 使用优化的资源和CSS媒体查询,您可以确保浏览器为其设备类型请求正确的资源,并减少从服务器传输字节到客户端所花费的时间。
此外，您可以通过要求浏览器预加载LCP资源并指定获取优先级来帮助浏览器。 这些信息将为浏览器提供线索，以便在关键资源之前优先排列关键资源的优先级。 访问浏览器的速度越快，渲染速度越快，LCP的速度越快，效果就越好。
累积布局偏移
我们一直看到它。 在发送您的浏览器以获取网站后,页面开始加载;当页面构建时,您会看到您感兴趣的部分,并在整个页面突然移动并点击它,当您以为您将要点击的链接突然在其他地方! 这种现象称为布局偏移。 这对每个人都很烦人,通常是自我造成的,为了人类的利益,我们应该尽量减少它。
通常的嫌疑人
CLS得分较高的典型罪魁祸首是：
- 粘性管座
- 在客户端加载和呈现的促销或”英雄”横幅
- 时事通讯，优惠券和GPDR通知
- 动态注入页面的其他第三方集成
设置一些边界
还记得<>我们在讨论LCP时引用的图片元素吗？ 不要忘记为其中包含的各种元素添加尺寸。 在指导浏览器如何呈现这些元素时，忽略这些值将使您离开驾驶员的位置。 通过定义尺寸，浏览器可以为图像绘制留出正确的空间量，从而减少偏移。
对于可能动态添加到页面的任何内容，也是如此。 广告，<iframe>或其他动态添加的内容可对CLS作出贡献。 通过提前为这些项目预留空间，页面内容的偏移将会减少。 此外，避免在现有页面内容上方添加内容，因为这会导致整个页面偏移到下面。
帮助浏览器提前划出空间将减少CLS，但可能会以牺牲整体用户体验为代价，因为用户等待空白页面的这些部分填充有用的内容。 作为一个中间点,实现元素加载框架可以是一个有用的技术,以传达给用户更多的信息,让人感觉一个更快的体验,而浏览器完成其余的繁重工作来协调额外的页面内容。 更重要的是,这些可以也应该,使用CSS动画而不是动画GIF,这意味着只有几行CSS可以在整个网站上实现这种技术。
总结
从表面上看,Core Web Vitas可能看起来像是谷歌传说中和阴影算法中用于确定其搜索结果中的页面排名的最新片段,在某种程度上,这可能是正确的。 然而，更重要的是，核心Web虚拟大纲代表了一个更具体的框架，用于衡量页面性能，并为描述用户体验方面的重要内容建立基准。 上述技术虽然不是详尽无遗,但应帮助您在故障排除和优化您的网站性能的同时提供帮助,希望能够改善用户体验，页面排名和收入。
