MENU

说说主题的云存储优化功能

• March 23, 2019 • Read: 909 • 教程

这个功能放出来大概也有两年的时间了,但是一直没有详细的介绍它,这两天我想了一下,主要原因大概有两个,一个是懒,另一个是懒。

不过随着主题的更新,云存储优化功能也越来越完善了,所以,趁着现在有空,刚好拉出来讲一讲。

功能简介

先来说说这个功能是干什么的吧。

云存储是第三方托管的在线存储服务,其在全国乃至世界范围内都有大量的 CDN 节点,用户在访问相关资源时会被分配到就近的 CDN 节点,因此在访问速度上通常比我们单台服务器要好很多。常见的云存储服务有七牛云存储、又拍云存储、阿里 OSS、腾讯云存储等,鉴于本主题就支持这四个,所以其他的就当做不常见吧::quyin:1huaji::

到了主题这边,简单来说,云存储优化功能,就是可以把博客上除了页面的 HTML 以外的静态资源全都通过云存储进行加载,包括主题的 JS、CSS、字体、表情图片文件,以及文章正文内图片、头图等图片资源(第三方的插件里的资源文件不包含在内),通过云存储加载这些静态图片,可以加速网页的访问速度,特别是对于一些服务器在国外的朋友。

这是云存储优化最基本的功能。在此基础上,主题还提供了以下功能:

1. 为文章中的图片自动转换合适的大小和格式

主题可以根据用户使用的设备,自动调整头图及文章内图片的大小,在保证图片质量不受影响的前提下,降低图片的尺寸,大大节约手机用户的流量,提高页面加载速度。

该功能可以在手机设备上加载小图,电脑设备上加载大图,因此,你在文章等其他地方使用图片时,丝毫不用在意图片尺寸对于页面加载速度及页面大小的影响,直接无脑上最大尺寸图片即可。什么?几 M 的原图?照样给你安排的明明白白。

2. 启用 WebP 图像格式

「启用 WebP 图像格式」功能可以在支持 WebP 的浏览器上使用 WebP 格式的图片,可以以较小的图片大小获得相同质量的图片(相较于 JPEG),进一步提升页面加载速度,减少页面大小。

WebP 可以用于 Chrome 等浏览器下,详细的浏览器兼容情况可以到 CANIUSE 上查看:

WebP浏览器兼容情况

关于 WebP 的更多介绍,可以参考这里:

3. 图像加载动画

图片加载动画就是图片在加载过程中的动画效果,包含了首页及文章主图、文章列表图片、文章内容图片等。

图片加载动画可以使图片在加载过程中也有较好的观感,在图片资源加载速度较慢时尤为明显。

另外文章内容图片在加载的过程中,可以根据文章大小生成占位,不会有图片在加载过程中导致的文章内容高度变化,避免了加载过程中的文章内容跳动等。

具体的效果可以看一下下面的视频:

使用说明

好了,说了这么多废话,关键的地方到了。

1. 设置镜像存储

镜像存储服务是一种快速的数据迁移和加速服务。可以帮助用户实现无缝数据迁移。它实现的功能是用户在访问镜像域名上的一个资源时,云存储会先检测该资源在云存储服务器上是否已经存储,如果有则直接返回,没有的话,会根据路径到源站(也就是你的博客)获取对应的资源,然后返回给用户。除了用户第一次访问时要回源速度稍慢,后面就会完整发挥 CDN 的优势,速度都会非常快。

举个栗子,假如我博客的域名是 https://get233.com,配置的镜像存储域名是 https://assets.get233.com,那么,在第一次访问下面这个链接时:

https://assets.get233.com/path/to/whatever/pig.jpg

镜像存储就会到下面这个地址获取内容, 然后返回给用户:

https://get233.com/path/to/whatever/pig.jpg

后面镜像存储已经存储了这张图片时,就会直接返回给用户,速度很快。

配置镜像存储的方法如下:

配置完成后,将配置的「CDN 镜像加速域名」复制然后准备填入后面的设置中。

后面的操作都非常简单,只要到主题外观设置里配置相应的设置就可以了。

需要注意的是:该功能依赖插件,因此必须安装并启用主题自带插件才可以使用。

2. 配置 CDN 镜像加速域名

前往 主题外观设置里 => CDN 镜像加速域名 ,配置 CDN 镜像加速域名:

CDN 镜像加速域名

这里的域名就填你第一步配置中的「CDN 镜像加速域名」。

3. 配置域名的云存储类型

前往插件设置中,配置如下选项:

插件设置

其中,自定义 CDN 域名的是告诉 Mirages 哪个域名是云存储域名,然后他是七牛还是又拍什么的。参照说明配置即可。

如果你使用的是又拍云存储,且你变更了又拍云存储的间隔标识符,则配置第二个设置,否则,第二个设置保持默认即可。

4. 开启云存储优化功能

前往 主题外观设置里 => 云存储优化 ,配置云存储优化功能:

云存储优化

这一步很简单,把需要的功能选项启用即可。

5. 图片加载动画

前往 主题外观设置里 => 图像加载动画 ,开启图像加载动画:

图片加载动画

啊,同上。开启了这个功能,图片加载动画就可以用了。

最后

最后就没有了,去试试功能好不好用吧::quyin:1huaji::

Last Modified: May 18, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

12 Comments
  1. WebP真是个好东西::quyin:1huaji::

    1. @左岸是鸭::quyin:1huaji::