提升First Contentful Paint (FCP)

消除渲染阻塞资源

识别关键资源

使用Chrome DevTools中的Coverage选项卡来标识非关键CSS和JS

消除渲染阻止脚本

将渲染块的脚本移动到内联脚本处。
呈现块URL中的代码不是关键的，可以将其保存在URL中，然后使用async或defer属性标记URL（另请参见使用JavaScript添加交互）。
应该删除根本没有使用的代码（请参阅删除未使用的代码）。

消除呈现阻塞样式表

将渲染块的样式移动到内联处。
使用preload链接异步加载非关键样式（另请参见Defer unused CSS）。
考虑使用上面的“自动提取CSS”工具的内联处理。
消除渲染块样式的另一种方法是将这些样式拆分为不同的文件，按媒体查询组织。然后向每个样式表链接添加一个media属性。加载页面时，浏览器仅阻止第一次绘制以检索与用户设备匹配的样式表（请参见Render Blocking CSS）。
压缩CSS，参见minify-css

预连接到所需的源

添加preconnect或dns-prefetch资源提示
通常，尝试使用，因为这是一个更全面的性能调整，但是对于边缘情况，请务必在工具带中保留

减少服务器响应时间（TTFB）

确保浏览器等待服务器响应主文档请求在600毫秒以内

优化服务器的应用程序逻辑以更快地准备页面。如果使用服务器框架，则框架可能会提供有关如何执行此操作的建议。
优化服务器查询数据库的方式，或迁移到更快的数据库系统。
升级服务器硬件以获得更多内存或CPU。

避免多页重定向

预加载关键请求

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>

避免巨大的网络负载

目标是将总字节大小保持在1,600 KiB以下。

把请求推迟到需要的时候。请参阅PRPL模式了解一种可能的方法。
将请求优化为尽可能小。可能的技术包括：
缓存请求，这样页面就不会在重复访问时重新下载资源。（请参阅网络可靠性登录页，了解缓存的工作原理和实现方法。）

为静态资产提供高效的缓存策略

在HTTP缓存中了解有关缓存资源的更多信息：HTTP缓存：您的第一道防护指南和配置HTTP缓存行为codelab。

避免过大的DOM大小

大型DOM树可以通过多种方式降低页面性能：

网络效率和负载性能
- 大型DOM树通常包含许多在用户第一次加载页面时不可见的节点，这不必要地增加了用户的数据成本并减慢了加载时间。
运行时性能
- 当用户和脚本与页面交互时，浏览器必须不断地重新计算节点的位置和样式。大型DOM树与复杂的样式规则相结合会严重降低渲染速度。
内存性能
- 如果JavaScript使用常规查询选择器，例如document.querySelectorAll（'li'），您可能在不知不觉中存储了对大量节点的引用，这可能会使用户设备的内存容量不堪重负。

指标

总共小于1500多个节点。
深度小于32个节点。
拥有一个包含小于60个子节点的父节点。

优化

优化dom大小：寻找方法只在需要时创建DOM节点，并在不再需要时销毁节点。
如果不能避免使用大型DOM树，另一种提高渲染性能的方法是简化CSS选择器。有关更多信息，请参阅Google的Reduce Scope and Complexity of Style Calculations。

避免链接关键请求

关键请求链是一系列对页面呈现很重要的相关网络请求。链的长度越长，下载大小越大，对页面加载性能的影响就越显著。

关键请求链、资源大小和下载资源所花时间的数据都是从Chrome远程调试协议中提取的。

尽量减少关键资源的数量：消除它们，推迟它们的下载，将它们标记为异步，等等。

优化关键字节数以减少下载时间（往返次数）。

优化剩余关键资源的加载顺序：尽早下载所有关键资产，缩短关键路径长度。

了解有关优化图像、JavaScript、CSS和web字体的更多信息。

确保文本在webfont加载期间保持可见

字体通常是需要一段时间才能加载的大文件。一些浏览器在加载字体之前隐藏文本，导致不可见文本（FOIT）闪烁。

如何避免显示不可见的文本#

避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过在@font face样式中包含font-display:swap，您可以避免大多数现代浏览器中的FOIT：

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

预加载字体

使用<link rel=“preload”>提前获取字体文件。

保持请求计数低，传输大小小

提升First Meaningful Paint (FMP)和Largest Contentful Paint（LCP）

LCP主要受四个因素影响：

服务器响应时间慢
呈现阻塞JavaScript和CSS
资源加载时间
客户端渲染

有关如何改进LCP的详细信息，请参阅优化LCP。有关还可以提高LCP的性能技巧的其他指南，请参阅：

提升speed-index (SI)

虽然您所做的任何提高页面加载速度的操作都会提高您的速度指数得分，但解决这些诊断审核发现的任何问题都会产生特别大的影响：

提升First CPU Idle、Time to Interactive和First Input Delay

一个对TTI影响特别大的改进是推迟或删除不必要的JavaScript工作。寻找优化JavaScript的机会。特别是，考虑使用代码拆分和应用PRPL模式来减少JavaScript负载。优化第三方JavaScript也会对某些站点产生显著的改进。

这两个诊断审核为减少JavaScript工作提供了额外的机会：

提升Total Blocking Time

一般来说，长任务最常见的原因是：

不必要的JavaScript加载、解析或执行。在性能面板中分析代码时，您可能会发现主线程所做的工作并不是加载页面所必需的。通过代码拆分来减少JavaScript负载，删除未使用的代码，或者高效地加载第三方JavaScript，都可以提高TBT得分。

JavaScript语句效率低下。例如，在分析“性能”面板中的代码之后，假设您看到对document.querySelectorAll（'a'），返回2000个节点。重构代码以使用只返回10个节点的更具体的选择器应该可以提高TBT得分。

以性能指标分类进行性能优化