第一步,首先分析拖慢网页的因素,打开审查元素,选择 Network ,然后把Disable Cache勾上,最后重新刷新网站

1.png

从上面图片可以看出,加载完成总共需要快 20s 的时间

哇(王者之哇)!这TM是我的博客。

不能忍了,开始动手,首先把 Time 从大到小排序,点一下它,然后有个向下的三角形,就会从大到小排序,从上图中可以看出,BootStrap 以及一些引入外部的前端 CDN 资源竟然要 10s 左右才加载出来,我用的 cdnjs,这是因为上次 BootCDN 突然挂了,就换成了 cdnjs 。

换前端CDN

  1. Staticfile CDN:平均30ms,TTL=48
  2. 今日头条 CDN:平均27ms,TTL=49
  3. 360 CDN:平均22ms,TTL=55,有丢包

上面的测试情况这是作为在我自己的测试情况(南昌),OK,换上今日头条的 CDN,再去刷新一下缓存

2.png

可以看出区别非常明显,那些静态资源加载时间已经在 100ms 以内了,但是不包括图片,所以接下来优化图片

优化图片

再看审查元素

3.png

首次一共加载了4张图片,之所以这样,是因为我用了图片懒加载。也就是说,我只要对我首页那三个大图做些处理就好了。

其实我对于那三个大图并不满意,因为我的高度写的是 500px,而具体的图片是是 1920x1080 ,就会导致不同的分辨率,越高的分辨率,图片显示就会变得越扁,图片就变形;所以换三张图片,把图片换成 500px 高度的。

图片换好之后,接下来就是对域名的优化了。

域名优化

域名怎么优化呢?我们可以打开 DnsPod 的域名解析管理,可以给我们设置的选型并不多,其中有一项 TTL 设置,这是个什么东西呢?TTL 是 DNS 在非权威服务器中的过期时间,也就是说,我们给这个时间设置的越大,缓存时间(非权威服务器中的过期时间)越久,但是也不能太久,因为万一服务器挂了,要换个解析,但是前一个缓存还没有过期就尴尬了

我就给他设置 172800s 吧,也就是48小时。默认是 3600s

4.png

缓存优化

当用户已经打开过一次网站了,可以将网页显示的图片,css 等文件缓存在用户的电脑上或者手机上,那么下次访问就可以从用户的设备上加载了,同时在开启 Gzip 压缩那就完美了,我用的是 Apache 服务端软件,所以我可以直接在文件中添加下面代码即可

<IfModule mod_expires.c> 
        ExpiresActive On 
        ExpiresByType image/gif A2592000 
        ExpiresByType image/jpeg A2592000 
        ExpiresByType image/png A2592000 
        ExpiresByType application/x-shockwave-flash A2592000 
        ExpiresByType text/css A2592000 
        ExpiresByType application/x-javascript A2592000 
        ExpiresByType application/javascript A2592000 
        ExpiresByType text/javascript A2592000 
        ExpiresByType text/html A600 
        </IfModule> 
         
        <IfModule mod_deflate.c> 
        <FilesMatch "\.(js|css|html|htm)$"> 
        SetOutputFilter DEFLATE 
        </FilesMatch> 
        </IfModule> 
         
        <ifModule mod_gzip.c> 
          mod_gzip_on Yes 
          mod_gzip_dechunk Yes 
          mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ 
          mod_gzip_item_include handler ^cgi-script$ 
          mod_gzip_item_include mime ^text/.* 
          mod_gzip_item_include mime ^application/x-javascript.* 
          mod_gzip_item_exclude mime ^image/.* 
          mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* 
        </ifModule> 
         
        <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$"> 
        Header unset Last-Modified 
        </FilesMatch> 
         
        FileETag none 

合并文件

如果网站有多个自己写的 css 或者 js 文件,每加载一个文件就是一个请求,每多一个请求,就多浪费一份资源;这一步优化的目的就是将多个请求合成一个文件,简单的说,将多个 css 或者js 里的代码复制粘贴到一个 css 或者js 中,下次请求就会只发送一个请求。(友情提示:WordPress 有插件)