用Google Lighthouse检查移动网站速度和SEO

• 发布时间: 2020-06-15
• 阅读次数: 1026

您经常听到的两个词是移动速度和网站速度。这并不是没有道理的，因为这两个因素是并存的。移动友好性和网站速度是我们必须处理的最紧迫的问题。测量页面速度一直以来都是一门黑手艺。我们今天使用的网站速度工具已经足够了，但是通过使用新的Web Vitals指标，Google尝试从网页的体验角度出发，从另一个更现实的角度来解决这个问题。在这里，我将仔细研究如何使用Google Lighthouse检查您的移动网站速度和SEO。

什么是Google Lighthouse？

Lighthouse是Google构建的页面体验工具，最初旨在审核Progressive Web Apps（PWA）。该工具执行五项审核，以检查可访问性，性能，SEO，渐进式Web Apps和最佳实践的扩展列表。在新的Core Web Vitals的支持下，这些审核共同为您提供了有关移动网站以及桌面网站或Web应用程序的质量和性能的出色概述。

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

在测试过程中，Google Lighthouse模拟通过功率稍有下降的设备通过不稳定的3G连接访问您的移动网站。为了尽可能真实地模拟现实情况，数据包会丢失。这些见解与其他数据结合在一起。运行测试后，您将获得一份包含分数的报告以及可解决问题的可行建议。

PageSpeed Insights与Google Lighthouse

PageSpeed Insights可能是最常用的网站速度分析工具。它为您提供了不错的分数，并列出了可能的改进，并且使您对网站的感知加载速度有了一个了解。另外，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报告中。现在，您只需要了解三个基本指标就可以了解您的网站或特定页面的效果。这些核心网络生命力是：

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

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

此外，请记住，Lighthouse不仅会衡量性能，而且还会检查SEO，各种最佳做法和可访问性。它是一个完整的工具，可以帮助您从整体上改善您的网站。

在Lighthouse结果中寻找什么

加快移动网站速度的整个思路是两方面的：您的网站必须要快，而且它必须感觉  快。因此，您需要尽快将内容显示在屏幕上。不要让人们等待。此外，用户必须能够尽快与您的内容进行交互。由于Google宣布页面速度和页面体验是SEO的排名因素，因此您需要解决这些问题。

您应该优先考虑什么？首先加载您的内容。令人敬畏的图形和杀手级动画可以等待。您的信息以及人们正在寻找的内容很可能出现在内容中。您可以将其余的内容加载到后台，稍后再放到屏幕上。

Lighthouse 6.0使用的性能指标

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

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

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

总而言之，Lighthouse为您提供了有关页面性能的大量见解。利用这些见解来发挥自己的优势。

灯塔SEO检查

Lighthouse不仅能提供性能，而且还具有可访问性测试，基于最佳实践和PWA分析来改善网站的建议。Lighthouse的另一个很酷的功能是基本的SEO检查。通过此检查，您可以运行简单的SEO审核以发现网站可能存在的基本SEO问题。它还为您提供了修复建议。由于Lighthouse在浏览器中本地运行，因此您也可以在登台环境中运行检查。

目前，灯塔检查：

• 页面的移动友好性
• 如果结构化数据是有效的
• 它是否 带有带有width或的标签initial-scale
• 文件中有元素吗？</li>
• 有中继描述吗？
• 该页面是否具有成功的HTTP状态代码？
• 链接是否具有描述性锚文本？
• 文档是否使用清晰的字体大小？
• 页面没有被阻止建立索引吗？
• robots.txt是否有效？
• 图像是否具有alt属性？
• 该文档是否具有有效的hreflang实现？
• 文档是否具有有效的rel = canonical设置？
• 是否有不需要的插件，例如Java或Flash？

虽然是基本的，但是Lighthouse检查将提醒您任何要解决的SEO问题。

如何安装Google Lighthouse

借助Chrome的“开发人员工具审核”面板（Mac：Shift + Cmd + I； Win：Ctrl + Shift + J或F12），可以轻松入门Google Lighthouse 。从那里，您可以运行测试并获得完整的报告。此外，还有一个用于Lighthouse的单独的Chrome插件，它在您的工具栏中添加了一个按钮，尽管使用该按钮时仍保持不变，但有一些限制：您无法验证本地服务器上的网站，并且经过身份验证的页面也无法正常工作。

您也可以将Lighthouse作为Node程序包运行。这样，您可以将测试合并到构建过程中。使用Node软件包时，您还将看到只有在Node环境中可以运行的一些审核，而在DevTools的Audits面板中却没有。

要从命令行全局安装Lighthouse，请使用：

npm install -g lighthouse

如果要对https://example.com运行测试，请使用：

lighthouse https://example.com

审核的全部结果将在终端中可用，但也可以在单独的HTML文件中使用。

实施网站速度修复

您可以采取许多措施来提高网站速度。尽管解释所有修补程序超出了本文的范围，但可以在关键渲染路径中找到许多优化。关键的渲染路径由对象（例如CSS和JavaScript）形成，这些对象必须先加载，然后内容才能显示在屏幕上。如果此内容被阻止，则您的页面将呈现缓慢或完全不呈现。请注意这一点，并使路径无障碍。

尝试一下！

Google Lighthouse不是唯一一个可以将其全部规则化的站点加速工具，但是它是您工具箱中非常有价值的补充。SEO检查是基本的，但是仍然重要。Lighthouse更精确和具体，并根据实际使用情况为您提供即时反馈。你一定要伴随着其他网页速度测试工具使用它，就像PageSpeed Insights的WebPageTest和GTmetrix。

• 网站速度

电子商务网站的5个搜索引擎优化技巧
定期搜索引擎优化诊断的重要性

相关文章

这是关于如何在您的网站上进行SEO诊断的系列文章的第三部分也是最后一部分。定期检查您···

了解更多

今天我们就来说说网站速度优化的最佳建议，以提高速度性能。因为搜索引擎对速度的需求···

了解更多

您经常听到的两个词是移动速度和网站速度。这并不是没有道理的，因为这两个因素是并存···

了解更多