id: next-heavy-ui-lazy-load-boundariestitle: Next.js heavy UI lazy-load boundariesstatus: activecandidateKinds: [“cwv_poor”]frameworks: [“next*”]metrics: [“LCP”, “INP”]priority: 82citations: [“https://nextjs.org/docs/app/guides/lazy-loading”, “https://web.dev/articles/optimize-inp”]maxBriefChars: 850调查简报当首次加载时发送过多 JavaScript 时首屏上方的重量级 UI 或很少使用的 UI 会损害 LCP 和 INP。寻找具体的路由局部 UI而非泛泛的包体积建议。待核查证据检查客户端组件、菜单、搜索浮层、个性化组件、地图、编辑器以及大型导入库。检查它们是否可以通过next/dynamic或动态导入在交互、视口或路由进入时加载。不建议推荐的时机不要对初始含义或可访问性所必需的首屏上方关键内容做懒加载。不要在 Server Component 中使用ssr: false。验证指出较差的指标、重量级 UI 边界、导入的库或组件以及要拆分的确切行。 vercel-optimize - next-heavy-ui-lazy-load-boundaries
id: next-heavy-ui-lazy-load-boundariestitle: Next.js heavy UI lazy-load boundariesstatus: activecandidateKinds: [“cwv_poor”]frameworks: [“next*”]metrics: [“LCP”, “INP”]priority: 82citations: [“https://nextjs.org/docs/app/guides/lazy-loading”, “https://web.dev/articles/optimize-inp”]maxBriefChars: 850调查简报当首次加载时发送过多 JavaScript 时首屏上方的重量级 UI 或很少使用的 UI 会损害 LCP 和 INP。寻找具体的路由局部 UI而非泛泛的包体积建议。待核查证据检查客户端组件、菜单、搜索浮层、个性化组件、地图、编辑器以及大型导入库。检查它们是否可以通过next/dynamic或动态导入在交互、视口或路由进入时加载。不建议推荐的时机不要对初始含义或可访问性所必需的首屏上方关键内容做懒加载。不要在 Server Component 中使用ssr: false。验证指出较差的指标、重量级 UI 边界、导入的库或组件以及要拆分的确切行。 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
