提高博客网站的访问速度

2021-05-29 共2558字 约6分钟 -次阅读

由于我的博客网站托管在GitHub上，而国内访问GitHub又是出了名的慢，经常好几秒过去页面也加载不出来。所以如何提升博客网站的访问速度，提升用户的访问体验，也是需要尽快去解决的事情。

一般来说，提高网站的访问速度，主要从两个方面去做优化：

  1. 网页加载速度优化
  2. 网络加速

网页加载速度优化

提高网页的加载速度，主要从以下几个方面来考虑：

  1. 图片优化
  2. CSS和JS等静态资源优化
  3. 第三方库的引用优化
图片优化

图片大小优化。现在手机/相机像素都很高，拍出的图片基本上动辄好几MB，而且对移动设备来说，下载这些图片特别耗费流量。所以配图的时候，尽量把原图剪裁小一点。我个人习惯按长宽比4:3或者16:9去进行剪裁，换算成像素的话，也可以选择960*720/640*480，或者960*540/640*360。

图片格式优化。如果对图片清晰度没有要求的话，可以选择JPG或JPEG格式，否则还是用PNG这种无损图片格式。如果即想要保留图片的清晰度，又想要较小的图片文件大小，使用图片压缩工具就可以达到所需的效果，比如Google推出的Squoosh，还有TinyPNG等。

图片延迟加载。当划到图片的时候才加载，可以提高整个页面的打开速度。常见的图片延迟加载有两种方式，一种是在<img>标签里增加loading="lazy"属性；另一种是引入第三方的JS类库，如lazysizes和Lozad.js，二者都是基于IntersectionObserver API实现。不过由于我使用Typora作为写作工具，要支持图片延迟加载，还需要在博客模板里面做很多动态变更图片src属性的工作，所以还是算了。

图片编辑工具，专业人士可以使用Photoshop等专业软件编辑，我一般直接用的操作系统自带的画图工具进行编辑，基本上也够用。

CSS和JS等静态资源优化

CSS压缩。CRUDMAN使用的CSS是基于Bulma定制化剪裁的，而且在SASS编译的时候，也是按最小化压缩方式编译，CSS文件整体大小比未优化前小一半以上。

JS压缩。JS的压缩基本上就是常见的几个工具，像UglifyJS，JSCompress等，实际上JSCompress也是基于UglifyJS和babel-minify来实现的。

第三方库的引用优化

在CRUDMAN中用到了几个第三方库，像FontAwesome，jQuery和MathJax。第三方库的引用优化主要有3种方式：

  1. 按需加载。以MathJax为例，在文章的Front Matter中增加专门字段进行判断，如果文章内包含数学公式等，则该字段置为true，页面加载时会引用该类库
  2. 尽量使用原生JavaScript。由于博客中并没有特别多的动态功能，可以将jQuery写法改为原生JavaScript的写法，虽然写法比较繁琐，但是减少了jQuery类库的加载，而且执行效率更高
  3. 使用国内高速镜像源。由于CRUDMAN是中文博客，主要面向国内用户访问，像FontAwesome等三方类库可以考虑使用国内镜像源，提升类库的加载速度

网络加速

网络加速主要从两个方面去考虑优化：

  1. 域名解析加速
  2. CDN网络加速
域名解析加速

域名解析速度慢，也很影响页面打开速度，可以找域名注册商更换新的DNS服务器地址进行解析。

查看域名解析速度，可以使用curl命令，如下所示：

$ curl -o /dev/null -s -w %{time_connect}:%{time_starttransfer}:%{time_total} https://www.crudman.cn

其中，-o表示输出结果到/dev/null，-s表示去除状态信息，-w表示列出后面的参数的结果

curl命令支持的参数有：

参数 描述
time_connect 建立到服务器的TCP连接所用的时间
time_starttransfer 在发出请求之后，Web服务器返回数据的第一个字节所用的时间
time_total 完成请求所用的时间
time_namelookup DNS解析时间，从请求开始到DNS解析完毕所用时间
speed_download 下载速度，单位-字节每秒
CDN网络加速

