最近不知道为什么,服务器的延迟变高了,页面访问速度相比以前变慢了一些,于是就想对网站做一个优化,提升它的访问速度

当然,作为一个新人站长,对于优化肯定是懵逼的,完全不知道怎么去下手,所以就只好求助于Google了

网站性能检测

先说是不是需要优化,再谈怎么去优化

所以先要对网站性能进行“体检”,Google为站长提供了两个检测工具,它能为站长提供优化建议

  1. PageSpeed insights 这个工具只需要将你站点的url输入进去,他就会进行自动检测,并给出优化意见

  2. Lighthouse 这是一个Chrome扩展,通过浏览你的页面,它能生成一份详细的性能报告,并给出优化意见

发现问题

上述的两种工具我都使用了,它们为我提供了优化意见

  1. 启用数据压缩

  2. 最小化js/css/html文件

  3. 优化图像文件

  4. 静态资源缓存策略

  5. 服务器响应速度过慢

开始优化

启用数据压缩

我站点使用的是nginx反代,nginx自带gzip数据压缩,并不需要重新编译,只需要在配置文件中开启即可

# 开启gzip
gzip on;
# 在ie1~6中不启用压缩
gzip_disable "MSIE [1-6]";

# 代理缓存压缩和原始版本资源,避免客户端因Accept-Encoding不支持gzip而发生错误的现象(现在一般都采用gzip)
gzip_vary on;

# 压缩通过代理链接的客户端数据
gzip_proxied any;

# 压缩等级,等级越高,压缩效果越好,cpu开销越大
gzip_comp_level 5;

# 压缩结果数据流存储所用空间,下面表示以8k为单位,按照原始数据大小以8k为单位的16倍申请内存。默认值是申请跟原始数据相同大小的内存空间去存储gzip压缩结果。
gzip_buffers 16 8k;

# 采用http协议版本
gzip_http_version 1.1;

# 指定的压缩内容
gzip_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/svg+xml image/x-icon text/css text/plain text/javascript text/x-component;

优化图像文件

其实之前已经对图像做过一次优化了,当时是使用的picdiet进行的图像压缩

听说Google出了一个图像压缩——guetzli,嗯,那就来试试

然后发现,确实有压缩效果,但是并不是很明显。。

静态资源缓存策略

在nginx同样提供了静态资源的缓存,不得不感叹nginx还是:+1:

先创建缓存目录,在一个你喜欢的地方创建一个文件夹

http{
# 省略...

     # 开启缓存,在此前必须在
      proxy_connect_timeout 5;
      proxy_read_timeout 60;
      proxy_send_timeout 5;
      proxy_buffer_size 16k;
      proxy_buffers 4 64k;
      proxy_busy_buffers_size 128k;
      proxy_temp_file_write_size 128k;
      proxy_temp_path /home/temp_dir;
      proxy_cache_path 你的缓存目录位置 levels=1:2 keys_zone=cache_one:200m inactive=1d max_size=30g;

# 省略...
}

此时,就开启了缓存,还需要应用上去

http {
   server {
        #缓存
          location ~ .*\.(gif|jpg|png|css|js)(.*) {
              proxy_pass http://127.0.0.1:your_port; #你的代理端口
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_cache cache_one;
              proxy_cache_valid 200 302 1h;
              proxy_cache_valid 301 1d;
              proxy_cache_valid any 1m;
              expires 30d;
            }
        # 反向代理配置
          location / {
                proxy_pass http://127.0.0.1:your_port; #你的代理端口
                client_max_body_size    100m;
          }
   }
}

服务器响应速度过慢

如果代码优化后效果还是不理想,那就升级硬件吧2333


Keeping frank is the easiest way to keep it simple.