自此,网页访问走上了快车道。
这张图片大小是2.19Mb,之前它需要加载8s,而现在正常带宽下1s不到。
- 图床加速
受限于服务器带宽,之前的图床访问速度一直不理想, 终于在一个下雨的秋天我决心换掉它。
可以实现将拷贝进markdown的图片自动上传到OSS服务器,并且替换为OSS的链接。
需要注意的点:
OSS读写权限设置为公共读。
使用OSS时为了安全考虑最好新建一个子用户,并为其添加
AliyunOSSFullAccess
权限。- 如果需要对OSS进行GET请求的话,需要在权限管理里进行跨域设置。
- 可以将OSS绑定自己的域名,只需要在DNS解析那里设置一下就可以了。
- Typora的自动上传在文件>偏好设置中。
- 将之前图床的文件转移使用的是阿里云OSS提供的上传软件ossbrowser,将之前图床的文件打包下载后解压上传。
- 资源精简
为了好看些,给主页加了一个字体,但是中文字体包通常很大,达到了2Mb+,即使使用OSS也需要1s左右,而且也造成了不必要的流量浪费。
其实这么大的字体包,用到的字体也不过就那么几个。
恰好有一个插件font-spider可以实现这个功能。
使用也很简单:
安装
npm install font-spider -g
//全局安装。
使用
首先得先调用字体文件
@font-face{
font-family: 'yourname';
src:url('someadress.ttf')format('');
font-weight:normal;
font-style:normal
}
h1,p{
font-family:'yourname'
}
然后运行命令
font-spider ./index.html
//这里添加想要处理字体的网页,可以使用通配符*,也可以同时添加
//多个文件夹,中间插入空格即可。
TIPS
值得注意的一点是,由于一些我暂时不知道的原因,CSS样式可能会导致压缩失败,我在处理的时候除了字体部分的CSS全部注释掉了。
总之2Mb的字体压缩到了70Kb,麻麻再也不用担心我的小霸王不能访问主页了。
- CDN加速
其实CDN加速对我来说毫无必要,通常是访问量比较大的网站会使用CDN,这样子的话即使是离服务器比较远的地方也能够体验良好。
不过最终还是设置了,做个全套嘛,说不定哪天访问量就上来了呢。
不过…如果真上来了,还得担心一下流量费用能不能支付得起,哈哈哈
要说CDN的注意点的话其实也有,CNAME新增最迟15分钟就能生效,但是修改需要48小时,所以其实删除掉再添加会快一些。
还有就是使用CDN和OSS可能会导致https无法正常使用,需要到ssl证书提供商复制证书手动添加,阿里云的https服务是付费使用的,不过比起流量费用的话就微不足道了。
- 写在最后
听说,网页加载时长每多1s,访问人数就会减少一半。
无数的web工程师想尽了办法只是为了让加载速度提升微不足道的零点几秒。
看不到的努力,无数个微小的几毫秒。
正是因为你感受不到它的存在,它的存在才显得尤为重要。
饮夏主页加载速度(810ms):
博客加载速度(1909ms):