首页/AI 技能库/软件开发/Core Web Vitals Lcp [ PROMPT_NODE_24590 ] Core Web Vitals Lcp [ SKILL_DOCUMENTATION ] # LCP 优化参考 ## 什么是 LCP？ 最大内容渲染 (LCP) 衡量视口中最大内容元素变为可见的时间。通常是： - `` 元素 - `` 内部的 `` 元素 - 带有海报图片的 `` 元素 - 通过 `url()` 使用背景图片的元素 - 包含文本节点的块级元素 ## LCP 时间轴 [ 服务器响应 ][ 资源加载 ][ 渲染 ] TTFB 下载 绘制 └─────────────────────────────────────┘ LCP 时间 ## 详细优化 ### 1. 服务器响应时间 (TTFB) 目标: < 800ms **原因：** - 服务器/数据库查询缓慢 - 无 CDN/边缘缓存 - 后端代码效率低下 - 冷启动 (Serverless) **解决方案：** javascript // 对动态内容使用边缘函数 // Vercel 示例 export const config = { runtime: 'edge' }; // 使用 stale-while-revalidate 缓存 // Cache-Control 响应头 res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300'); ### 2. 资源加载时间 **针对图片：** html **针对文本 (Web 字体)：** css @font-face { font-family: 'Heading'; src: url('/fonts/heading.woff2') format('woff2'); font-display: swap; /* 立即显示回退字体 */ } ### 3. 渲染阻塞资源 **关键 CSS 模式：** html /* 仅首屏样式, < 14KB */ .hero { /* ... */ } .nav { /* ... */ } **延迟 JavaScript：** html ### 4. 客户端渲染 **问题：** 内容不在初始 HTML 中。 **解决方案：** **服务端渲染 (SSR)：** javas 数据来源：claude-code-templates（MIT），中文翻译由 AI 生成。详见关于我们。
粤公网安备44030002003366号