CDN是什么，相信大家都耳熟能详，它在维基百科中的定义如下：

CDN的全称是Content Delivery Network，即内容分发网络。CDN是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

我的域名是在腾讯云注册的，但是由于不愿意进行域名备案，所以无法在腾讯云使用CDN进行加速。在调研了Cloudflare，Vercel和Netlify等常见CDN和静态资源托管平台后，我决定使用Cloudflare给博客网站进行整站CDN加速，具体操作过程如下：

  1. 先注册Cloudflare账号，邮件激活并登陆

  2. 在左侧菜单，选择“Websites”，添加博客域名

  3. 第一步处理，由于是小站点，选择免费套餐，下一步

  4. 第二步处理，Cloudflare会自动扫描域名对应的解析记录，这步基本不用管，下一步

  5. 第三步处理，修改DNS信息，将原腾讯云NS改为Cloudflare提供的NS值

  6. 设置完第三步后，先等待一段时间，然后注册邮箱会收到一封确认邮件，确认站点在Cloudflare已激活

  7. 使用dig命令验证，可以看到crudman.cn已经指向了172.67.131.80和104.21.3.239这两个非GitHub Pages的IP地址

    $ dig crudman.cn +nostats +nocomments +nocmd

; <<>> DiG 9.9.4-RedHat-9.9.4-61.el7 <<>> crudman.cn +nostats +nocomments +nocmd
;; global options: +cmd
;crudman.cn.                    IN      A
crudman.cn.             300     IN      A       172.67.131.87
crudman.cn.             300     IN      A       104.21.3.239
crudman.cn.             86400   IN      NS      harlee.ns.cloudflare.com.
crudman.cn.             86400   IN      NS      frank.ns.cloudflare.com.
frank.ns.cloudflare.com. 86353  IN      AAAA    2a06:98c1:50::ac40:21a6
frank.ns.cloudflare.com. 86353  IN      AAAA    2606:4700:58::adf5:3ba6
frank.ns.cloudflare.com. 86353  IN      AAAA    2803:f800:50::6ca2:c1a6
harlee.ns.cloudflare.com. 86353 IN      A       162.159.38.238
harlee.ns.cloudflare.com. 86353 IN      A       172.64.34.238
harlee.ns.cloudflare.com. 86353 IN      A       108.162.194.238
harlee.ns.cloudflare.com. 86353 IN      AAAA    2606:4700:50::a29f:26ee
harlee.ns.cloudflare.com. 86353 IN      AAAA    2803:f800:50::6ca2:c2ee
harlee.ns.cloudflare.com. 86353 IN      AAAA    2a06:98c1:50::ac40:22ee

  8. 清空谷歌浏览器缓存进行验证，地址栏输入：chrome://net-internals/#dns，选择“Clear host cache”，然后打开开发者工具，重新访问crudman.cn，查看对应的应答头信息，如果看到诸如下面这些信息，则说明CDN加速已生效

    etag: W/"648e6bfa-148f"
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
...

总结

通过以上优化手段，博客网站的访问速度较之前有了很大提升，国内平均响应时长降到1秒多。除了上述介绍的优化方式外，还有很多其他的优化方式，如开启网站内容Gzip压缩，使用新的WebP图片格式等等，需要根据实际情况，选择适合的优化方式，给用户带来更好的访问体验。

常见工具

测速网站：

  1. https://www.boce.com/
  2. http://ce8.com/
  3. https://www.17ce.com/

访问速度分析工具：

  1. Google Pagespeed Insights
  2. WebPageTest
  3. Google Chrome，Developer tools，Lighthouse

CDN：

  1. 腾讯云CDN
  2. 阿里云CDN
  3. 又拍云CDN
  4. 七牛云CDN
  5. Cloudflare
  6. jsDelivr

静态资源托管平台：

  1. Netlify
  2. Vercel

 

建站  
[个人博客]   [独立博客]   [技术博客]   [网页加载速度优化]   [网络加速]   [CDN]