本文介绍了通过 nginx 配置、资源压缩、前端代码调整等方式，优化此博客首页加载性能的过程。

---

1.开启 http2

由控制台响应头可见，目前 nginx 使用 http1.1，在 nginx.cong 添加以下代码开启 http2

# before
server {
    listen       80;
    listen 443 ssl;
    ...

# after
server {
    listen       80;
    listen 443 ssl http2;
    ...

接下来重启 nginx 服务 nginx -s reload，可以在控制台中看到已经开启了 http2。

可以看到，对比 http1.1 加载速度快了不少，但是出现了很多 waiting for server response 的绿色条。客户端的请求是并行发出的，但受限于服务器峰值 4Mbps 带宽小水管，最大下载速度只有可怜的 0.5Mb/s，因此要等待服务器发送完上一个资源才能发送下一个资源，waiting for server response 就显得很久了。

2. 开启 gzip

在 nginx.cong 添加以下代码开启 gzip

http {
  # 开启gzip
  gzip  on;
  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;
  # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间。一般设置1和2
  gzip_comp_level 1;
  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
  # 禁用IE 8 gzip
  gzip_disable "MSIE [1-8]\.";
  ...
}

开启后加载速度又快了不少，此时运行 LightHouse 性能测试，性能得分 86 分

3. 开启 nginx 缓存

在 nginx.cong 添加以下代码开启缓存

location ~ .*\.(gif|jpg|jpeg|png|ico|css|js|woff|woff2|ttf)$ {
    root	/usr/share/nginx/blog;
    #禁用缓存
    #add_header Cache-Control no-cache; 
    # 关闭日志
    access_log off;
    #缓存7天
    expires 7d;		
}

此时再次执行 LightHouse 性能测试，性能得分 92 分

Nginx优化静态资源加载解决Waiting(TTFB)时间过长问题

补充知识

基于前端技术的首页优化方案

1. 资源加载顺序，使用 async/defer 属性处理 script 标签，避免阻塞 DOM 解析
2. 资源（图片、字体、样式）懒加载，预加载，压缩
3. 开启 GPU 加速，比如使用 will-change 属性，构建 BFC 避免回流重绘
4. 减少 css 样式嵌套深度
5. 打包优化，减少首页包体积，合理分包
6. 路由懒加载、组件懒加载
7. 骨架屏
8. 虚拟滚动
9. preload、prefetch

基于后端和运维技术的首页优化方案

1. 使用 CDN
2. 使用合适的缓存策略
3. 开启 gzip
4. 开启 http2