本站测试了一个月,发现图片是影响站点访问速度的一大梗阻因素。最近通过学习,找到了一个成本低、效率高的解决方案。

当然,在资源有限的情况下,尤其是不备案的情况下,给Wordpress提速,本身是相当有技术门槛的手艺活儿,比如动静分离、站库分离、缓存优化、网络优化等等。

博主不具备这样的能力,本文仅仅探索图片分流的方案,粗浅涉及一些网络优化的思路探索。不足之处,还请大神们予以指正。


问题描述

本博客框架采用Wordpress,主要通过docker-compose 项目做反向代理的方式搭建;图片后端走的是在VPS 上搭建easy image 图床以及在Wordpress 媒体库存储的方案。

随着博客后台使用的插件增加,以及图片等媒体元素越来越多,读者在访问本站时,所有的响应都依赖VPS 的资源,本站的加载速度势必会变得越来越慢,影响读者体验。

事实上,不仅仅是Wordpress 部署的博客,其他框架的博客访问速度慢、卡顿也和图片加载有很大的关系。所以,我认为通过图片分流提升Wordpress 博客的访问速度应该是可行的,适合多数人的方式。

当然,提升博客访问速度本身是一个技术活儿。Google 出来会有一大堆教你配置CDN,教你缓存优化的「攻略」,甚至还有通过React、Vue.js等这些所谓的先进前端技术来帮助我们实现页面加载时快速呈现内容,并提高用户体验的方法。

但是,这里有一个前提:金钱和精力的持续投入。比如,要用Java写的博客框架,服务器的配置最起码也要1G的内存。而且对只想好好写博客、代码零基础的人来说,学习React、Vue.js这些前端技术并做到能够熟练地用来解决实际问题,门槛并不低。

所以,在暂时不改变VPS 既有条件的情况下,我希望能找到一个适合的图片存储及分流的提速方案,并且要有安全防护的能力。一方面,尝试掌握解决这类问题的基本方法,另一方面,积累一些实操的经验。


解决思路

老办法,先Google 一番,了解基本原理和别人的方案分享。看了很多已有的分享后博主发现,每个站点遇到的情况都不一样,有的通过服务器搬家解决问题,有的通过优化代码解决,都是行之有效的好办法。

另一方面,大家分享的文章里,基本上都是贴了很多自己操作过程中的截图。然而,这类文章的阅读体验非常差,形式上:几乎都是在通过截图粘贴的方式,展示自己的操作步骤;内容上:很少有人针对解决问题的原理和思路讲得清楚明白。

贴图文章的好处是可以清晰展示操作过程,如果遇到bug可以更好地寻求外界帮助,但作为经验或者知识分享,这类文章的弊端也是非常明显的:

这类文章都是特定场景下的特定解决办法,并不能成为解决问题的通用经验,更谈不上知识分享。

再者,解决问题的办法本身也在迭代,很多看似清楚明了的技术文章实际上过不了多久就会失效(原作者往往也不会提示)。后来者如果照本宣科,不但解决不了自己遇到的问题,反而会陷入泥潭。

所以,需要找到真正能解决问题的原理、方法和流程。博主梳理出来是这样的:

  • 第一步,先弄清楚问题发生的原因和细节
  • 第二步,学习解决问题的原理、通用的知识
  • 第三步,通过浏览别人分享的经验,比照哪些是适合自己的,哪些是值得改进的
  • 第四步,动手实操并记录解决问题的过程

根据目前本站遇到的实际情况,博主最终决定使用「对象存储」的方案,把Wordpress 的所有图片进行分流,不占用VPS 的带宽,从而提升访问速度。当然,影响站点的访问的因素有很多,本方案只是沿着正确的方向在前进,实际效果并不会有飞跃性的提升。

考虑以后本站的部署地点可能会变动,初步选下来,选了腾讯云COS 服务。实际参考的是官方给出的最佳实践案例:「将 WordPress 远程附件存储到 COS」和「使用 PicGo+Typora+COS 搭建图床服务」。


学习心得

在《将 WordPress 远程附件存储到 COS》的方案中,Wordpress 后台需要安装「tencentcloud-cos」插件,通过插件把全站的媒体素材库(图片等)存储到腾讯云COS。

读者访问博客时,网页上的媒体素材从腾讯云COS 服务器响应,网站其他素材从Wordpress 所在的VPS 服务器响应。图片和其他素材分流,从而不占服务器带宽,实现网站访问加速。

腾讯云COS 服务本身可以选择国内的机房,因此,有利于国内读者访问。博客如果备案,还可以单独给图片访问做CDN 加速,实现更好的分流效果。

现在假设一个场景:博主要新发布一篇文章,必须先进入Wordpress 后台,手动上传所有文章要用的图片,编辑文章时,必须在Wordpress 后台手动插图。由于插件存在,图片会自动存到腾讯云COS,在文章页面自动生成腾讯云的图片链接而非Wordpress 后台媒体库的链接。

