网页 LCP 优化与稳定布局实践 preconnect-preload-sizes-font-display-CLS

概览LCP 受网络、资源与渲染路径影响。通过 `preconnect` 与 `preload` 加速关键资源下载，配合 `fetchpriority` 与 `sizes` 提升图片加载效率，并以 `font-display` 与明确尺寸控制 CLS。连接预热与关键资源预加载<link rel="preconnect" href="https://static.example.com" crossorigin> <link rel="preload" as="image" href="/images/hero.avif" fetchpriority="high"> <link rel="preload" as="style" href="/styles.css"> 图片尺寸与优先级import Image from 'next/image' <Image src="/images/hero.avif" alt="Hero" width={1200} height={800} priority sizes="(max-width: 768px) 100vw, 1200px" /> 字体显示与排版@font-face { font-family: 'Inter'; src: url('/fonts/inter-variable.woff2') format('woff2'); font-display: swap; } body { font-family: 'Inter', system-ui, sans-serif; } 布局稳定与容器img { display: block; } .card { container-type: inline-size; } .card img { width: 100%; height: auto; } 治理要点仅对 LCP 候选设置高优先级与预加载，避免抢占关键 CSS 与主线程。为关键图片与组件提供明确尺寸或占位，降低 CLS。与 `speculationrules`、缓存与优先级策略协作，构建稳定首屏路径。验证与指标浏览器：现代浏览器；Next.js：15.0+LCP 降低 10–25%；CLS 接近 0；首屏稳定无抖动