网站加载速度优化方法

网站加载速度直接影响用户体验和转化率（首屏3秒内加载完成是最佳实践）。以下是系统性的优化方法，分为**前端、网络、后端**三个维度： ### 一、前端优化（浏览器端） 1. **图片优化** - 使用现代格式：WebP、AVIF - 压缩图片（工具：Squoosh、TinyPNG） - 响应式图片：`srcset` + `sizes` - 懒加载：`loading="lazy"` 或 Intersection Observer 2. **资源加载** - 关键CSS内联，非关键CSS异步加载 - JavaScript添加 `defer` 或 `async` - 预加载关键资源：`` - 预连接第三方域：`` 3. **代码优化** - 压缩HTML/CSS/JS（工具：Terser、CSSNano） - 移除未使用的CSS（PurgeCSS、UnusedCSS） - Tree Shaking（Webpack/Rollup） - 代码分割（Code Splitting） 4. **缓存策略** - 设置强缓存（Cache-Control: max-age） - 协商缓存（ETag、Last-Modified） - Service Worker（Workbox）实现离线缓存 5. **渲染性能** - 避免同步加载阻塞渲染的脚本 - 优化CSS选择器（避免深层嵌套） - 使用 `will-change` 提示浏览器即将变化的属性 - 减少重排重绘（批量修改DOM、使用transform代替top/left） ### 二、网络优化 1. **CDN加速** - 全球边缘节点分发静态资源 - 主流选择：Cloudflare、AWS CloudFront、阿里云CDN 2. **HTTP/2 或 HTTP/3** - 多路复用、头部压缩（HPACK/QPACK） - 服务器推送（谨慎使用，可能过度推送） 3. **减少请求数** - 合并CSS/JS文件（适度，现代HTTP/2下可保持小文件） - 内联小资源（< 2KB） - SVG sprite 4. **启用压缩** - Gzip 或 Brotli（Brotli压缩率更高） - 在Nginx/Apache/CDN层配置 5. **DNS优化** - 减少不同域名数（DNS查询耗时） - 使用DNS预解析：`` ### 三、后端优化 1. **服务器响应时间** - 使用缓存（Redis、Memcached） - 优化数据库查询（索引、分页、慢查询分析） - 升级PHP/Node/Java运行时版本 - 使用更快的Web服务器（Nginx、LiteSpeed） 2. **页面静态化** - 全站静态化（如Hugo、Hexo） - 动态页面缓存（Varnish、Nginx FastCGI Cache） 3. **代码层面的优化** - 启用OPcache（PHP）或JIT - 减少IO操作（合并文件读写） - 异步处理非关键任务（消息队列） 4. **数据库优化** - 配置查询缓存（MySQL Query Cache 8.0已废弃，改用外部缓存） - 读写分离 - 使用NoSQL应对特定场景 ### 四、测量与监控 - **LCP** (Largest Contentful Paint) – < 2.5秒 - **FID** (First Input Delay) – < 100毫秒 - **CLS** (Cumulative Layout Shift) – < 0.1 常用工具： - Google PageSpeed Insights - Lighthouse（Chrome DevTools） - WebPageTest - GTmetrix ### 五、快速见效清单（按优先级） | 操作 | 难度 | 效果 | |------|------|------| | 开启Gzip/Brotli | 低 | 很高 | | 图片转WebP并压缩 | 中 | 很高 | | 部署CDN | 中 | 高 | | JS添加defer/async | 低 | 中 | | 设置浏览器缓存头 | 低 | 中 | | 移除阻塞渲染的CSS | 中 | 中 | | 升级到HTTP/2 | 中 | 中 | | 启用Redis缓存 | 中 | 高（动态站点） | 如果时间有限，优先做：**图片优化 + Gzip + CDN**，这三项通常能降低50%以上的加载时间。