网站性能优化(一):使用腾讯云对象存储 COS 做博客图床,CDN 加速

事情起因:看到别人对自己的网站进行很多优化。把打开网页的速度降至 ms 级。我也想让自己的博客拥有 ms 级加载速度,也借此接触更多新鲜东西。

博客网站是 Hugo 生成的纯静态页面,Nginx 作 Web 服务器,部署在腾讯云 Lighthouse 轻量服务器。本来服务器配置是 1core1G(40 元/月),最近腾讯云通知会下架这一型号,不能续费,我只能升级配置。我看了现存的服务器产品列表,选择了最便宜的 50 元/月,配置升到了 2core2G。我对「只贵了 10 块钱就能双倍升级」 这一点挺满意。可以对比阿里云同地域的最低价位轻量服务器:

腾讯云阿里云
地域上海
系统镜像Ubuntu20.04
vCPU2 核
内存2G
每月流量300G800G
系统盘40G SSD50G ESSD
限峰值带宽4Mbps
价格50 元/月90 元/月

贵 40 元贵在哪儿呢?

流量和系统盘,阿里云的系统盘可能比腾讯云的要好。不过,我现在没有更高需求,所以选择更便宜的腾讯云。

#COS

在腾讯云的生态下,如何为我的博客搭建图床呢?我先搜索如何通过腾讯云搭建图床,了解到腾讯云 COS(对象存储)。于是开始阅读官方文档,了解到它是一种容器,能够存放各种类型的数据,把所有数据视为统一的对象进行管理。所有功能文档中都有介绍,我只记录下已经使用的部分。

在使用 COS 时,第一步是创建一个「存储桶」,你可以理解为它是一个仓库。存储桶有所属地域,这一点在创建时要确定,创建完成不可再更改。输入名称,然后设置访问权限。因为我想让别人能在公网访问到我的图片,所以权限设置为「公有读私有写」。高级配置仔细阅读文档后再确定是否配置。

第二步是打开存储桶的配置管理界面,熟悉操作流程。在文件列表处上传下载文件,腾讯云提供了多端支持,移动端和 PC 端都有 COSBrowser 这一利器,上传下载不限速。找到安全管理下的防盗链设置,它能阻止陌生网页盗用我的 COS 资源。

到这里,有关 COS 的初步使用就结束了,接下来要做的就是:

  • 上传图片到存储桶
  • 获取图片链接,并插入博客

在测试过程中,我发现图片加载很慢,超出我的预期时间。于是,我想到可以通过 CDN 加速获得我的图片。

不论是 COS 还是 CDN,涉及到域名操作时,如果域名已备案,可以选择国内节点,否则只能选择国外。

#CDN

在内容分发网络(CDN)界面,通过域名管理子菜单添加域名,并对域名进行 CNAME 解析。其他设置如下:

  • 加速区域为中国境内
  • 加速类型是 CDN 网页小文件
  • 源站类型是 COS 源
  • 回源协议为 HTTPS
  • 源站地址为默认域名
  • 开启私有存储桶访问

其他按需配置后,即可提交。

在 CDN 域名的配置页,进行的配置:

  • 访问控制
    • 防盗链(必备)
    • IP 访问限频
  • 缓存配置
    • 节点缓存过期配置
  • HTTPS 配置
    • HTTPS 配置(可选择腾讯云免费证书,方便)
    • 开启 HTTP2.0
    • 强制 HTTP->HTTPS 跳转
    • 开启 HSTS
    • 开启全部 TLS 版本
    • 启用 OCSP
    • 开启 QUIC
  • 高级配置
    • 自定义错误页面
    • 用量封顶
    • 智能压缩

至此,COS 作图床+CDN 加速访问的流程已经走完。

通过 CDN 文档中的最佳实践,我还可以配置「缓存预热」,提前将静态资源预热至 CDN 加速节点,降低源站压力,提高响应和下载速度。

在 CDN 总界面下,左侧菜单栏选择刷新预热,找到 URL 预热,选择预热区域-中国境内,输入 URL 列表,提交并预热。若源站资源已修改,建议刷新缓存后再重新预热。还可以通过 COS 存储桶管理菜单下函数计算下的 CDN 缓存刷新函数,定期刷新 CDN 缓存。

还可以配置跨域的头部参数 Access-Control-Allow-Origin 选择允许访问的域名。


  1. 对象存储 COS-产品文档
  2. 内容分发网络 CDN-产品文档

Layout of comment panels