四、服务端渲染与预渲染的取舍

五、缓存策略与CDN调校 资源类型 缓存策略建议☀️ 说明 HTML no-cache 或短期缓存 避免爬虫与用户获取陈旧内容；建议配合ETag验证 CSS/JS 长期缓存（一年） 文件名中包含版本哈希，更新后自动失效 图片/字体 长期缓存（一年） 配合CDN边缘节点，减少回源压力 CDN节点💎应选择覆盖目标用户区域的服务商，并开启Gzip或Brotli压缩

对于移动端，可启💎用 主动推送 🍀（如HTTP/2 Server Push）将关键资源提前推送到客户端，但需谨慎使用，避免推送过大文件

七、常见误区提醒 过度压缩代码 ：压缩工具可能破坏某些依赖变量命名的作用域，务必在压缩后进行功能回归测试

三、图片与字体：首屏性能的两大吞噬者

三、图片与字体：首屏性能的两大吞噬者 🍀图片优化实战 使用WebP格式 ：在支持WebP的浏览器中优先使用，体积通常比JPEG小25%-35%

字体加载优化 字体文件通常体积较大，建议使用 font-display: swap 属性，让浏览器先以系统字体渲染文本，待自定义字体加载完成后再替换

四、服务端渲染与预渲染的取舍 对于内容型站点（如文章、博客、企业站）， 静态预渲染 是最佳方案——在构建阶段生成完整的HTML文件，用户请🚀求时直接返回，几乎零服务端计算

七、常见误区提醒

避免同步请求 ：所有数据请求应放在首屏渲染完成之后，采用Intersection Observer或requestIdleCallback触发

一、首屏速度：移动端SEO的核心战场

JavaScript的延迟与异步策略 非关键脚本一律使用 async 或 defer ：对于统计代码、第三方插件等，优先使用 defer 🌺，确保DOM解析完成后再执行