埃德温（Edwin）是战略内容专家。在加入Yoast之前，他花了几年时间在荷兰领先的网页设计杂志上磨练自己的技能。
您经常听到的两个词是移动速度和网站速度。这并不是没有道理的，因为这两个因素是并存的。移动友好性和网站速度是我们必须处理的最紧迫的问题。测量页面速度一直以来都是一门黑手艺。的 网站速度工具 我们今天使用的数据已经足够了，但是通过新的Web Vitals指标，Google试图从一个更现实的角度出发， 页面体验 考虑在内。在这里，我将仔细研究如何使用Google Lighthouse检查您的移动网站速度和SEO。
目录什么是Google Lighthouse？
灯塔 是Google构建的页面体验工具，最初旨在审核Progressive Web Apps（PWA）。该工具执行五项审核，以检查可访问性，性能，SEO，渐进式Web Apps和最佳实践的扩展列表。在新的Core Web Vitals的支持下，这些审核共同为您提供了有关移动网站以及桌面网站或Web应用程序的质量和性能的出色概述。
网站速度完全取决于感知和用户体验。如果您的网站仍然感觉很慢，那么数字速度就没有任何意义。 3G或更小巧的移动连接在世界范围内吸引着大量用户。即使使用闪电般的5G连接，站点也可能会感到缓慢而缓慢。我们都知道，缓慢的网站可能会对您的转化带来毁灭性影响。缩短加载网站所需的时间（毫秒）可能会有所不同。更不用说当加载缓慢的广告按下您只想单击的按钮时发生的挫败感。
您可以直接通过Google Chrome中的开发人员工具运行Lighthouse审核-或安装Chrome扩展程序
在测试过程中，Google Lighthouse模拟通过功率稍有下降的设备通过不稳定的3G连接访问您的移动网站。为了尽可能真实地模拟现实情况，数据包会丢失。这些见解与其他数据结合在一起。进行测试后，您将获得一份包含分数的报告以及可解决问题的可行建议。
PageSpeed Insights与Google Lighthouse
PageSpeed见解 可能是最常用的网站速度分析工具。它为您提供了不错的分数，并列出了可能的改进，并且使您对网站的感知加载速度有了一个了解。另外，PageSpeed Insights会提供建议并确定改善页面性能的机会。其中有些确实很难实现，因此对于大多数网站而言，获得100/100的梦想是不二之选。
PageSpeed Insights和Lighthouse曾经是完成这项工作的两种不同工具。他们俩都提供了宝贵的见解，但很难合并。随着Web Vitals的出现和页面体验的更新，Google全面改善了指标。它们不仅变得更易于理解，而且还成为共享指标。当然，每种工具都是针对特定的子任务制作的，并提供特定的指标。这些指标来自不同的环境。
现场数据与实验室数据
Web Vitals引入了确定性能的新方法。可以说，其中一些指标可以在实验室环境中进行模拟计算，也就是说，其他指标仅在经过现场测试和收集后才有意义。此外，某些指标在这两种设置中均能正常工作。 Google页面体验工具使用各种指标为您提供改善网站所需的数据。
如果仔细观察，您会发现某些指标仅在开发人员工具和Lighthouse等实验室工具中有效。字段指标显示在诸如Search Console和PageSpeed Insights中的“ Web Vitals”报告之类的工具中。诸如LCP，FID和CLS之类的核心Web生命将随处可用。
核心网络生命
全新的Core Web Vitals将出现在所有衡量网站速度，性能和体验的Google工具中，甚至出现在Search Console中的新Web Vitals报告中。现在，您只需要了解三个基本指标就可以了解您的网站或特定页面的效果。这些核心网络生命力是：
这些新的Web Vitals采用更实用的方法，并将用户体验放在首位。这些工具会通过普通设备上的限制连接来访问您的站点，因此它可以模拟现实世界中真正的访问者可能会遇到的情况。这些由Web Vitals支持的工具不仅可以像过去使用的经典速度工具那样加载您的网站，还可以检查它如何以及何时响应输入-以及是否在初始加载之后发生了事情。它会找到您的内容准备就绪的确切时间，因此您可以在感觉太慢时尝试对其进行优化。另外，您会发现妨碍良好页面体验的烦恼。
此外，请记住，Lighthouse不仅会衡量性能，而且还会检查SEO，各种最佳做法和可访问性。它是一个完整的工具，可以帮助您从整体上改善您的网站。
PageSpeed Insights给出的分数略有不同。您还会注意到Field Data和Lab Data之间的差异在Lighthouse结果中查找的内容
加快移动网站速度的整个思路是两方面的：您的网站必须快速，而且必须感觉很快。因此，您需要尽快将内容显示在屏幕上。不要让人们等待。此外，用户必须能够尽快与您的内容进行交互。由于Google宣布页面速度和页面体验是SEO的排名因素，因此您需要解决这些问题。
您应该优先考虑什么？首先加载您的内容。令人敬畏的图形和杀手级动画可以等待。您的信息以及人们正在寻找的内容很可能出现在内容中。您可以将其余的内容加载到后台，稍后再放到屏幕上。
Lighthouse 6.0使用的性能指标
在衡量网站的性能时，Lighthouse 6.0使用以下指标：
- 首次满意涂料：FCP衡量用户浏览到页面后浏览器呈现第一段DOM内容所花费的时间。这包括非白色图像
- 速度指数：速度索引衡量页面加载过程中内容可视化显示的速度。
- 最大的满意涂料：LCP是关于最大内容对象（例如，图像或文本块）加载需要多长时间的信息。这是最重要的新指标之一。在这里，获得高分意味着用户将您的网站视为快速加载。
- 互动时间：TTI测量从加载页面到能够快速可靠地响应用户输入所花费的时间。该页面看起来加载起来很快，只是发现按下某些按钮尚无任何作用。
- 总封锁时间：TBT测量FCP和TTI之间可能发生阻塞的时间，从而防止响应。
- 累积版式移位：CLS会查看页面完整加载过程中发生的版式转移数量。每次元素在屏幕上从一帧跳到另一帧时，这都算作布局偏移。还记得那些在最后一刻加载的讨厌的广告吗？
您可以通过转到Lighthouse Scoring计算器查看分数的计算方式：
Lighthouse计分计算器显示差异指标的权重
灯塔报告还提供了一些机会来提高移动网站的网站速度，包括节省多少加载时间。其中包括减少渲染阻止样式表，渲染阻止脚本，适当调整图像大小以及修复屏幕外图像。
Lighthouse确定了最大的有意义的绘画元素，因此您可以轻松地对其进行优化
总而言之，Lighthouse为您提供了有关页面性能的大量见解。利用这些见解来发挥自己的优势。
灯塔SEO检查
Lighthouse不仅能提供性能，还具有可访问性测试，基于最佳实践和PWA分析来改善网站的建议。 Lighthouse的另一个很酷的功能是基本的SEO检查。通过此检查，您可以运行简单的SEO审核以发现网站可能存在的基本SEO问题。它还为您提供了修复建议。由于Lighthouse在浏览器中本地运行，因此您也可以在登台环境中运行检查。
目前，灯塔检查：
虽然是基本的，但是Lighthouse检查将提醒您任何要解决的SEO问题。
如何安装Google Lighthouse
Chrome浏览器的开发人员工具审核面板（Mac：Shift + Cmd + I； Win：Ctrl + Shift + J或F12）内置了Google Lighthouse，使用它非常容易。从那里，您可以运行测试并获得完整的报告。此外，还有一个单独的 Chrome的Chrome附加组件 会在您的工具栏上添加一个按钮，尽管使用时会保持不变，但有一些限制：您无法验证本地服务器上的网站，并且经过身份验证的页面也将无法使用。
您也可以将Lighthouse作为 节点 包。这样，您可以将测试合并到构建过程中。使用Node软件包时，您还将看到只有在Node环境中可以运行的一些审核，而在DevTools的Audits面板中却没有。
要从命令行全局安装Lighthouse，请使用：
npm install -g灯塔
如果要对https://example.com运行测试，请使用：
灯塔https://example.com
审核的全部结果将在终端中可用，但也可以在单独的HTML文件中使用。
您可以在Lighthouse中看到fitTesting Yoast.com来微调测试
是时候让Lighthouse步入正轨了。让我们看看当我在yoast.com上照亮灯塔的焦点时会发生什么-通过移动浏览器可以看到。今天，我们只关注“效果”标签。此标签显示您的网站或应用当前的运行情况，并向您显示改进方法。
在下面的屏幕截图中，您可以看到yoast.com的结果。大量屏幕快照显示了移动站点的初始加载，这些屏幕快照显示了何时首次在屏幕上显示内容。指标显示内容显示需要多长时间。越快越好。
一屏显示最重要的指标
在指标部分，您会找到最重要的信息，并带有绿色，橙色或红色的点，以显示效果如何。当您要优化移动站点的性能时，您需要注意有关数字，其中包括第一个令人满意的油漆，最大的令人满意的油漆和进行交互的时间，如前所述。另外，请尝试改善速度指标，并确保屏幕上没有任何跳跃。
从年级来看，您可以看到yoast.com的整体得分非常高，为78分。第一次满意的油漆可能会好一些，但是速度指数和总的堵转时间都不错。幸运的是，没有发现布局发生变化的元素。消除渲染阻止资源（如一些JavaScript和CSS）仍会有所收获。换句话说，该站点看起来相当快，但在外观部分仍可以使用一些加速方法。
实施网站速度修复
您可以做很多事情 提高您的网站速度。尽管解释所有修补程序超出了本文的范围，但可以在关键渲染路径中找到许多优化。关键的渲染路径由对象（例如CSS和JavaScript）形成，这些对象必须先加载，然后内容才能显示在屏幕上。如果此内容被阻止，则您的页面将呈现缓慢或完全不呈现。请注意这一点，并使路径无障碍。 Google的Ilya Grigorik写道 关于如何理解和改善关键渲染路径的出色指南。而且请 优化图像！最后但并非最不重要的一点，不要忘记继续阅读 Google的新网络生命。
尝试一下！
Google Lighthouse不是将所有规则都应用到网站上的一种工具，但它是您工具包中非常有价值的补充。 SEO检查是基本的，但是仍然欢迎。 Lighthouse更细粒度，并根据实际使用情况为您提供即时反馈。您绝对应该将其与其他页面速度测试工具（例如PageSpeed Insights， WebPageTest 和 GTmetrix。
您在使用Google Lighthouse吗？你是怎么找到它的？请在评论中分享您的经验和技巧。我希望收到您的来信！
阅读更多： 移动SEO：最终指南»