当前位置: 首页 > 知识库问答 >
问题:

前端 - 如何优化使用谷歌Lighthouse分析出的Load Delay问题?

蔡宏大
2025-06-07

上下文:公司对上线的app进行打分,我们这个项目的分很低需要进行整改,我用lighthous对分最低的几个页面分析
9110a7c1-f13c-482b-9a55-40fc67cd15da.png
发现lcp时间特别长,说明有图片加载太久了,进一步分析发现
image.png
这个图片的Load Delay时间非常长

但是页面刷新完到整个页面渲染出来到可交互远没有八九秒这么久,我埋点出来的时间也很正常,想知道这个时间lighthouse插件是怎么计算出来的,有没有什么好的优化方案,求助求助

共有1个答案

经嘉
2025-06-07

这个数据一般是从你的页面开始加载开始算,到这个图片被加载为止,得到的时间。

影响它的因素有很多:

  1. 你 HTML 的大小
  2. 首屏渲染开始的时间
  3. JS 加载的时间和执行结果

建议:

  1. 一般来说,我们的核心内容很少会是一个图片,所以可以先考虑给它 loading="lazy"
  2. 不看 LCP,你这个页面毛病也不少,FCP 2.5,TBT 1.6S,CLS 0.26(26% 的内容都在抖动),建议先整体优化一下
 类似资料:
  • null 我在没有活动扩展的匿名浏览会话中运行测试。但我在这份报告中的表现仍然是0! 我正在测试的页面在这里。我还能做什么来修复这个?

  • 我有一张保存ID的表。现在,我偶尔需要读取这些ID,并检查表中的其他值(名称)是否仍然符合ID。我的代码是: 从我所读到的,我知道单独调用每个单元格值需要更多的时间。然而,我不知道如何应用getValue来修复这些情况。基本上相同的问题在不同的衣服我有以下代码: 那么我如何使用get值来检查我得到的每个ID呢。我想我得用一些 或者 但我不知道如何实施,有什么想法吗? 有没有其他更有效的方法

  • 这篇官方教程似乎过时了,因为根据这篇文章,ga.js被弃用了。 此外,在教程中,它有: 而在我有 在Chrome扩展中使用谷歌分析的最新正确方法是什么

  • 有一些非常基本的东西让我困惑。我使用谷歌广告转换跟踪与谷歌标签管理器,我不明白我的谷歌分析如何知道这些广告摆在首位。我的意思是,我在谷歌标签管理器中创建的转换标签根本不包括谷歌分析跟踪代码。 我错过了什么?谢啦

  • 最近几个月,谷歌发布了一个新的分析替代方案,称为“Firebase Analytics”。 由于该应用程序已经有谷歌分析,我发现一些障碍,我不知道如何最好地处理。 > 以前,“newTracker”函数需要一个属性ID。现在我没有看到它。这是否意味着它不需要一个? 以前,“enableAdvertisingIdCollection”也可以用来收集广告信息。在新的API里找不到。是自动收藏的吗? “

  • 我终于明白了我是如何连接到谷歌分析的,正确的——现在我可以在某个时候访问数据了。我正在使用google-api-php-Client。 我可以工作与指标只是罚款fx,通过做 它将返回会话数、页面浏览量和会话持续时间。但是现在让我们假设我也对使用一些维度感兴趣-也许我希望查询返回搜索引擎所有流量的站点使用情况数据,按页面浏览量降序排序。 数据- 我尝试在数组中提供维度和过滤器,但它返回以下错误 警告

  • 我没有使用谷歌仪表板的经验,在过去的几天里,我一直在努力解决一个问题。我不确定这是否可能以及如何实现,但是阅读大量的留档让我模糊不清。 背景:我们使用谷歌标签管理器(GTM)在我们的网站上放置一个cookiebanner和cookies。此时,我们使用GTM加载“Google Analytics-Universal Analytics”。我们使用遗传算法收集模拟数据,分析数据显示在我们的遗传算法仪

  • 我正在尝试学习如何在一个新网站上整合谷歌分析和定制事件跟踪。在研究它之后,我似乎无法理解Google Tag Manager和仅仅编写自定义事件跟踪代码之间的区别和关系。 Google Tag Manager是否只是一种更简单的跟踪信息的方法,而无需编写JS?