谷歌的使命是通过Core Web Vitals来提高网络性能。为什么？因为谷歌的业务主要是基于网络的——缓慢的网站和网络应用程序将用户推回到本地应用程序。
你在谷歌搜索结果中的位置在很大程度上取决于搜索词的关键词、这些关键词在你页面中的使用情况，以及根据其他地方链接的数量（和质量）你页面的受欢迎程度。从2021年8月开始，谷歌也在努力根据性能评估页面。
本教程将向您展示如何针对谷歌Core Web Vitals优化您的网站。
为什么要做Core Web Vitals？
内容仍然至关重要。但是，如果你比较两个文本和人气相似的网站，在谷歌搜索结果中，提供最佳网络体验的网站将获得更高的优先级。
除了提高页面排名外，高性能网站也有资格加入移动搜索转盘。这之前是为加速移动页面（AMP）保留的，它要求您将内容导入一个单独的谷歌托管站点。AMP已经引起了批评，尤其是因为页面并不总是比优化良好的WordPress或静态站点更快。然而，这不再是一个要求。
无论你选择了什么，你的网站越快，响应速度越快，它在谷歌搜索结果中排名越高的机会就越大。
当你认为平均页面大约是2 MB时，生成超过60个HTTP请求，并且在移动设备上充分渲染16秒，你会发现有一些改进你的站点的范围。我们将向您展示实现这些改进的最佳方法。
谷歌的主要排名因素
在开始评估绩效之前，需要检查四个关键排名因素：
- HTTPS：HTTPS是必不可少的。您的站点是否在用户的浏览器和Web服务器之间建立了安全连接？
- 移动友好性：你的网站必须在移动设备上运行良好。您的站点在小屏幕设备上可用吗？它呈现时没有内容溢出吗？文本够大吗？可点击区域是否足以进行触摸控制？
- 无间隙：避免需要不合理屏幕空间的侵入性间隙。你的内容总是可读的吗？是否部分被弹出的间隙或横幅遮挡？您的广告或市场推广是否使网站难以使用？
- 安全浏览：您的网站应该没有恶意软件、病毒、网络钓鱼、欺诈和其他欺诈。
一旦您满足这些要求，您的网站将进行性能评估。
谷歌如何评估网站性能？
使您的网站加载速度快、渲染速度快、响应速度快是至关重要的。但它对用户来说感觉快吗？
性能度量应用程序（如浏览器开发工具）报告技术度量，例如：
- 阻塞时间：等待下载开始所花费的时间，通常是因为样式表和脚本等其他资产具有更高的优先级。
- DNS解析：将主机名解析为IP地址以检索资产的时间。
- 连接时间：初始化TCP连接的时间。
- 首字节时间（TTFB）：请求和响应的第一个字节之间的总时间。
- 接收时间：检索整个资产的时间。
- DOM加载时间：下载和呈现HTML文档对象模型的时间。这通常是分析或修改DOM的脚本可以可靠运行的第一个点。
- 页面加载时间：下载页面和所有资产（如图像、样式表、脚本等）的时间。
- 总页面重量：所有资产的总大小。通常报告为压缩（下载）大小和未压缩大小。
- DOM元素数：页面上HTML元素的总数。元素越多，页面处理时间越长。
- 首次内容绘制 （FCP）：浏览器渲染第一个内容像素之前所用的时间。
- 首个有意义绘制（FMP）：主页内容对用户可见之前所花费的时间。
- 交互时间（TTI）：页面完全交互并能够可靠响应用户输入所需的时间。
- 首次CPU空闲（FCI）：CPU呈现页面并运行所有初始化脚本，等待进一步输入的时间。
- CPU使用率：呈现页面和响应用户输入时所需的处理活动。
- 每秒布局数：浏览器必须重新计算样式和页面布局的速率。
这些可用于确定特定的瓶颈，如服务器负载、CMS缓存、浏览器缓存、下载速度和JavaScript效率。但他们无法确定页面提供的用户体验是好是坏。例如：
应用程序可以快速下载并显示，但在第一次交互后会变得无响应，因为它正在执行大量未优化的JavaScript代码。
聊天应用程序可以在用户发布消息时不断下载数据。评估工具可能会假定它从未完成加载，尽管页面感觉有响应。
Core Web Vitals 是谷歌试图解决这些困境。
什么是 Core Web Vitals?
Google的Core Web Vitals（CWV）是评估现实世界用户体验的三个性能指标：
- 最大内容绘制（LCP）：加载性能
- 首次输入延迟（FID）：交互性能（Update：2024 年 3 月 12 日，INP 被添加到 Core Web Vitals 框架中，取代了旧的首次输入延迟 FID 指标。）
- 累积布局偏移（CLS）：视觉稳定性性能
到2021年8月底，谷歌新的算法更新已经开始在全球范围内推广。Core Web Vitals主要影响移动搜索结果，但如果实验成功，桌面等价物也会随之产生。
页面的LCP、FID和CLS分数基于最近28天通过Chrome浏览器匿名收集的真实用户指标。由于用户的设备、连接和其他并发活动，这些测量值可能会有所不同，因此第75个百分位是计算出来的，而不是平均值。
换句话说，所有用户的指标都是从最好到最差排序的，并且取四分之三点的数字。因此，四分之三的网站访问者将体验到该级别或更高的性能。
任何在所有三个核心网络关键指标上都获得良好（绿色）分数的页面都将在搜索结果中获得更高的排名，并被包括在谷歌新闻应用程序的“热门故事”旋转木马中。
在以下部分中，我们将介绍用于计算度量的算法、可用于确定页面分数的工具、分数低的典型原因以及解决性能问题的步骤。
最大内容绘制（LCP）
最大内容绘制测量加载性能。本质上，可用内容在页面上呈现的速度有多快？
根据同一份 Chrome 浏览器 Core Web Vitals 报告，64.8% 的网站已经达到了 LCP 分数。而且每月都有更多新网站以更快的速度提供主要内容。
LCP分析最大图像或文本块在浏览器视口（折叠上方）中可见所需的时间。在大多数情况下，最突出的项目将是Hero图像、横幅、标题或大型文本块。
以下任何元素均可进行最大含量的油漆分析：
- 图像（
<img>元素） - 矢量图形中的图像（嵌入到
<svg>中的<image>） - 视频缩略图（海报属性设置为
<video>元素中的图像URL） - 具有背景图像的元素（通常使用CSS
background-image url()属性加载） - 包含文本的块级元素
在页面加载的前2.5秒内完成最大内容绘制的页面视为良好（绿色）。超过4.0秒的页面视为不良（红色）：
最大内容绘制（LCP）
最大内容绘制分析工具
LCP是最容易理解的Core Web Vital，但选择哪个元素进行分析可能并不明显。
DevTools Lighthouse面板在基于铬的浏览器中提供，如Chrome、Edge、Brave、Opera和Vivaldi。从浏览器菜单中打开DevTools–通常位于“更多工具”>“开发人员工具”或键盘快捷键Ctrl | Cmd+Shift+I或F12–然后导航到Lighthouse选项卡（旧版本可能会将其命名为Audit）。
生成移动性能报告，然后检查生成的性能部分。最大内容绘制时间显示为可展开部分，该部分标识所选元素：
DevTools Lighthouse移动性能报告
如果您无法访问基于Chromium的浏览器，则可以在访问PageSpeed Insights和web.dev Measure tools中生成相同的信息：
PageSpeed Insights执行LCP分析
DevTools性能面板还显示LCP指示器。要开始，请单击循环记录图标，重新加载页面，然后单击停止按钮查看报告。单击“计时”部分中的LCP图标以标识元素并查看统计信息摘要。
DevTools性能面板LCP指示器
Web Vitals扩展可用于Google Chrome，但可以安装在大多数基于Chrome的浏览器上。它为您访问的每个站点计算核心Web关键指标，其图标根据结果变为绿色、橙色或红色。您还可以单击扩展图标查看更多LCP详细信息：
Web Vitals扩展LCP
Google’s Search Console现在提供了Core Web Vitals部分，如果你的网站是作为属性添加的。该报告说明了CWV指标是如何随时间变化的。请注意，它没有确定具体的LCP指标，只有具有合理高流量的站点可用：
谷歌搜索控制台Core Web Vitals
Chrome用户体验报告允许您查询特定URL的实际使用统计数据，包括不同国家、连接和设备的LCP。这是Google BigQuery上的一个公共项目，所以您必须注册一个Google云平台帐户并提供账单详细信息。同样，报告只有在URL具有相当高的流量水平时才有用。
最后，web-vitals JavaScript库是一个1KB的小脚本，可以为您的实时站点上的真实用户计算LCP和其他核心web重要指标。由于可以从CDN下载，您可以将以下脚本添加到HTML中的<head>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getLCP } from 'https://unpkg.com/web-vitals?module';
getLCP(console.log);
</script>
<!-- rest of page -->
getLCP()是一个异步函数，在计算LCP值时会触发回调（但如果在后台选项卡中加载页面，则可能永远不会触发回调）。向回调函数传递一个对象，该对象包含：
name：度量的名称（本例中为“LCP”）value：计算出的值id：表示当前页面的此度量的唯一iddelta：当前值与上次报告值之间的增量entries：值计算中使用的条目数组
上面的脚本将对象输出到控制台，不过将数据发送到服务器或Google Analytics进行进一步分析更为实际。
LCP分数低的常见原因
LCP分数差通常是由阻塞最大块快速出现的缓慢加载页面造成的：
- 在客户端上生成的页面内容，而不是服务器上生成的内容也需要更长的时间才能显示出来。
- 服务器响应可能会很慢，因为它超载或做了太多工作来呈现页面。这可能不一定是您的站点的错误-如果您使用的是共享托管服务，则可能是由于服务器限制。
- 如果在主内容上方的HTML中引用了呈现阻塞CSS和JavaScript，则它们可能会延迟页面加载。
- 其他资源（如大型图像和视频）可能会减少可用带宽，并需要更长的渲染时间。
在客户端而不是服务器上生成的页面内容也需要更长的时间才能显示。
如何提高LCP分数
彻底的审查可以发现加载问题，但通常是减少发送到浏览器的数据量的问题。以下提示将有助于获得更健康的LCP分数：
- 升级服务器和/或主机服务。确保下载速度即使在高使用率时也保持快速。
- 激活服务器压缩和HTTP/2+。没有理由不这样做！
- 减少服务器工作。删除未使用的代码和CMS插件，然后启用有效缓存。
- 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希，以便不再请求文件。
- 使用内容交付网络（CDN）在地理位置更靠近用户的服务器上拆分负载和托管资源。
- 优化你的图像。将它们减少到最小尺寸，并使用适当的格式来最小化文件大小。确保尽早请求最大内容块中的任何图像；预加载可能会有所帮助。
- 通过添加
loading="lazy"属性延迟加载图像。添加宽度和高度属性，以确保在图像完成加载之前在页面上保留适当的空间。 - 最小化第三方请求，并将移动资产考虑到主域以避免无关DNS查找。
- 最小化请求文件的数量和大小，尤其是在HTML的顶部。
- 确保仅加载所需的web字体。切换到web安全字体以获得最佳性能。
- 删除未使用的JavaScript和CSS文件。
- 连接并缩小JavaScript和CSS文件。
- 避免CSS@import语句-它们是串联的渲染块和加载样式。
- 避免Base64编码-它会增加文件大小并需要额外的处理。
- 考虑关键的联机CSS。在页面顶部的
<link>块中嵌入基本的“折叠上方”CSS，然后异步加载更多样式表。 - 稍后使用异步、延迟或ES模块JavaScript运行脚本。在服务工作者中执行长时间运行的JavaScript进程。
首次输入延迟（FID）
首次输入延迟（FID）测量页面的响应性。本质上，它对用户的点击、点击和滚动等操作的响应速度有多快？
FID指标计算为用户交互和浏览器处理其请求之间的时间。它不度量运行处理程序函数的时间，处理程序函数通常会处理输入并更新DOM。
FID时间小于等于100毫秒的页面视为良好（绿色）。超过300毫秒的页面视为不良（红色）：
首次输入延迟
Info：
2024 年 3 月 12 日，INP 被添加到 Core Web Vitals 框架中，取代了旧的首次输入延迟（FID）指标。FID 只衡量用户的首次交互，而 INP 则关注整个页面访问过程中的所有交互。
Chrome 浏览器报告数据显示，85% 的网站已经获得了良好的 INP 分数。如果您能很好地优化网站的前两个分数，那么 INP 分数也会很高。
为了让用户满意并参与其中，请将 INP 的目标设定为 200 毫秒或更低。如果您的 INP 在 200 至 500 毫秒之间徘徊，那么您就有一些工作要做了。
如果超过 500 毫秒，您就会给访问者带来拨号上网的体验。
首次输入延迟分析工具
首次输入延迟是不可能模拟的，因为它只能在页面提供给与页面交互的实际用户时测量。因此，结果取决于每个设备的处理器速度和能力。
FID不在DevTools Lighthouse面板或PageSpeed Insights中计算。但是，它们可以确定总阻塞时间（TBT）。这是第一个输入延迟的合理近似值。它测量以下各项之间的时间差：
- 首个内容绘制（FCP），或页面内容开始呈现的时间，以及
- 交互时间（TTI），或页面可以响应用户输入的时间。当没有长时间运行的任务处于活动状态且尚未完成的HTTP请求少于三个时，假定为TTI。
PageSpeed Insights总阻塞时间
Google Chrome的Web Vitals扩展也可以在通过滚动或单击与页面交互后显示FID度量。单击扩展的图标以显示更多信息：
Web Vitals扩展FID
与LCP一样，Chrome用户体验报告允许您查询在不同国家、连接和设备上记录的特定URL的真实FID统计数据。
web vitals JavaScript库还可以计算实时站点上真实用户的FID指标。您可以将以下脚本添加到HTML的<head>以将FID度量输出到回调函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getFID } from 'https://unpkg.com/web-vitals?module';
getFID(console.log);
</script>
<!-- rest of page -->
FID分数低的常见原因
FID和TBT分数低通常是由占用处理器的客户端代码引起的，例如：
- 大量的呈现阻塞CSS和JavaScript，这会在下载和解析代码时停止页面加载
- 加载页面时立即运行的大型流程密集型脚本
- 长时间运行或优化较差的JavaScript任务
默认情况下，浏览器运行在单个线程上，一次只能处理一个任务。如果一个JavaScript函数需要一秒钟的时间来执行，那么所有其他渲染过程都会在这一秒钟内被阻塞。页面无法响应用户输入、更新DOM、显示动画等。甚至GIF动画也可以在旧浏览器中被阻塞。
如何提高FID分数
客户端JavaScript审计可以识别问题，但通常需要删除冗余代码并确保任务快速执行。
以下提示将有助于获得更健康的FID分数：
- 在服务器上生成并缓存尽可能多的静态HTML内容。尽量不要依赖客户端JavaScript框架为每个人呈现相同的HTML。
- 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希，以便不再请求文件。
- 采用渐进式增强技术，因此在JavaScript运行之前，该界面可以在HTML和CSS中使用。
- 删除未使用的JavaScript和CSS文件。
- 连接并缩小JavaScript和CSS文件。
- 避免过度使用昂贵的CSS属性，如框阴影和过滤器。
- 稍后使用异步、延迟或ES模块JavaScript运行脚本。
- 最小化对分析、社交媒体小部件、论坛等的第三方JavaScript请求。这些请求可以快速加载到数兆字节的JavaScript。
- 根据需要延迟加载JavaScript组件，例如聊天窗口小部件、视频播放器等。
- 延迟加载不太重要的脚本，如分析、广告和社交媒体工具。
- 将长时间运行的JavaScript任务分解为一系列较小的作业，这些作业在短时间的requestIdleCallback、setTimeout或requestAnimationFrame延迟后执行。
- 考虑在Web工作者中使用一个后台线程来执行长时间运行的JavaScript进程。
累计布局偏移 （CLS）
CLS测量页面的视觉稳定性。本质上，页面内容是否会意外移动或跳转，尤其是在初始加载期间？
当元素在没有警告或用户交互的情况下移动时，CLS计算分数。当你在移动设备上阅读一篇文章时，你可能已经体验到了这一点——文本突然跳出屏幕，你失去了位置。最糟糕的例子可能会导致您单击错误的链接。
当一个大的图像或广告加载到当前滚动位置之上，并且零高度空间立即增加数百像素时，CLS问题最为突出。
通过将以下指标相乘计算累积布局轮班分数：
- 影响分数：这是视口中所有不稳定元素的总面积，即那些将“跳跃”的元素。如果覆盖60%视口的元素在页面加载期间发生位移，则影响分数为0.6。请注意，导致移动的元素（例如图像或广告）被认为是稳定的，因为它们在渲染后不一定移动。
- 距离分数：这是视口中任何单个不稳定元素移动的最大距离。如果最大位移发生在从0100移动到0800的元素上，则该元素已移动700个垂直像素。如果设备视口的高度为1000 px，则距离分数为700 px/1000 px=0.7。因此，计算的累积布局轮班分数为0.6 x 0.7=0.42。
谷歌对CLS指标进行了修改，以适应以下情况：
布局移位被分组为“会话”，持续5秒，但如果没有进一步的布局移位，则在1秒后关闭。如果在一秒钟内发生两次或两次以上的轮班，则将其分数相加。
用户交互（如单击）后500毫秒内不会记录布局移动。在某些情况下，这会触发DOM更新（例如打开菜单、显示错误消息、显示模式对话框等）。
单页应用程序在更长时间内保持打开状态并进行大量DOM更新，不会受到不利影响。
CLS分数为0.1或更低的页面视为良好（绿色）。超过0.25的页面被视为较差（红色）：
累积布局偏移
截至 2024 年 9 月，78.2% 的网站获得了良好的 CLS 分数，且逐月持续增长。这表明，越来越多的开发人员将流畅、无偏移的用户体验放在首位。
因此，如果您希望获得稳定的用户体验，请将 CLS 分数控制在 0.1 或以下。如果超过 0.25，用户就会感觉整个页面都在移动。
累积布局偏移分析工具
CLS度量在DevTools Lighthouse面板、PageSpeed Insights和web.dev Measure工具中计算：
PageSpeed Insights CLS
Google Chrome的Web Vitals扩展还显示了CLS指标：
Web Vitals扩展CLS
与LCP和FID一样，Chrome用户体验报告允许您查询在不同国家、连接和设备上记录的特定URL的真实CLS统计数据。
web-vitals JavaScript库还可以为实时站点上的真实用户计算CLS指标，就像LCP和FID一样。可以将以下脚本添加到HTML的<head>以将CLS度量输出到回调函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getCLS } from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
</script>
<!-- rest of page -->
累积布局偏移分数低的常见原因
CLS分数低通常是由于加载页面资产和动态或未调整大小的DOM元素速度慢造成的：
- 页面上的空间不用于图像、iFrame、广告等。
- 内容被动态地注入DOM，通常是在网络请求广告、社交媒体小部件等之后。
- Web字体加载会导致不可见文本（FOIT）或未设置样式文本（FOUT）的明显闪烁。
如何提高累积布局偏移分数
客户端审计可以发现问题，但通常是确保在内容下载之前为内容预留空间。为最大内容绘制建议的服务器优化提示将有一些好处，但可能会有进一步的改进：
- 在HTML的
<img>和<iframe>标记中添加宽度和高度属性，或者使用新的CSS纵横比属性确保在下载资产之前在页面上保留适当的空间。 - 为封装第三方内容（如广告和小部件）的容器元素设置适当的尺寸。
- 确保尽早请求显示在页面顶部的图像和其他资产-预加载可能会有所帮助。
- 尽量减少Web字体的使用，并考虑在可能的时候使用常用的OS字体。
- 加载web字体并将CSS字体显示设置为可选或交换。确保使用大小相似的回退字体，以最小化布局偏移。
- 避免向页面顶部插入元素，除非页面响应用户操作（如单击）。
- 确保在输入触发器的500毫秒内完成用户交互。
- 使用CSS变换和不透明度可以获得更高效的动画，而不会导致重新布局。
- 考虑关键的联机CSS。在页面顶部的
<link>块中嵌入基本的“折叠上方”CSS，然后异步加载其他样式表。 - 必要时，考虑包容，一种新的CSS特性，允许您识别页面的孤立子树。浏览器可以通过渲染或不渲染特定的DOM内容块来优化处理。
如何衡量Core Web Vitals
在前面 Core Web Vitals 的核心关键点我们已经详细说明每一个关键点的分析工具。总而言之，在开始努力提高 Core Web Vitals 之前，最好先了解一下网站目前的状况。这样，您就能衡量自己的进步。定期评估得分是网站维护工作的重要组成部分。
让我们来看看衡量网站性能的几种不同方法。
PageSpeed Insights
您可以使用一些在线工具来衡量核心网站活力，包括 Pingdom 和 GTmetrix。不过，我们推荐使用 Google PageSpeed Insights 。
要开始使用，请输入您网站的 URL，然后点击 Analyze 按钮。
分析完成后，它会提供一些关键数据的摘要和网站的核心网络活力数据。如上图所示，默认的谷歌网站有
- LCP: 0.7 秒
- INP: 63 毫秒
- CLS: 0
PageSpeed Insights 会同时测试移动和桌面得分，你可以在进入网站的下方进行切换。
如果进一步滚动，您还会发现一些诊断结果和改进建议。根据网站的得分，PageSpeed Insights 会提供一些建议，供你用来提高得分和改善网站性能。
Chrome 浏览器用户体验报告
您还可以通过 Chrome 浏览器用户体验报告访问您的 Core Web Vitals。这对开发人员和网站管理员特别有帮助。
该报告可通过 Google Search Console 获取，提供来自访客的真实数据和见解。它可以帮助你了解用户是如何使用网络并与网站互动的。
要查看该报告，您需要前往 Google Search Console 的控制面板。然后，导航到位于 Experience 部分下的 Core Web Vitals。
Core Web Vitals 的 Chrome 扩展
如果您是 Chrome 浏览器用户，可以使用 Web Vitals Chrome 扩展来评估您在任何网站上的核心网络体验。
只需将扩展添加到 Chrome 浏览器，就可以开始使用了！
下次访问网站时，只需点击页面顶部的扩展图标，就能看到该网站的 Core Web Vitals 分数。
以下是该扩展的输出结果：
您无需每次访问 PageSpeed insights 页面，就能一目了然地看到 LCP、CLS 和 INP 分数。
如何提高 Core Web Vitals 以获得更好的 Google 分数？
既然我们已经掌握了基础知识，那就让我们再次归纳一些提高 Core Web Vitals 评分的最佳做法。请记住，这不仅仅是为了给谷歌留下深刻印象，而是为了创建一个让访客喜欢使用的网站。
1. 使用现代图像格式
我们是视觉动物，但如果压缩不当，那些漂亮的高分辨率图片会影响网站性能。
你需要优化图片，然后将优化后的图片上传到网站，而不是使用服务器端解决方案。
为了解决这个问题，使网络速度更快，谷歌推出了 WebP 格式。它保留了大量图像细节，同时大大缩小了图像尺寸。
WebP 可以作为照片和复杂图像的首选格式。它比 JPEG 或 PNG 有更好的压缩效果，这意味着你可以在不牺牲质量的情况下获得更小的文件大小。WebP 图像比 JPEG 图像小 30%。因此，你可以节省大量带宽和加载页面所需的时间。
我们喜欢使用 Squoosh 将图片转换为WebP，或者压缩图片以节省空间。
以下是一些值得考虑的其他图像优化插件：
除了 WebP，我们还建议使用 SVG 来制作图标、徽标和插图。
SVG（可缩放矢量图形）本身并不是图像。与 JPEG、PNG、WebP 等常规图像格式相比，SVGs 是一种基于 XML 的标记语言，可在二维几何平面上描述图像。
然后将描述文本发送给用户，用户的浏览器在收到完整的 SVG 标记后将其转换为 “图像”。
所有这些使得 SVG 非常轻量级–因为它们本质上只是一些小的文本块。
此外，由于它是基于数学创建的，SVG 图像可以无限缩放而不会降低质量，而且在任何设备上，从小小的智能手机到巨大的 4K 显示器，都能清晰显示。
SVG 被称为矢量格式，而 WebP 则是光栅格式，你可以看到两者在放大时的反应。
该字体是日常使用的矢量字体的典型范例。你可以随意放大字体，但它们不会像素化。说到字体，您还可以使用另一种方法来优化 Core Web Vitals 网站，那就是减少字体的使用。
2. 优化字体，提高 CWV 性能
字体可以决定网站设计的成败。但在优化字体性能方面，字体越少越好。
以下是为网站优化字体的几个技巧：
- 限制字体数量：在整个网站中坚持使用两种主要字体–一种用于标题，一种用于正文。这样可以减少 HTTP 请求的数量，简化设计。此外，要有选择性地使用字体重量；只使用您需要的字体。
- 尽可能使用系统字体：大多数设备已经安装了 Arial、Helvetica 或 Georgia 等系统字体。它们可以立即加载，无需额外下载字体。
- 预载关键字体：在 HTML 中添加一个预加载链接，可以指示浏览器在加载过程的早期获取最重要的字体。这可以大大缩短文本渲染时间。
- 优化自定义字体以防止 CLS：浏览器在下载自定义字体之前并不知道它们的确切尺寸，从而导致布局偏移。一些开源工具，如Font Pie，可以帮助生成消除或至少减少 CLS 的 CSS。
- 子集字体：删除字体文件中未使用的字符，比如非拉丁字符（如果你的网站不使用它们）。这样可以减小文件大小，加快加载速度。
我们将在今后介绍一些先进的字体优化策略，但现在，使用这个快速列表应该可以帮助你为网站字体取得更好的成绩做好准备。
3. 使用 Google 标签管理器前请三思
我们知道你在想什么： 但是 Google 标签管理器让我的生活变得如此简单！
你说得没错。
它是一款无需深入代码即可管理多个标签的神奇工具。但是，在使用 Core Web Vitals 时，它既有优点也有缺点。
虽然 Google 标签管理器是组织标签的绝佳工具，但如果使用不当，有可能会降低网站的运行速度。每个标签都会增加一点加载时间，而这些毫秒的增加速度可能比你在开发者大会上喝咖啡的速度还要快。
扪心自问：你真的需要在每次页面加载时都启动所有这些标签吗？是否可以手动实施其中一些标签，以便更好地控制加载时间？
根据经验法则，只使用 Google 标签管理器来执行必要的、全站范围的标签，而手动执行不那么重要或特定页面的标签。
4. 实施缓存解决方案
将缓存视为网站的短期记忆。缓存不是为每个访问者从头开始生成每个页面，而是存储页面的副本，并以迅雷不及掩耳之势提供给访问者。
实施缓存可以显著提高 LCP 分数，尤其是动态网站。您可以考虑使用不同级别的缓存：
- 浏览器缓存：告诉浏览器在本地存储某些文件。
- 服务器端缓存：存储生成的页面或数据库查询。
- 对象缓存：缓存小部件或菜单等单个元素。
根据你的虚拟主机，你也许可以在服务器上利用缓存。
另外，假设你使用 WordPress 作为网站的内容管理系统（CMS）。在这种情况下，W3 Total Cache 或 WP Super Cache 等插件可以帮助您实施更多层次的缓存，包括浏览器缓存和对象缓存，从而进一步提高网站速度。
5. 消除渲染阻塞资源
渲染阻塞元素是指在网站上渲染页面所需的静态 HTML、CSS 和 JavaScript 文件。这些文件中的每一个都包含会阻止用户查看内容的脚本。
通常，它们是由第三方插件和工具（如Google Analytics）创建的。
但是，避免这些脚本损害用户体验的方法之一（反过来也有助于改善 Core Web Vitals）就是消除渲染阻塞资源，并对任何未使用的 CSS 或脚本进行最小化和删除。
您可以使用多种技术来实现这一点。
一种是通过消除空白或不必要的注释来对 JavaScript 和 CSS 进行最小化。
您可以使用 CSS Minifier 等工具来简化这项工作：
输入 CSS 并选择 Minify 按钮。然后，你就可以复制并粘贴输出结果，下载并替换你的代码。
另一种方法是通过合并文件来压缩 JavaScript 和 CSS。这是 WP Rocket 文件优化功能可以帮助完成的另一项任务。
6. 延迟加载 JavaScript
如果你想提高 FID 分数，可以使用延迟加载 JavaScript 的技术。这是另一种消除渲染阻塞元素的方法。
这个过程会使网页加载更快，因为它会延迟 JavaScript 的加载。换句话说，当访问者到达时，它会加载页面上的其他内容，而不是等待所有 JavaScript 文件加载完毕。
您的文件将被迫等待加载，直到网页上的其他内容都准备就绪。
此外，您还可以对网站设置进行配置，使关键 CSS 更快地加载页面首屏的内容。页面首屏内容即指的是网页上最先出现的元素。
要做到这一点，你可以将内容从主 CSS 文件中移出，并将其内嵌到代码中。这将有助于加快加载速度，从而改善用户体验。一些缓存插件（如 WP Rocket）提供的优化 CSS 传递功能对此很有帮助。
7. 使用 CDN 加速
想象一下，如果你的网站在全球各大城市都有一个自己的克隆版本。这就是内容分发网络（CDN）的基本功能。
它可以将静态资产（如图片、CSS 和 JavaScript 文件）的副本分发到全球各地的服务器，这样您的访问者就可以从最近的地方下载它们。
结果如何？更快的加载时间、更高的 LCP 分数，以及为全球受众带来更好的用户体验。它还可以帮助最大限度地减少首字节时间（TTFB）。
您可以在 WordPress 网站上使用多种第三方工具。其中最受欢迎的是 Cloudflare 。
与缓存一样，一些托管服务提供商提供内置 CDN 或至少与 CDN 集成。
8. 适当调整图片大小
图片越大，文件尺寸就越大。
因此，明智的做法是确保不要随处使用过大的图片。例如，缩略图没有必要使用高清图片。您可以使用更小、分辨率更低的图片。
要进一步优化图片，可以在 HTML 代码中使用 srcset 属性。使用该标签，您可以指定不同尺寸图片的位置，现代浏览器可以根据设备的分辨率自动提供正确尺寸的图片，从而提高 LCP 分数。
除此之外，您还可以为图片标签指定宽度和高度属性，或使用 CSS 宽高比预留所需空间，以确保用户自动看到较小的图片。
不过，我们始终建议在上传图片前使用 Sqoosh 等工具调整图片大小。
9. 实施懒加载
我们还建议你实施懒加载。这有助于确保图片在用户进入网页该部分时精确加载，而不是与网页上的其他内容同时加载。
懒加载图片有助于提高 LCP 和加载速度。最重要的是，它很容易实现。
现代浏览器支持本机懒加载，在 <img> 标记上使用 loading="lazy"属性 。
只需添加一个属性，你的页面就可以懒加载了。
对于 WordPress 用户来说，只需使用 Jetpack 或 Smush 等插件即可启用懒加载功能。
10. 升级主机
有时，你可以把一切都做得很好，但 Core Web Vitals 分数仍然很低。此时，考虑升级托管服务提供商的计划是有意义的。
例如，如果您最近开始接待大量访客，或者添加了许多带有大量图片的新产品，那么您可能已经达到了虚拟主机的上限。
在这种情况下，如果您使用的是共享主机计划，您可以转到虚拟专用服务器（VPS）主机或独立主机。
对于 WordPress 用户来说，WordPress 托管可以很好地提升网站性能，而且价格也不会太贵。
无论你选择哪种类型的主机，或者已经在使用哪种类型的主机，大家都认为升级主机提供商或计划是加快网站速度的最快方法。
我们建议选择托管主机，其服务器专为 WordPress 优化，可以处理网站性能的各种技术问题。
小结
开发者并不总是热衷于跟随谷歌的调子跳舞。大型公司拥有相当大的实力，搜索引擎的微小更新可能会对网络组织的生产力和盈利能力产生不利影响。
这就是说，Core Web Vitals采取了“胡萝卜”而不是“大棒”的方法。优化良好的、可用的、放弃黑暗模式的网站比那些提供糟糕的移动用户界面的、臃肿的、弹出式密集型的网站更容易成功。
Core Web Vitals提供了一种可测量的方法来评估用户体验，帮助您专注于最关键的改进。对你的重要信息的改变可能不会增加收入，但你的用户会更快乐、更忠诚。
如果您要进一步深入了解基于Core Web Vitals进行网站优化，可以阅读以下相关文章：
- 什么是FCP以及如何针对您的网站优化
- 什么是首次输入延迟 (FID)以及如何有针对性地优化
- 什么是最大内容绘制 (LCP) 以及如何有效地优化
- 什么是累计布局偏移 (CLS) 及应该如何优化提升
- 什么是首字节时间 (TTFB) 及如何为您的网站优化该指标
- 什么是首屏展现平均值 (Speed Index) 及如何做相应优化措施
- 如何做到Google PageSpeed Insights测试满分
当你摸透一些指标定义及学会有针对性地对网站进行优化，结合本文及如何做到Google PageSpeed Insights测试满分，相信您的网站的速度有了质的飞跃。
评论留言