刚开始自己的博客是基于 `hexo` 这个框架搭建的,跟着教程一步步的把博客部署到 `github page`, 但是其速度真的是太感人了,甚至导致自己一度失去了写博客的兴趣。 心有不甘,随着 云服务 的普及以及其低廉的价格,自己入手了一个最便宜的阿里云服务器,不得不说,直到现在,仍然觉得是真的香。
(资料图片)
买了服务器之后就按照网上的教程一步一步的部署到 nginx上,但是谁让咱年少无知呢,服务倒是安了一大堆,但真正用起来的没几个,唉,还不是怪自己菜。
部署到阿里云之后我感觉访问速度是快了一点,但是并没有像访问别人的网站那么流畅,甚至,感觉根本就没什么效果,还真的是恼火,讲道理, nginx为一个区区的小博客服务,根本就不是个事。但现实就是这样,这个问题一直想解决,但由于手头一直没有空,拖到现在,就在今天,这个问题终于被解决了。
追根溯源
要想解决问题,我要知道你为啥这个慢的。 首先看原因: 在浏览器中访问自己的网站 :dancingcode.cn,使用开发者工具查看网络情况:
好家伙,加载博客主页就花费了 18.83s,我直接好家伙,恐怕大多数人等不到加载完就已经退出去了吧。 我们仔细看一下时间到底花在哪了。 按访问完成时间进行排序:
可以看到上图中的第一个文件 all.css访问失败,花费的时间是 17.74秒,显然就是这个东西的原因。据我有限的知识,这个其实是 font-awesome国外的图标库网站,但是国外嘛,要么是速度贼慢要么根本访问不到,这不就翻车了。
第一想法就是直接干掉这个文件,不要这个图标字体库了,但是要先找到这个文件你是在哪里中引入的,追根溯源,可以看到:
该引入是在 index.html的第 47行引入,第一想法就是注释掉不就行了。于是找到了该文件将这一行注释掉:
本以为已经很快了,谁想到还是大意了,随便点击进入一篇文章,同样遇到了加载 all.css文件失败的问题:
原来我使用的整个主题框架都用到了这个字体库。 并且在每次提交的时候都进行 hexo clean和 hexo g -d,每次 主页面都会被重新生成,每次都在服务器中注释这一行显然是不现实的。
咳,google吧。
使用 CDN 加速解决
在网上看到这样一篇博客 博客地址,内容大概是这样:
原来是有一个 js文件专门用来设置 font_providers,于是找到这个文件,在网上随便找到了一个 font-awesome的 CDN加速地址:
https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css
然后在文件中将 icon_providers地址改为上述地址:
然后重新再 hexo clean以及 hexo g -d.
可以发现效果显著:
访问博客主页只花了 1.8秒的时间,而且没有 all.css这个访问失败的问题。同样访问任何一篇博客也不会再从 font-awesome加载,时间大大缩短,大概只要 1s左右就可以全部加载完毕,达到了想要的效果。
匆匆开始,匆匆结束,拜拜!
每天进步一点点!
2020/11/24 成都
博客已经陆续转到个站 : dancingcode.cn,欢迎访问。