时间戳

首页 > 解决方案 > 性能工具（灯塔）在我的 Gatsby 网站上显示非常缓慢的“交互时间”。我该如何改进它？

performance - 性能工具（灯塔）在我的 Gatsby 网站上显示非常缓慢的“交互时间”。我该如何改进它？

问题描述

我正在寻求帮助。我的网站获得互动分数的时间非常短（超过 10 秒）。

它告诉我需要“最小化主线程工作”和“减少 JavaScript 执行时间”。

你能分享一些关于我能做什么的建议/技巧吗？您如何在项目中改进这些指标？

从谷歌上搜索，似乎人们做的主要事情是代码拆分，但 Gatsby 已经自动做到了，对吧？

还有什么可以做的？

标签： performancegatsby

解决方案

你有相当不错的灯塔分数。尝试以匿名模式测试您的页面以禁用扩展。

但是，您可以改进它。

  • 加载bundle-analysys并检查你的 bundle 里面有什么。尝试查找重复的脚本或您不使用的脚本。
  • 检查大脚本的导入策略。如果您正在做某事import * from 'lodash'，请将其更改为import {groupBy} from 'lodash'
  • 寻找使用延迟加载的可能性。这不是自动完成的。最好的候选者是您网站的其他页面。
  • 然后对您拥有的所有脚本进行修订。可能你可以删除一些对你来说不是很重要的东西。有些人仅将 jQuery 用于查询页面。

进行一般性能改进：

  • 减小图片大小（在您的登录页面上，您有一张 450KB 的大图片）。
  • 减少字体数量（你有 4 个 547kb）
  • 考虑删除分析或将其更改为更简单的东西

要跟踪性能变化，请使用perfrunner或lighthouse-ci

推荐阅读