本文目录导读：
网站加载速度直接影响用户体验、SEO排名（尤其是谷歌和百度）、转化率和跳出率，以下是经过验证的核心优化技巧,按优先级从高到低排列：
前端优化（首屏速度最关键）
-
启用浏览器缓存
- 做法：通过
.htaccess（Apache）或 Nginx 配置文件设置Cache-Control和Expires头。 - 意义：静态资源（图片、CSS、JS）在用户首次访问后存储在本地,再次访问无需重新下载。
- 示例：对图片缓存1个月,对HTML缓存几小时。
- 做法：通过
-
压缩与优化图片（最关键且最容易被忽略）
- 格式选择：使用 WebP（比JPEG小25%-35%）或 AVIF。
- 工具：使用 TinyPNG、ImageOptim、Squoosh 进行无损/有损压缩。
- 懒加载：使用
loading="lazy"属性（原生支持）,让图片在即将进入视口时才加载。 - 响应式图片：使用
<picture>或srcset属性,为不同屏幕尺寸提供不同分辨率的图片。
-
代码精简与压缩
- CSS/JS：移除空格、注释、换行（使用 Gulp/Webpack/Parcel）。
- 删除冗余：检查并删除未使用的CSS（可使用 PurifyCSS、UnCSS）。
- 合并文件：将多个CSS文件合并为一个，JS文件合并为一个（HTTP/2环境下需谨慎，过多合并会破坏并行下载，建议适度合并）。
-
减少阻塞渲染的资源
- 关键CSS：将首屏所需的CSS内联到
<head>中,非关键CSS异步加载。 - 异步JS：给非首屏脚本添加
async或defer属性（defer更适合依赖DOM的脚本）。 - 延迟加载无关第三方脚本：比如分享按钮、评论框、统计代码等。
- 关键CSS：将首屏所需的CSS内联到
-
分发网络（CDN）
- 将静态资源分发到全球/全国节点,用户从最近的服务器获取资源。
- 推荐：Cloudflare（免费）、阿里云CDN、腾讯云CDN、Amazon CloudFront。
-
JavaScript 与 CSS 的预加载/预连接
<link rel="preload">：提前加载关键资源（如字体、关键CSS）。<link rel="preconnect">：提前与第三方域名（如Google Fonts、CDN）建立连接。
-
优化字体加载
- 使用
font-display: swap（避免“闪白”或“闪藏”）。 - 子集化字体（只下载你需要的字符，如只保留英文字母和数字）。
- 避免使用过多字体族或字重。
- 使用
后端优化
-
启用 Gzip/Brotli 压缩
在服务器配置中开启压缩，将文本文件（HTML、CSS、JS、JSON）压缩传输，减少网络传输大小，Brotli 比 Gzip 压缩率更高。
-
优化数据库查询
- 避免 N+1 查询（使用预加载/JOIN）。
- 添加数据库索引（索引慢查询）。
- 使用缓存层（如 Redis、Memcached）缓存频繁查询的结果。
-
使用 PHP 加速器（如 OPcache）
如果你使用 PHP 语言，开启 OPcache 可以避免每次请求都重新解释 PHP 脚本。
-
减少 HTTP 请求次数
- 雪碧图（Sprite）：将多个小图标合并为一张大图（对于 HTTP/1.1 有效，HTTP/2 下意义不大）。
- 内联小资源：将小于几KB的图片/图标转为 Base64 或 Data URI（需权衡缓存问题）。
- 合并页面：减少页面上引用的外部文件数量。
服务器与架构优化
-
选择高性能服务器
- 升级服务器硬件或选择轻量级Web服务器（如 Nginx 替代 Apache，或 Caddy）。
- 使用 SSD 硬盘（读写速度远超 HDD）。
-
使用 HTTP/2 或 HTTP/3（QUIC）
- HTTP/2 支持多路复用（一个连接同时传输多个资源）、头部压缩、服务器推送。
- HTTP/3 基于 UDP,进一步减少连接延迟和丢包影响。
-
服务端渲染（SSR）或静态站点生成（SSG）
- 对于 SPA（单页应用）如 React/Vue，服务端渲染首屏HTML,让用户更快看到内容。
- SSG（如 Next.js静态导出、Hugo、Jekyll）直接生成纯静态HTML,速度极快。
监控与诊断工具
- Lighthouse（谷歌）：浏览器内置,给出评分和具体优化建议。
- PageSpeed Insights：模拟移动端/桌面端,分析核心指标。
- WebPageTest：可以测试不同地点、不同浏览器、不同连接速度下的加载瀑布图。
- Chrome DevTools - Network/Performance：查看资源加载时间、请求瀑布图。
- GTmetrix：结合Lighthouse和自有建议。
国内特殊优化建议
- 域名分站：将静态资源（
static.xxx.com）分配给不同的域名（无Cookie）,用于CDN加速。 - 放弃未经验证的第三方依赖：国内访问某些国外CDN（如Google Fonts、Bootstrap CDN）可能极慢,使用国内镜像或自建CDN。
- DNS预解析：对于需要跨域的第三方资源（如统计代码、支付接口），添加
<link rel="dns-prefetch" href="//第三方域名.com">。
核心优先级排序（行动清单）
- 图片优化（成本最低、效果最明显）
- 开启Gzip/Brotli + 浏览器缓存
- 代码压缩 + 关键CSS内联
- CDN部署
- 减少阻塞渲染的JS
- 数据库/API优化（如果是动态网站）
最后提示：不要一次性优化所有项，先使用 PageSpeed Insights 或 Lighthouse 跑一次报告，找出报告里 红色的“应该优化”项，按从易到难、收益从大到小的顺序逐个解决,每次改动后重新测试看分数变化。
