与世界分享世界

饮夏


  • 首页
  • 归档
  • 分类
  • 标签
  • 关于
  •    

© 2025 饮夏

给网站访问提速.

发布于 2020-11-23 blog  访问速度 

自此,网页访问走上了快车道。

3549d6f9461d683ba9ca6261a98f06ac

这张图片大小是2.19Mb,之前它需要加载8s,而现在正常带宽下1s不到。

  • 图床加速

    受限于服务器带宽,之前的图床访问速度一直不理想, 终于在一个下雨的秋天我决心换掉它。

    现在方案是阿里云的OSS+PicGo+Typora

    可以实现将拷贝进markdown的图片自动上传到OSS服务器,并且替换为OSS的链接。

    需要注意的点:

    • OSS读写权限设置为公共读。

    • 使用OSS时为了安全考虑最好新建一个子用户,并为其添加AliyunOSSFullAccess权限。

    • 如果需要对OSS进行GET请求的话,需要在权限管理里进行跨域设置。

    • 可以将OSS绑定自己的域名,只需要在DNS解析那里设置一下就可以了。

    • Typora的自动上传在文件>偏好设置中。

    • 将之前图床的文件转移使用的是阿里云OSS提供的上传软件ossbrowser,将之前图床的文件打包下载后解压上传。

  • 资源精简

为了好看些,给主页加了一个字体,但是中文字体包通常很大,达到了2Mb+,即使使用OSS也需要1s左右,而且也造成了不必要的流量浪费。

image-20201123193515644

其实这么大的字体包,用到的字体也不过就那么几个。

恰好有一个插件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):

image-20201123200752592

博客加载速度(1909ms):

分享到 

 上一篇: 何如是 下一篇: 晴子的信。 

© 2025 饮夏