你常常听到的两个词是移动速度和网站速度。这并非没道理的，由于这两个原因是并存的。移动友好性和网站速度是大家需要处置的最紧迫的问题。测量页面速度一直以来都是一门黑技术。大家今天用的网站速度工具已经足够了，但通过用新的Web Vitals指标，谷歌尝试从网页的体验角度出发，从另一个更现实的角度来解决这个问题。在这里，我将仔细研究怎么用谷歌 Lighthouse检查你的移动网站速度和网站优化。

什么是谷歌 Lighthouse？

Lighthouse是谷歌构建的页面体验工具，刚开始旨在审核Progressive Web Apps（PWA）。该工具实行五项审核，以检查可访问性，性能，网站优化，渐进式Web Apps和最好实践的扩展列表。在新的Core Web Vitals的支持下，这类审核一同为你提供了有关移动网站与桌面网站或Web应用程序的水平和性能的出色概述。

网站速度完全取决于感知和客户体验。假如你的网站仍然感觉非常慢，那样数字速度就没任何意义。3G或更小巧的移动连接在世界范围内吸引着很多用户。即便用闪电般的5G连接，站点也会会感到缓慢而缓慢。大家都了解，缓慢的网站或许会对你的转化带来毁灭性影响。缩短加载网站所需的时间（毫秒）或许会有所不同。更不需要说当加载缓慢的广告按下你只想单击的按钮时发生的挫败感。

在测试过程中，谷歌 Lighthouse模拟通过功率稍有降低的设施通过不稳定的3G连接访问你的移动网站。为了尽量真实地模拟现实状况，数据包会丢失。这类见解与其他数据结合在一块。运行测试后，你将获得一份包括分数的报告与可解决问题的可行建议。

PageSpeed Insights与谷歌 Lighthouse

PageSpeed Insights可能是最常见的网站速度剖析工具。它为你提供了很好的分数，并列出了可能的改进，并且使你对网站的感知加载速度有了一个知道。另外，PageSpeed Insights会提供建议并确定改变页面性能的机会。其中有的确实非常难达成，因此对于大部分网站而言，获得100/100的梦想是最佳选择。

PageSpeed Insights和Lighthouse过去是完成这项工作的两种不同工具。他们两个都提供了宝贵的见解，但非常难合并。伴随Web Vitals的出现和页面体验的更新，谷歌全方位改变了指标。它们不只变得更易于理解，而且还成为共享指标。当然，每种工具都是针对特定的子任务制作的，并提供特定的指标。这类指标来自不一样的环境。

现场数据与实验室数据

Web Vitals引入了确定性能的新办法。可以说，其中一些指标可以在实验室环境中进行模拟计算，也就是说，其他指标仅在经过现场测试和采集后才有意义。除此之外，某些指标在这两种设置中均能正常工作。谷歌页面体验工具用各种指标为你提供改变网站所需的数据。

假如注意观察，你会发现某些指标仅在开发职员工具和Lighthouse等实验室工具中有效。字段指标显示在诸如Search Console和PageSpeed Insights中的“ Web Vitals”报告之类的工具中。诸如LCP，FID和CLS之类的核心Web生命将随处可用。

核心互联网生命

全新的Core Web Vitals将出目前所有衡量网站速度，性能和体验的谷歌工具中，甚至出目前Search Console中的新Web Vitals报告中。目前，你仅需知道三个基本指标就能知道你的网站或特定页面的成效。这类核心互联网生命力是：

• LCP或最大内容绘画：或者，你在视口中看到的最大内容元素加载需要多久。
• FID或“初次输入延迟”：或者，浏览器响应用户初次触发的互动需要多久（比如，单击按钮）
• CLS或“累积布局偏移”：或者，屏幕的多少受移动影响-即，东西在屏幕上跳来跳去吗？

这类新的Web Vitals使用更好用的办法，并将客户体验放在第一。这类工具会通过普通设施上的限制连接来访问你的站点，因此它可以模拟现实世界中真的的访问者或许会遇见的状况。这类由Web Vitals驱动的工具不仅能够像过去用的经典速度工具那样加载你的网站，还可以检查它怎么样与何时响应输入-与是不是在初始加载后发生了事情。它会找到你的内容筹备就绪的确切时间，因此你可以在感觉太慢时尝试对其进行优化。另外，你会发现妨碍好页面体验的烦恼。

除此之外，请记住，Lighthouse不只会衡量性能，而且还会检查网站优化，各种最好做法和可访问性。它是一个完整的工具，可以帮助你从整体上改变你的网站。

在Lighthouse结果中探寻什么

加快移动网站速度的整个思路是两方面的：你的网站需要要快，而且它需要感觉快。因此，你需要尽快将内容显示在屏幕上。不要叫人们等待。除此之外，用户需要可以尽快与你的内容进行交互。因为谷歌宣布页面速度和页面体验是网站优化的排名原因，因此你需要解决这类问题。

你应该优先考虑什么？第一加载你的内容。让人敬畏的图形和杀手级动画可以等待。你的信息与大家正在探寻的内容非常可能出目前内容中。你可以将它余的内容加载到后台，稍后再放到屏幕上。

Lighthouse 6.0用的性能指标

在衡量网站的性能时，Lighthouse 6.0用以下指标：

• 初次内容绘制时间：FCP测量用户浏览到你的页面后浏览器呈现第一段DOM内容所花费的时间。这包含图像，非白色元素和SVG，但不包含iframe中的内容。
• 速度索引：速度索引用于衡量页面加载过程中内容可视化显示的速度。
• 最大内容渲染 ：LCP是关于最大内容对象（比如，图像或文本块）加载需要多久的信息。这是非常重要的新指标之一。在这里，获得高分意味着用户将你的网站视为迅速加载。
• 可交互前的耗时 ：TTI测量从加载页面到可以迅速靠谱地响应用户输入所花费的时间。该页面看着加载起来非常快，只不过发现按下某些按钮还没任何用途。
• 总阻塞时间：TBT测量FCP和TTI之间可能发生阻塞的时间，从而阻止响应。
• 累积布局偏移：CLS查询页面的整个加载过程中发生的版式移位次数。每次元素在屏幕上从一帧跳到另一帧时，这都算作布局偏移。还记得那些在最后一刻加载的讨厌的广告吗？

灯塔报告还提供了一些机会来提升移动网站的网站速度，包含节省多少加载时间。其中包含降低渲染阻止样式表，渲染阻止脚本，适合调整图像大小与修复屏幕外图像。

总而言之，Lighthouse为你提供了有关页面性能的很多见解。借助这类见解来发挥我们的优势。

灯塔网站优化检查

Lighthouse不只能提供性能，而且还具备可访问性测试，基于最好实践和PWA剖析来改变网站的建议。Lighthouse的另一个非常酷的功能是基本的网站优化检查。通过此检查，你可以运行简单的网站优化审核以发现网站可能存在的基本网站优化问题。它还为你提供了修复建议。因为Lighthouse在浏览器中当地运行，因此你也可以在登台环境中运行检查。

现在，灯塔检查：

• 页面的移动友好性
• 假如结构化数据是有效的
• 它是不是ta name="viewport">带有带有width或的标签initial-scale
• 文件中有