首屏加载时间（First Contentful Paint, FCP）是用户体验的关键指标。根据Google Web.dev性能文档，首屏加载时间每减少100ms，转化率提升1%。本文将分享实现首屏加载<1秒的关键技巧和最佳实践。
1. 关键CSS内联
将关键CSS内联到HTML中，可以避免额外的HTTP请求，减少渲染阻塞时间。根据Web.dev关键CSS提取指南，这是首屏优化的关键步骤。
1.1 识别关键CSS
- 首屏可见内容的样式
- Above-the-fold内容的样式
- 关键交互元素的样式
1.2 实现方法
- 使用工具提取关键CSS（如Critical CSS）
- 将关键CSS放在<head>标签中
- 非关键CSS异步加载
2. 资源预加载
使用preload、prefetch等资源提示，提前加载关键资源。
2.1 Preload关键资源
- 关键字体文件
- 关键JavaScript文件
- 首屏图片
2.2 Prefetch次要资源
使用prefetch预加载下一页可能需要的资源，提升后续页面加载速度。
3. 图片优化
3.1 图片懒加载
非首屏图片使用懒加载，减少首屏加载时间。
3.2 现代图片格式
- 使用WebP格式（比JPEG小30%）
- 使用AVIF格式（比JPEG小50%）
- 提供多种格式的fallback
4. JavaScript优化
4.1 延迟加载
- 非关键JavaScript使用defer或async
- 使用动态import加载模块
- 代码分割，按需加载
5. CDN加速
使用CDN将静态资源缓存到边缘节点，大幅降低延迟，提升加载速度。
6. 实际案例
某电商网站通过以上优化，首屏加载时间从3.2秒降至0.8秒，转化率提升32%。