提高你的网页速度洞察得分，以提高你的网站的速度

（图片信用：谷歌）

像PageSpeed Insights (PSI)和Lighthouse这样的工具对于监视站点的性能很有价值。但你为什么需要它们呢?当你在构建一个现代的网络体验时，衡量、优化和监控是很重要的，如果你想要快速并保持快速。性能在任何网站的成功中都扮演着重要的角色，因为高性能的网站比低性能的网站更能吸引和留住用户。

在这篇文章中，Addy Osmani，他在Chrome中管理着Web开发者洞察团队，将谈论自切片面包以来最好的事情:性能测量以及这些工具如何帮助你改善你的网站。

需要一些新套件?看看我们的选择网络设计工具和顶部笔记本电脑编程。或者，建立一个全新的网站，找到最好的网站建设者满足您的需求。

这些工具是做什么的?

灯塔提供了一个全面的性能机会集合，并通过实现每一个优化节省时间。你可以在Chrome DevTools审计面板中找到它Pagespeed见解。

Pagespeed见解报告了移动和桌面设备上页面的性能，并提供了如何提高该页面的提出的建议。

PSI提供关于页面的“实验室”(灯塔)和“现场”数据。实验室数据
对于调试性能问题非常有用，因为它是在受控环境中收集的。然而，它可能无法捕获现实世界中的瓶颈。字段数据对于捕获真实的、真实的用户体验非常有用，但其度量标准更为有限。

表现分

在报告的顶部，PSI提供了总结页面性能的分数。该分数是通过运行灯塔来确定和分析关于页面的实验室数据。得分为90或更高的是快速，50至90被认为是中等的。低于50被认为是缓慢的。

Lab与字段数据

实验室数据

实验室数据是通过预定义的设备和网络设置在受控环境中收集的性能数据。

这提供了可重复的结果和调试功能，以帮助识别、隔离和修复性能问题。

优势：

在调试任何性能问题时都很有用
端到端，并在UX中提供深刻的可视性
提供可重复的测试和调试环境

限制:

可能不会捕捉真实世界的瓶颈
无法与真实世界的页面KPI相关联

注意:像灯塔和WebPageTest收集这类数据。

现场数据

现场数据（也称为真实用户监控或rum）是从实际页面收集的性能数据，您的用户在野外遇到。

优势：

捕获真正的真实用户体验
支持与业务关键性能指标的相关性

限制:

受限的度量集
有限的调试功能

注意：公共数据集如Chrome用户体验报表像Pagespeed Insights速度分数等性能工具报告此类数据。

性能指标

在过去，web性能是用负载事件。但是，这一刻并不一定与用户关心的内容相对应。在过去几年中，浏览器团队一直在努力标准化一组新的指标和API，更准确地捕获网页的性能。

为了确保这些参数与用户相关，我们围绕以下几个关键问题进行设计:

这是发生吗?导航成功启动了吗?服务器响应了吗?
是有用的吗?是否呈现了足够的内容让用户能够参与其中?
它可用吗?用户是否可以与页面交互，或者页面是否繁忙?
它令人愉快吗？互动是平滑和自然的，没有滞后吗？

这里有许多重要的度量标准，Lighthouse和PageSpeed Insights试图捕捉其中一些关键指标。

第一个内容绘制标记了第一个文本或图像被绘制的时间。
交互式的时间是页面变得完全交互所需要的时间（例如，用户可以单击并查看响应）
Speed Index显示页面内容的填充速度。

今年我们的工具中会出现一些令人兴奋的新指标:

最大的满足油漆（LCP）：测量页面从加载到屏幕上最大文本块或图像元素时页面开始时的时间。
总阻塞时间（TBT）：测量FCP和TTI之间的总时间，其中主线被阻塞，足以防止输入响应性

了解更多关于现代的性能指标。

真实世界的现场数据

当PSI得到一个URL时，它会在Chrome用户体验报告(CrUX)数据集中查找它。如果可以，PSI报告第一个意旨油漆(FCP)和第一次输入延迟（FID）原点的度量数据和潜在的特定页面URL。

分类快、中、慢

PSI还将现场数据分为三个桶，描述了快速，中等或慢速的经验。PSI基于Crux DataSet设置快速/中等/慢速的以下阈值：

铸造:

快速:0 - 1000ms
中:1000ms - 3000ms慢:超过3000ms

FID：

快速:0 - 100ms
中:100ms - 300ms
缓慢:在300 ms

实验室数据

