概览Early Hints 能在最终响应前提示浏览器预取关键资源。结合 `Link` 头与 `preload` 可显著优化首屏。对于 Next.js，Node 侧可发送 103，App Router 侧使用 `headers` 与 `preload` 辅助。Node 侧发送 103pages/api/hints.tsexport default function handler(req: any, res: any) { res.writeEarlyHints({ link: '</styles.css>; rel=preload; as=style,</hero.avif>; rel=preload; as=image' }) res.setHeader('Content-Type', 'text/html; charset=utf-8') res.end('<!doctype html><html><head><link rel="preload" as="style" href="/styles.css"></head><body>ok</body></html>') } App Router 资源提示export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <head> <link rel="preload" as="image" href="/images/hero.avif" fetchpriority="high" /> <link rel="preload" as="style" href="/styles.css" /> <link rel="preconnect" href="https://static.example.com" crossOrigin="" /> </head> <body>{children}</body> </html> ) } 治理要点103 需要后端与反向代理支持；在不支持时使用 `preload` 与 `preconnect` 达到相近效果。仅对 LCP 候选与关键样式发送提示，避免资源争抢。与图片优先级与投递策略协同，形成稳定首屏路径。验证与指标浏览器：Chrome 120+、Edge 120+；部分平台需后端支持 103Next.js：15.0+；Node.js：20.x性能：LCP 降低 10–20%；导航稳定性提升
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复