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

最新推荐文章于 2024-10-07 11:47:20 发布

置顶科技小北

最新推荐文章于 2024-10-07 11:47:20 发布

阅读量1.3w

点赞数 1

分类专栏： Nginx 文章标签： nginx 服务器 http https

by momo

本文链接：https://blog.csdn.net/itmm_wang/article/details/105962314

版权

Nginx 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前因后果

我的MoMo导航网站每次加载都需要等待两三秒，一直以为是带宽问题（因为带宽真的小，钱的问题），后来开了全站 CDN 加速依然没有解决问题，今天正好没事就研究研究。

如图：多个静态文件 Waiting(TTFB) 时间过长

如图：Waiting(TTFB) 时间过长

都是静态资源，文件也不大，试了全站 CDN 和单个文件 CDN 没有任何效果，后来怀疑是Nginx 配置问题。经过查询文档检查配置最终找到问题。

解决办法第一步，启用缓存

Nginx 静态资源配置了禁用缓存，导致每次都重新加载。开启缓存后刷新就很快了，但是第一次加载依然是两三秒。

开启缓存静态资源

# 开启缓存，关闭静态资源日志记录，节省服务器资源
location ~ .*\.(gif|jpg|jpeg|png|ico|css|js|woff|woff2|ttf)$ {
    root	/usr/xxx;
    #禁用缓存
    #add_header Cache-Control no-cache; 
    # 关闭日志
    access_log off;
    #缓存7天
    expires 7d;		
}

解决办法第二步，启用 `gzip` 压缩

第一次加载依然是两三秒，解决办法是开启静态资源压缩，速度瞬间提升 20 倍哈哈。

在 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]\.";
# 设置缓存路径并且使用一块最大100M的共享内存，用于硬盘上的文件索引，包括文件名和请求次数，每个文件在1天内若不活跃（无请求）则从硬盘上淘汰，硬盘缓存最大10G，满了则根据LRU算法自动清除缓存。
proxy_cache_path /usr/local/nginx/cache/ levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

再来看看现在，静态资源加载的速度，保持在100ms以内

解决办法第三步，启用 `http2` 协议（可选）

HTTP/2（超文本传输协议第2版，最初命名为HTTP 2.0），简称为h2（基于TLS/1.2或以上版本的加密连接）或h2c（非加密连接），是HTTP协议的的第二个主要版本，使用于万维网。

如果没有安装http_v2_module模块，则需要重新编译安装。

./configure --user=nginx --group=nginx --prefix=/usr/local/nginx/ --with-http_addition_module --with-http_flv_module --with-http_gzip_static_module --with-http_realip_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_dav_module --with-http_v2_module --with-http_geoip_module --with-stream --with-stream=dynamic

Nginx 启用http2并优化https性能，从而获得更好的 TTFB 和减少的延迟。

server {
    listen 443 ssl;
    # 改为
    listen 443 ssl http2;
    
    # https 优化
    # 减少SSL缓冲区大小，默认情况下，缓冲区为16k，这是一种“一刀切”的方法，旨在应对较大的响应。但是，为了最大程度地减少TTFB，通常最好使用较小的值。
    ssl_buffer_size 4k;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1.2 TLSv1.3; # 最低支持1.2 协议配置
    # 使用http2并启用Nginx ssl_session_cache将确保初始连接的HTTPS性能更快，并且页面加载速度快于http。
    ssl_session_cache shared:SSL:1m; # 可容纳约4000个会话
    ssl_session_timeout 24h; # 24小时，在此期间可以重复使用会话
    # 由于Nginx尚未正确实现会话票证加密密钥的轮换，因此将其关闭。
    ssl_session_tickets off;
    ssl_stapling on;
    ssl_stapling_verify on;
    ssl_trusted_certificate cert/xxxxx.pem; # 证书地址
    resolver 8.8.8.8 202.106.0.20 valid=300s;
    resolver_timeout 5s;
}