Google Lighthouse 成功案例:通过技术优化提高性能

已发表: 2019-05-23

借助 Google Lighthouse,您可以快速轻松地评估任何 URL 的技术性能。 详细的测试测量加载时间、可访问性和网络安全,同时揭示改进网站技术基础设施的潜力。 在这篇博文中,我想分享一些成功使用 Google Lighthouse 帮助提升在线绩效的公司的例子。 了解亚洲市场 Carousell 如何使用 Lighthouse 将自然流量提高 63%,TripAdvisor 和 Expedia 的 Lighthouse 性能得分如何与 Google 排名相关,等等。

如果您正在寻找 Google Lighthouse 是什么以及它与搜索引擎排名的相关性的概述,那么您可以从阅读我们的 Searchmetrics 白皮书“2019 年 Google Lighthouse 排名因素”开始。 本文基于超过 1500 万次 Google Lighthouse 审计的数据分析了 Google.com 上排名靠前的网站的当前优化状态。 在此处下载白皮书:

谷歌灯塔排名因素 2019

成功案例 1:亚洲的 eBay 如何将其灯塔表现从 17 分提高到 84 分

我们的第一个 Lighthouse 案例研究来自亚洲对 eBay 的回答,即市场 carousell.com。 新加坡平台主要依赖移动流量,为了扩展到印度尼西亚和菲律宾等其他亚洲国家,他们正在寻找一种方法来增加其 Progressive Web App 的移动加载时间:“拥有一个网页需要更多时间Carousell 的网络技术主管 Stacey Tay 在 Medium 上的一篇博文中解释说,如果我们想获得和留住新用户,超过 3G 的加载时间(就像我们的那样)超过 15 秒是不可接受的,他描述了 Carousell 如何实现技术性能优化他们的网站。

首先,Stacey 解释说,他们最初的 Lighthouse 审核结果敲响了警钟——性能得分仅为 17 分,而渐进式 Web 应用程序和可访问性类别的结果非常平庸。 只有 SEO 和最佳实践这两个类别的得分(侧重于 HTTPS 或安全 JavaScript 库等网站的安全方面)令人满意。

基于这些结果,优化主要针对改进 Lighthouse 类别的性能和渐进式 Web 应用程序的结果。 carousell.com 的 Lighthouse 分数的前后对比显示了在这些领域取得了多大的进步:

旋转木马灯塔前后

技术优化措施于 2018 年进行——10 月底,Stacey Tay 在 Medium 上记录了成功。 如果我们查看 carousell.com 在其母国新加坡的 SEO Visibility,那么我们可以看到性能有明显的提升:

在执行优化所需的任务之前,明确了任务目标:


Stacey-Lead “我们希望从一开始就为新用户提供令人愉悦的体验,因为性能就是用户体验。 为此,我们设计了一种新的、性能优先的网络体验。” Carousell 的网络技术主管 Stacey Tay


这一使命为网站的技术优化奠定了基础。 重要的是,这并没有被视为一个副项目,它被高度优先考虑并给出了专门的性能预算。 有了这个使命,Stacey 写道,更容易激励团队,让管理层相信项目的重要性,并通过展示项目的成功来证明投资的合理性。

在同意预算后,根据 Google Lighthouse 审计的分数确定了目标:

灯塔排名因素目标值/分数
关键路径资源120 KB
第一次内容丰富​​的油漆2s
互动时间5s
灯塔性能得分> 85

如前所述,优化前的性能得分仅为 17 分。 在优化了carousell.com的首页后,他们得到了84分。 解决的站点基础架构方面包括使用工作箱预缓存和服务工作者设置更有效的缓存系统、压缩图像和应用 CSS 内联。 这些措施共同促成了一个快速、用户友好的渐进式 Web 应用程序的创建——这就是现在页面加载的方式:

Carousel - 页面加载动画前后

Carousell 的性能优化成功的有力证据可以在数字中找到。 除了将加载时间减少 65% 外,最值得注意的改进是流量的增加。 自优化以来,Carousell 的自然流量增长了 63%:

Carousell - Lighthouse 导致页面加载时间和自然流量
carousell.com 的 Google Lighthouse 性能优化结果。 资料来源:medium.com

阅读 2019 年谷歌灯塔排名因素

成功案例 2:史泰博和沃尔玛如何利用更快的加载时间来提高转化率

在谈论加载时间的优化时,有一些谷歌统计数据经常被用作参考点。 例如,随着加载时间的增加,移动用户返回搜索结果的可能性也会增加。 如果加载时间从 1 秒上升到 3 秒,则跳出率概率增加 32%; 如果加载时间从 1 秒变为 5 秒,则跳出概率会上升 90%。

页面速度分析工具 GTmetrix 研究了减少加载时间的具体好处,查看了广泛的零售网站。 这些例子包括像 Staples 和沃尔玛这样的重量级零售商,并展示了更快的加载时间和更高的转化率之间的明显相关性。