首先,这个方案Wordpress 要新增一个插件,眼看着站点在一步步走向臃肿。博主希望Wordpress 博客框架尽量减少插件使用,避免不兼容、避免站点架构的复杂。

其次,这个工作流必须在Wordpress 后台媒体库上传文章的插图,然后在Wordpress 后台编辑文章时一张一张地选用插图。整个工作流效率低,不适合我目前采用的Markdown+PicGo+Wordpress 的文章发布工作流。

再来看《使用 PicGo+Typora+COS 搭建图床服务》方案,该文章展示的是图床的搭建和使用过程。通过进一步学习腾讯云COS 的用户手册文档文件发现,腾讯云COS 的服务本身就更适合纯粹作为图床使用,通过picgo 进行本地图片上传腾讯云COS ,获取图片的https 链接,实现安全访问和稳定的分流。

学习小结

《将 WordPress 远程附件存储到 COS》实际上是「插件方案」。纯粹在Wordpress 后台手动编辑图文的用户,安装这个插件就完全能解决问题。原本只能存储在Wordpress 媒体库的页面feature图片,通过「插件方案」可以存到腾讯云COS,能提升博客的访问速度。

《使用 PicGo+Typora+COS 搭建图床服务》方案实际上就是第三方图床分流原理,采用这个方案最大的优势在于:非常适合博主目前的工作流场景,仅需重新设置PicGo,替换原本在VPS 上自建的easy image图床,就可以实现全部文章图片外链到腾讯COS 实现分流。


注意事项

关于图片格式

网站加速速度更快的图片格式建议用.webp,腾讯云COS 有格式转换的功能,但是「图片处理」是收费服务。省钱做法:给博客站点使用的图,预先在本地批量转换成.webp,再图床上传腾讯云COS 。

关于腾讯云COS 的图片管理目录

使用「tencentcloud-cos」插件后,Wordpress 媒体库图片在腾讯云COS 存储桶里的文件会默认以year/month/date/图片文件名的路径存储,非常方便管理。

关于图片防盗链及安全相关

务必要在腾讯云COS 后台把自己的博客站点设置成白名单,通配规则可是*.yourdomain,例如我设置的*.2cweekly.com,那么我博客站点对存储桶里的所有图片读取请求都会安全通过。

另外,为了安全和不必要的经济损失,务必务必务必要把COS服务的配置完善。这里我就不展开了,如果要这么做,一定要仔细阅读官方服务的文档,把规则吃透避免经济损失。

关于CDN和流量保护

除了COS,还可以套CDN。我测试了一下速度,本身用对象存储的方案就已经可以秒开了,再套CDN主要还是为了防护自己的小鸡被攻击。有条件的可以把资源包买足,设置好流量封顶限制和限流管理,关联自己的即时通讯app,随时收到提醒,避免被恶意刷流量带来不必要的大额账单(这一点我专门咨询了鹅厂,他们是绝对不会保护、同情受害者的,吐槽完了账单还的照付)

关于CDN的方案,这里我说一个思路:可以把国内和境外流量分开。因为目前来看,恶意攻击大部份都是境外ip发起的,分流后可以抵挡一下这部分攻击。

国内流量:直接设置一个离你读者距离近的COS桶套CDN设置封顶和限流,常规操作就行。境外流量:可以套cloud flare 的免费版CDN,由于白嫖的CF加速节点回源走的是洛杉矶的服务器,所以我们的图片源也要设置在这里,因此,可以把国内方案的桶copy一个到腾讯北美的机房。这样做的成本就是增加一份存储费而已,非常划算。

总结

以上方案,经实测大陆和境外访问都很丝滑。算是初步学习了这么一个给Wordpress博客加速的小技巧。有兴趣的同学可以自己试一试。

BUT,最终本博还是没用使用这个方案。一来,本站没有任何商业诉求,纯粹用爱发电;二来,博主能力有限,经验不足,假设哪天小鸡被恶意刷挂了,最坏就是另起炉灶换机复活,也不至于被搞出一张鹅厂的天价账单来。


参考文章:
1.《将 WordPress 远程附件存储到 COS》
https://cloud.tencent.com/document/product/436/41153

2.《使用 PicGo+Typora+COS 搭建图床服务》
https://cloud.tencent.com/document/product/436/74373

3.《用量封顶配置》
https://cloud.tencent.com/document/product/228/41733

前一篇博文米兰时装周FW 2023 系列秀场review-2Cweekly#001
后一篇博文巴黎时装周FW 2023 系列随想–2Cweekly#002
「2Cweekly」是一个记录博主生活的Blog,也是一个面向时尚爱好者的Magazine。博主在这里记录每周工作、学习中的碎片化想法,并不定期加以整理,同时也会分享一些个人的兴趣、爱好。

留言评论

有何想法,欢迎留言
请输入您的昵称