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

埃德温·图嫩

埃德温(Edwin)是战略内容专家。在加入Yoast之前,他花了几年时间在荷兰领先的网页设计杂志上磨练自己的技能。

使用Google Lighthouse检查移动网站的速度和搜索引擎优化(seo)

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

目录什么是Google Lighthouse?

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

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

用Google灯塔检查移动网站的速度和SEO,并使用Google Lighthouse检查移动网站的速度和SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile-site- speed-and-seo-with-google-lighthouse.jpg“ class =” wp-image-2570214您可以直接通过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,各种最佳做法和可访问性。它是一个完整的工具,可以帮助您从整体上改善您的网站。

用Google Lighthouse检查移动网站的速度和SEO,并通过Google Lighthouse检查移动网站的速度和SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile- site-speed-and-seo-with-google-lighthouse-1.jpg“ class =” wp-image-2570371PageSpeed Insights给出的分数略有不同。您还会注意到Field Data和Lab Data之间的差异在Lighthouse结果中查找的内容

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

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

Lighthouse 6.0使用的性能指标

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

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

您可以通过转到Lighthouse Scoring计算器查看分数的计算方式:

用Google Lighthouse检查移动网站的速度和SEO,并使用Google Lighthouse检查移动网站的SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile- site-speed-and-seo-with-google-lighthouse-2.jpg“ class =” wp-image-2570443Lighthouse计分计算器显示差异指标的权重

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

用Google Lighthouse检查移动网站的速度和SEO,并使用Google Lighthouse检查移动网站的SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile- site-speed-and-seo-with-google-lighthouse-3.jpg“ class =” wp-image-2570586Lighthouse确定了最大的有意义的绘画元素,因此您可以轻松地对其进行优化

总而言之,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文件中使用。

用Google Lighthouse检查移动站点速度和SEO,并用Google Lighthouse检查移动站点的SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile- site-speed-and-seo-with-google-lighthouse-4.jpg“ class =” wp-image-2570687您可以在Lighthouse中看到fitTesting Yoast.com来微调测试

是时候让Lighthouse步入正轨了。让我们看看当我在yoast.com上照亮灯塔的焦点时会发生什么-通过移动浏览器可以看到。今天,我们只关注“效果”标签。此标签显示您的网站或应用当前的运行情况,并向您显示改进方法。

在下面的屏幕截图中,您可以看到yoast.com的结果。大量屏幕快照显示了移动站点的初始加载,这些屏幕快照显示了何时首次在屏幕上显示内容。指标显示内容显示需要多长时间。越快越好。

用Google Lighthouse检查移动网站的速度和SEO,并使用Google Lighthouse检查移动网站的速度和SEO” src =“ https://seotradenews.com/wp-content/uploads/checking-mobile- site-speed-and-seo-with-google-lighthouse-5.jpg“ class =” wp-image-2570733一屏显示最重要的指标

在指标部分,您会找到最重要的信息,并带有绿色,橙色或红色的点,以显示效果如何。当您要优化移动站点的性能时,您需要注意有关数字,其中包括第一个令人满意的油漆,最大的令人满意的油漆和进行交互的时间,如前所述。另外,请尝试改善速度指标,并确保屏幕上没有任何跳跃。

从年级来看,您可以看到yoast.com的整体得分非常高,为78分。第一次满意的油漆可能会好一些,但是速度指数和总的堵转时间都不错。幸运的是,没有发现布局发生变化的元素。消除渲染阻止资源(如一些JavaScript和CSS)仍会有所收获。换句话说,该站点看起来相当快,但在外观部分仍可以使用一些加速方法。

实施网站速度修复

您可以做很多事情 提高您的网站速度。尽管解释所有修补程序超出了本文的范围,但可以在关键渲染路径中找到许多优化。关键的渲染路径由对象(例如CSS和JavaScript)形成,这些对象必须先加载,然后内容才能显示在屏幕上。如果此内容被阻止,则您的页面将呈现缓慢或完全不呈现。请注意这一点,并使路径无障碍。 Google的Ilya Grigorik写道 关于如何理解和改善关键渲染路径的出色指南。而且请 优化图像!最后但并非最不重要的一点,不要忘记继续阅读 Google的新网络生命

尝试一下!

Google Lighthouse不是将所有规则都应用到网站上的一种工具,但它是您工具包中非常有价值的补充。 SEO检查是基本的,但是仍然欢迎。 Lighthouse更细粒度,并根据实际使用情况为您提供即时反馈。您绝对应该将其与其他页面速度测试工具(例如PageSpeed Insights, WebPageTestGTmetrix

您在使用Google Lighthouse吗?你是怎么找到它的?请在评论中分享您的经验和技巧。我希望收到您的来信!

阅读更多: 移动SEO:最终指南»

资源

原创文章,作者:WPJIAN,如若转载,请注明出处:https://wpjian.com/tips/2020061233348.html