首屏加载慢的根源是资源体积大和渲染阻塞多；应压缩并懒加载非首屏大图、首屏图用WebP+picture回退、禁用background-image加载首屏图；精简CSS，内联首屏样式，异步加载其余CSS，删除未用规则；避免强制同步布局，动画优先用transform/opacity。
首屏加载慢，核心问题往往不是代码逻辑复杂，而是资源体积大、渲染阻塞多。大图和冗余样式正是两大常见瓶颈。
压缩并懒加载首屏外的大图
首屏可见区域内的图片必须优先加载，但轮播图、底部推荐图、折叠内容里的图，完全可延迟加载。
- 用 loading="lazy" 属性（现代浏览器原生支持），对非首屏
- 首屏关键图改用 WebP 格式，同等质量下体积比 JPEG 小 25%~35%，配合
- 避免在 CSS 中用
background-image加载首屏大图——它不支持loading属性，也不易响应式缩放，优先改用srcset
精简 CSS 并分离首屏样式
CSS 是渲染阻塞资源，全量加载会拖慢首屏绘制。重点不是删代码，而是“分层交付”。
- 提取首屏必需样式（如导航栏、标题、首屏按钮），内联到
的中，避免额外请求 - 其余 CSS 拆分为异步加载：用
rel="preload"预加载，再通过rel="stylesheet" onload="this.onload=null;"动态插入，避免阻塞 - 删除未使用的 CSS：用 Chrome DevTools 的 Coverage 面板识别冗余规则，或借助 PurgeCSS 工具清理框架类名残留
避免强制同步布局与过度重绘
某些 CSS 写法会让浏览器反复计算布局、触发重排重绘，尤其在首屏元素上会明显拖慢渲染速度。
立即学习“前端免费学习笔记（深入）”；
- 慎用
width: 100vw、height: 100vh配合滚动监听做视差效果——容易引发频繁 layout - 动画优先用
transform和opacity，它们走合成层，不触发布局；避免对left、top、margin做动画 - 减少层级嵌套选择器（如
.header .nav .item a:hover），深层级会增加 CSSOM 构建时间，影响首次渲染
不复杂但容易忽略：把大图换成小图、把一堆 CSS 拆开加载、把动效写法换一种，首屏就能快 300ms 以上。