PSI使用Lighthouse来分析给定的URL，生成一个性能分数来评估页面在不同指标上的性能，包括:第一内容描绘、速度指数、交互时间和估计的输入延迟(为了进一步改善你的网站，检查你已经得到了理想的虚拟主机为您服务）。

每个度量标准都标有图标：

快速度量用绿色的勾号表示
橙色信息圈表示中度
慢是用红色警告三角形表示的

审计

Lighthouse将审计分为三个不同的部分:

Opportunities提供了如何改进页面性能指标的建议。本节中的每个建议估计了在实现改进后页面加载的速度
诊断提供了有关页面如何遵守Web开发的最佳实践的其他信息
Passed auditing表示已通过该页的审计

优化性能

有几种优化可以应用于改善您的灯塔/ Pagespeed Insights指标。

改善第一个满足油漆：

缩小CSS并删除未使用的CSS
消除任何渲染阻塞资源
在必需的起源中
减少服务器响应时间
避免多页重定向
避免过多的DOM尺寸
在加载Web字体期间，确保文本保持可见（例如，具有字体显示）

发送大量JavaScript负载会显著影响站点的速度，特别是用户与页面交互的速度。要缩短网站的互动时间，你可以:

缩小和压缩JavaScript
只有在需要它时只提供JavaScript用户需要（例如，使用代码分离）减少第三方代码的影响（例如懒惰加载这些资源）
通过优化昂贵的长任务来减少JavaScript执行时间
预加载关键脚本，特别是如果您的站点是单页应用程序

这些优化也可以提高你的速度指数。得到在这里的灯塔/页面的比分更具性能提示。

Pagespeed Insights API

与psi有关Pagespeed Insights API，它提供对网页性能监控的免费访问，并返回数据和如何改进的建议。V5 API包括来自的实验室数据灯塔和现实世界的数据从Chrome用户体验报告(CrUX)。

``js const url = ' https://wordpress.org ';const apiCall = ' https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url} ';const response = await fetch(apiCall);Const json = await response.json();

团队使用API与其他用户体验测量工具使用API构建仪表板，自定义报告和自定义集成。这反应从API可用于监视和图表从我们之前所涵盖的PSI工具中的任何数据。

可以使用PSI数据建立高度定制的报告。例如，度假租赁网站Vrbo将PSI API中的真实数据绘制成图表跟踪长期业绩趋势以确保其速度在旅游业中保持竞争力。

Web.dev测量使用与PSI相同的后端，并使用该数据进行历史测量。

熟悉熟悉的结构有助于PSI API响应。有可用于实验室和实地/现实世界的指标信息:

``js const url = ' https://wordpress.org ';const apiCall = ' https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url} ';json =>{//真实世界的度量const cruxMetrics ={"第一个Contentful Paint ": json. loadingexperience .metrics. first_contentful_paint_ms。json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS。类别};//实验室指标const lighthouse = json.lighthouseResult;const lighthouse emetrics = {' First Contentful Paint ': lighthouse.audit [' First Contentful - Paint ']。显示值，'速度索引':灯塔.审计['速度索引']。displayValue， ' Time To Interactive ': lighthouse.审计[' Interactive ']。displayValue};/ /……});

PSI API的响应集中在性能数据上。那说，你可以提供？类别参数指定您希望数据用于的任何其他Lighthouse审计类别。

' ' ' sh curl -i " https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://web.dev&category=pwa&category=performance&category=accessibility&category=best-practices&category=seo "

您还可以提供语言环境或策略参数（桌面或移动 - 它模拟中位数设备上的页面加载 - 例如Moto G4 - 在移动网络上）。

灯塔开始支持栈包，堆栈特定的建议，了解如何实现优化（例如WordPress）提供更详细的指导。PSI的API响应也支持这一点，因此如果您正在测试WordPress站点，则包括这些字符串（例如，用于WordPress.org的演示URL将是https:// www.googleapis.com/pagespeedonline/v5/ runPagespeed ? rl = https://wordpress.org)。

PSI工具还支持获取PSI API数据并与官方呈现灯塔观众。经过psiurl ?作为一个范围为了看到它的实际应用。

我们在PSI之上构建的工具之一是PSI Node模块，它在构建过程中提供方便的性能报告。

```js const psi =要求（'psi'）;（async () => { // Get the PageSpeed Insights report const { data } = await psi(‘https://web.dev’); console.log(‘Speed score:’, data.lighthouseResult.categories.performance.score); // Output a formatted report to the terminal await psi.output(‘https://theverge.com’); console.log(‘Done’); })();