个自我强加限制的方式来影响性能指标
缓存预热系统会发送一个机器人来重建缓存，而不是等待用户请求文件，这意味着用户无需等待初始缓存的构建。 检查方式通常像是：CDN 缓存 > 服务器缓存(如 Varnish) > 原始页面(必须即时构建页面)。 通常，像 CDN 这样更高级别的缓存会更快，因此你会希望大多数点击都在该级别。 举例来说，下面显示 Cloudflare 中我的一个站点，CDN 级别缓存命中率略高于 50%。不幸的是，这意味着许多请求不是由 CDN 提供的，而是必须返回到服务器级别的缓存。或者说如果那里没有当前的缓存版本，它将不得不动态构建页面，这会使用大量数据库资源并拖慢用户速度。 浏览器缓存 即使你有一个在页面速度方面测试不佳的大型网站，页面的第一次和第二次加载或页面之间的导航也可能存在相当大的差异。到目前为止，我们讨论的很多内容都集中在使初始加载更快，这是大多数测试工具看到的内容，也是用户对网站的第一印象。当用户访问一个页面时，浏览器可以在该人的计算机本地缓存许多文件，这些文件可以重新用于后续的访问。 举例来说，查看 Ahrefs 第一次和第二次加载之间的差异。大多情况必须在第一次加载时下载的文件都缓存在客户端(浏览器)上，这意味着第二次加载可以重新使用已经下载的文件来构建页面。减少连接时间和下载意味着页面加载速度明显加快，在这种情况下，第一次绘制(First Paint)在第二次加载中的速度大约快了两倍。第一次加载： 第二次加载： 你会看到在 Lighthouse 等工具中标记的缓存问题为“使用有 手机号码数据 效的缓存策略提供静态资产。”设置缓存的时间长度因系统而异，但通常需要做的是使用 Cache-Control HTTP 响应头，max-age 是你希望它以秒为单位存储的时间，可以设置为：Cache-Control: max-age=31536000 Varvy 在不同服务器设置缓存控制上有个值得一读的指南。 设置性能预算(或许) 性能预算是透过设置。它可以是某种类型文件的数量、大小或我们讨论过的一些速度指标。设置预算有助于整个流程的启动与进行，在此处了解更多信息。 自动调整加载 自动调整加载的方式会调整加载的内容以及何时以更加渐进的方式加载站点。首先加载具备功能性的项目，然后根据 CPU、内存或网络速度等因素加载其余的项目。因此，可用资源较少意味着可能会提供站点的精简版本，但拥有更多可用资源的人将获得更完整的体验。 其中一部分是网络信息 API，它提供有关用户连接的信息。你可以根据传入请求的网络信息更改图像/内容或执行像是关闭视频之类的操作，许多图像 CDN 都使用网络信息 API 来执行此操作。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlD3laaBFrLQdpiyRfsCOL2_mx_FqxIj9pRsgiNBckfWlh58Gzec1Hq-9iz4xrTRtseB8q4o_ufhBGMC6xcFvo3tHVfl8ppSRWrYUmmNT35wVdiie0LvBv8qqof-qocX9a_MzhgerM5IIikGAJ9538ONwUH6Upg1lWpirEuk3FV9e5NBBMCYQbbCuqDvd/s467/Phone%20Number%20Data.......jpg
使用其他资源提示 预取 Prefetch Prefetch 是一种资源提示，可以在需求出现之前获取文件，这可以用于整个页面、脚本或 CSS 文件。使用它的最佳方法之一是用 Guess.js，它使用预测性预取。Guess 连接到你的分析上并根据当前用户行为获取最可能是下一页的资源。 预加载 Preload 我们已经讨论了一些预加载，但这是一个略有不同的案例，可以根据用户是否将鼠标悬停在当前视口内的链接来对内容预加载资源。虽然这可能会占用大量资源，但它可以确保加载的下一个页面会显示得更快。 AMP AMP 在 SERP 中预加载，因此网站的一部分在点击之前就已经加载，AMP 的优势是在点击之前完成页面的视觉加载，来自搜索结果的 AMP 看起来比一般网页更快，因为页面的可见部分已经加载完成。 来源：https://www.ampproject.org/latest/blog/why-amp-caches-exist/ AMP 中还有许多其他性能增强和文件大小限制值得考虑。 尽管如此，它仍然是另一个需要维护的系统，并且在深入研究之前你可能需要考虑其他一些权衡。 页面速度测试与工具 实验室数据与现场数据 实验室数据：特点是可控环境、设置及可重复过程，PageSpeed Insights 就是一个很好的例子。测试在相同环境下以相同设置运行，每次运行的结果大致相同。
頁:
[1]