31℃
精品资源分享

wordpress优化加速,利用 jsdelivr 整站资源CDN处理

wp cdn 入坑 jsdelivr  3   今天看了很多文章   似懂非懂的感觉       调用明白了   只是如何同步   所以入坑 把这些文章都放一块  今天发的大都是

然后是这个博主的主题不错  Memory,如果喜欢可以自行去下载:https://github.com/ShawnZeng1996/Memory

 

 

 

最近又捣鼓起博客来了,选来选去还是选择了wordpress,之前也玩过,趁着自己有个小服务器就搭建套博客站:https://liubing.me,刚刚弄起来,还有不少问题,见怪不怪哈,进入正题,因为我的服务配置不太高,1G内存、2核心、20G固态,所以想的是能把静态资源CDN处理是最好的,恰好还知道国外一个免费的牛逼的CDN网站jsdelivr,没有酸酸乳(酸酸乳是啥??不知道百度下,不可多说)访问起来可能有点慢,但是他的CDN节点国内国外都很快,这点可以放心,然后配合Github,就可以把自己仓库的所有文件CDN处理了。

Github+jsdelivr资源CDN

建立Github仓库

可以先在Github上建立一个仓库,用于存放自己WP所用的主题,后续可以自己维护该主题,服务器上只需要git pull一下就行了,目前用的主题是Memory,如果喜欢可以自行去下载:https://github.com/ShawnZeng1996/Memory

仓库目录结构要如图所示:wp-content->themes->主题.gitignore是git过滤提交文件,因为这个仓库只维护主题静态资源,所以其他东西都排除掉了,git也不会进行该主题内的其他资源提交。

wordpress优化,整站资源CDN处理

jsdelivr CDN处理

重要的事情先说3边

仓库体积要小于50M 仓库体积要小于50M 仓库体积要小于50M

可以先看下他是怎么把仓库CDN处理的
https://cdn.jsdelivr.net/gh/作者名/仓库名/

最后的斜杠别忘了

wordpress优化,整站资源CDN处理

以我的仓库为例,仓库地址为:https://github.com/liub1934/LB-Blog
jsdelivr CDN处理的链接为:https://cdn.jsdelivr.net/gh/liub1934/LB-Blog/
等待一会,可能会出现503 或者超时现象,多刷新多试几次,成功后会出现如下

wordpress优化,整站资源CDN处理

目录挨个点进去,让jsdelivr把目录里的资源CDN处理,过程可能有点慢,会经常出现超时 503等错误,多刷新多试几次即可

服务器相关

因为我这个博客是新的,所以直接在服务器直接把仓库git clone下来了,然后把WP的其他文件全丢进去了,最后形成一个完整的WP程序,如图所示

wordpress优化,整站资源CDN处理

WP相关设置

进入后台安装插件WP Super Cache,博客必备的缓存插件,如已安装继续往下看
进入插件的CDN设置

  1. 开启CDN支持
  2. 添加jsdelivr地址,地址截止到master,如:https://cdn.jsdelivr.net/gh/liub1934/LB-Blog@master
  3. 添加包括目录wp-content,因为我们的主题是在这个下面的
  4. 排除一些其他文件,如果有其他需要拆除的文件可以写在这里,逗号分隔
    最后保存更改wordpress优化,整站资源CDN处理如果不出其他意外的话主题的静态资源已经CDN处理了,可以打开首页强制刷新下看看
    可以看到加载的是jsdelivr的CDN资源wordpress优化,整站资源CDN处理

    wordpress优化,整站资源CDN处理

这时候主题静态资源的CDN就处理完了,不过通过Network还可以看到加载了wp-includes里面的其他资源,这时候另外的一个插件jetpack就派上用场了,人气很高的一款免费插件,免费版够我们用了

jetpack插件相关设置

搜索插件名称把插件装上,最好登录下,可以做很多事情,具体有哪些好处可以自己看,其中个一个就是可以下载官方的一个App,随时随地管理站点写文章,这里就不介绍了。
打开插件设置面板jetpack->设置,找到最上面的性能和速度
打开启用站点加速器的开关,OK,最简单的一步了。
具体功能介绍可以看这里:https://jetpack.com/support/site-accelerator
通俗点就是把WordPress CoreJetpackWooCommerce的所有静态资源全部托管CDN,而且是全球的,访问速度也很快。

wordpress优化,整站资源CDN处理

wordpress插件问题

用了此方法后某些插件的静态资源可能加载不了,下面提供2中方法解决
1、将无法加载的插件静态资源按照插件现有目录形式传到上面所建立的仓库
2、在CDN设置中根据插件名关键词排除,这样就能正常加载了,只不过是走的正常加载路径。

wordpress优化,整站资源CDN处理

资源更新

主题静态资源全部CDN处理后,后面难免会出现经常改动的情况,改动文件push到仓库后,jsdelivr不会很及时的更新,所以这里可以根据commit的版本号来解决资源更新问题,每次有push更新后获取该版本号,如下的f761ea9f20048060889ee861d0ae31384dba66f0
https://github.com/liub1934/LB-Blog/commit/f761ea9f20048060889ee861d0ae31384dba66f0
然后将CDN的URL替换成下面的形式 https://cdn.jsdelivr.net/gh/liub1934/LB-Blog@f761ea9f20048060889ee861d0ae31384dba66f0

wordpress优化,整站资源CDN处理

对比下一开始添加的地址,只是把master换成了版本号。
https://cdn.jsdelivr.net/gh/liub1934/LB-Blog@master

结语

至此,整站站静态资源CDN处理完毕,还包括的后台管理的,不信可以打开控制台自己看看!
可能会有个别插件的资源没处理,但是影响不大。
效果可参考博主的博客:https://liubing.me
文章详情页面自己站点加载的静态资源一个没有全是CDN加载的

wordpress优化,整站资源CDN处理

赞(0)
未经允许不得转载:三十一度 » wordpress优化加速,利用 jsdelivr 整站资源CDN处理

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址