Index Page LCP

[YumoImer]

LCP 现状

现状问题

• 首屏资源加载阶段存在不必要的资源加载请求，如 footer 中的 logo 图片资源
• lottie-json 资源目前在 useEffect 中使用，可考虑将这部分资源从 react 生命周期中脱离
• 耗时上站点的 main js 产物占据了大部分加载时间，抛开网络因素，需要做构建分析，小即快

[petercat-assistant]

您提到的关于 Index Page LCP 的问题涉及到几个方面的优化：

1. 不必要的资源加载请求：在首屏资源加载阶段，尽量减少不必要的资源请求，例如 footer 中的 logo 图片资源。可以考虑在用户滚动到页面底部时再加载这些资源，或者使用懒加载技术。

2. lottie-json 资源的使用：目前 lottie-json 资源是在 useEffect 中使用的，您可以考虑将这部分资源从 React 生命周期中脱离，以减少对页面加载的影响。可以使用动态加载或者在组件外部进行初始化。

3. main js 产物的加载时间：如果 main js 文件占据了大部分加载时间，可以通过构建分析来优化。尝试减少打包后的文件大小，例如通过代码拆分、移除未使用的代码、使用更高效的压缩算法等。

这些优化措施可以帮助改善页面的加载性能，从而提高用户体验。如果您需要更具体的代码示例或进一步的指导，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.