Lighthouse - Walmart Staples 转化率提高
史泰博和沃尔玛通过加快加载时间来提高转化率。 资料来源:gtmetrix.com

阅读 2019 年谷歌灯塔排名因素

成功案例 3:Douglas 如何将加载时间减半

现在我们求助于德国香水巨头 Douglas,他使用 Google Lighthouse 极大地改善了他们的网站性能。 他们的成功故事可以追溯到 2017 年黑色星期五,当时流量激增意味着某些用户无法访问该页面。 当时的 Google Lighthouse 性能分数也显示出明显的改进空间。 Michael Singer 是慕尼黑的一名自由职业技术 SEO 顾问,他为 douglas.de 从事该项目,并从 2018 年 5 月开始协调 IT 和 SEO 之间的操作,他解释说:“在优化之前,3G 上的交互时间超过 20 秒——现在我们已经把它缩短到 8 秒左右。”

为了在 Google Lighthouse 审计中取得如此令人印象深刻的结果,对香水零售商网站的后台进行了重大更改。 “我们检查了 200 多张技术票,”Michael 解释说,并回忆起所做的许多更改: 移动子域已停用; 移动用户现在登陆 Douglas 的响应式主 www 域。 此外,douglas.de 被转换为使用 JS React,它减少了节点和请求的数量,压缩了 HTML 并减小了图像大小。 数据库延迟也减少了,并且实施了一些缓存优化。


迈克尔-辛格 “我们工作的重点是用户,他们应该能够尽快使用网站。 我们的页面速度优化的目标是减少 4 秒的第一次交互时间。 这与切换到 JS React 和转向单一响应式网站版本一起,导致我们的 SEO 可见性显着增长、流量增加和营业额增加。” Michael Singer,自由技术 SEO 顾问


这些优化使用 Google Lighthouse 性能得分,显着缩短了页面加载时间。 “为了验证这些指标,我们使用 Instana 进行了实时速度测试,向我们展示了长期影响。 2018 年 4 月,桌面值仍然超过 8 秒。 2018 年 10 月,我们经常达到 4 秒的成绩。” 最后但同样重要的是,网站的技术可用性也得到了改进,因此现在可以更好地处理像黑色星期五那样的流量高峰。

这种性能优化为 douglas.de 的 SEO 可见性带来了立竿见影的好转。 在 2018 年 5 月至 2019 年 5 月期间,该域的有机可见度增加了 25%。

当然,Searchmetrics SEO Visibility 只是网站在 Google 上的表现的一个初始指标。 Michael Singer 进一步深入了解了受 douglas.de 优化影响的其他 KPI。 “访问量大幅增加,营业额也出现强劲增长,”迈克尔说。 转化率也增加了类似的比例,尤其是因为 SEO 是为 douglas.de 带来最多营业额的渠道。

道格拉斯优化结果一目了然:

  • 页面加载时间 -50%
  • 搜索引擎优化可见度 +25%
  • 访问量、转化率和营业额大幅增加。

阅读 2019 年谷歌灯塔排名因素

成功案例 4:URL 性能如何影响 TripAdvisor 和 Expedia 的 Google 排名

为了调查 Lighthouse Performance 分数与真实 Google 排名之间的关系,我决定在旅游业内进行分析。 我围绕酒店、航班和大篷车等主题整理了 3500 个与旅行相关的关键词,并分析了 Google.com 上的排名页面,并查看了 TripAdvisor 和 Expedia 对这些关键词的排名位置。 结果:TripAdvisor 和 Expedia 在 Google Lighthouse 性能也很高时排名很高:

为什么这里有如此清晰的联系? 在线旅游行业竞争激烈,众多大公司在竞争。 除了 TripAdvisor 和 Expedia,您还有 Booking.com、Hotels.com、FlightRadar 等,它们都具有很高的信任度,并且都是知名的流行品牌。 同时,很难区分不同的品牌。 在许多情况下,内容(例如酒店描述)会非常相似——这使得网站很难在主要的 USP 中脱颖而出。 如果几个排名信号基本相同——相似大小的品牌、相似的界面、相似的功能、相似的内容——那么网站性能很可能是确定排名的决定性因素。


尼尔斯·卡托快速加载时间对于良好的用户体验非常重要。 与网站交互时的每一次中断都会产生一点挫败感,并且用户的挫败感会随着中断的发生而增加。 如果加载时间仅增加几秒钟,那么许多网站的跳出率都会增加——这最终会导致转化率下降。” Nils Kattau,转换专家


要了解 Google Lighthouse 结果与您的市场的相关性如何,您可以使用自定义的 Searchmetrics Ranking Factors。 我们针对您的相关市场分析 Google Lighthouse 数据,将其与我们自己的 Searchmetrics 排名数据相结合,并为您的网站技术优化提供具体、可行的建议。 立即索取您的个人报告:

请求定制的 Searchmetrics Lighthouse 审计