主页 / coding / 问题 / 79412552
Accepted
Will Calderwood
Asked: 2025-02-05 01:35:56 +0800 CST

使用 Next.js 在移动设备上的最大内容绘制非常慢

  • 772

我正在开发一个网站https://www.paveinsight.com。该网站使用 Next.js 编写并托管在 Vercel 上，主页生成为静态页面。

运行 PageSpeed Insights 时，我的 LCP 很慢，在移动设备上尤其慢，我不知道原因。图片经过优化，根据屏幕调整大小并托管在 Amazon CloudFront 上。在我的实际设备上测试，页面加载速度很快，而且很流畅。在我的 Pixel 7 上加载的 webp 图片为 81KB，但 PageSpeed Insights 表示 LCP 在移动设备上为 9.4 秒。

模拟的 4G 连接速度为 1,638 kb/s，因此我预计下载时间将远少于 1 秒。下面是所用时间的明细。什么可能导致 TTFB 过高，或极端的加载延迟和渲染延迟？

TTFB 6% 600ms
Load delay 53% 4,920ms
Load time 1% 80ms
Render delay 40% 3,750ms

在此处输入图片描述

performance

1 个回答

  1. Best Answer

    查看 LCP 加载的更好方法是使用 WebPageTest 之类的工具，它将显示完整的瀑布图：

    网站加载瀑布图

    它的 LCP 约为 6.5 秒，比 Lighthouse 短一点，但 Lighthouse 确实在相当低规格的机器上进行了估计节流，这两者都可能导致差异。

    这表明 LCP 图像（第 55 行以绿色突出显示）直到所有 JavaScript 都已下载并执行完 JavaScript（尤其是第 12 行和第 14 行上的包）后才会被提取。这在这台低配置的机器上需要花费很多秒的时间。

    您应该查看服务器端渲染，以便图像资源在初始 HTML 中交付，并且不依赖于首先运行的所有客户端 JavaScript。

    理想情况下，减少 JavaScript 使得它在低端机器上运行不需要花费几秒钟的时间！

    • 1

相关问题