首屏加载时间优化策略

以下是关于首屏加载时间（FP/FCP）优化的基本知识点总结：

---

一、首屏加载核心指标解析

指标	定义与阈值	测量阶段	优化目标
FP （首次绘制）	浏览器首次渲染任何像素的时间 良好：≤1s	开始解析HTML → 首次渲染	快速展示视觉反馈
FCP （首次内容绘制）	浏览器首次呈现文本/图像等有效内容的时间 良好：≤1.8s	关键内容（如标题/LOGO）渲染完成	用户感知内容可见

---

二、基础优化策略

1. 资源加载优化

<!-- 关键CSS内联 -->
<style>/* 首屏所需CSS */</style><!-- 非关键资源异步加载 -->
<script defer src="non-critical.js"></script>
<link rel="preload" href="hero-image.jpg" as="image"><!-- 字体加载策略 -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<style>@font-face {font-display: swap;}