博客优化历程

行间小筑使用了著名的建站程序WordPress,并且在最初的便使用了由沃通提供的免费SSL证书。在博客的添加功能、维护与调优的过程中不免会遇到大大小小的问题,所以我在这里会持续更新我是如何解决博客的一些问题。注意,我不会在这篇文章里放置大量的实现代码,更多的会描述解决问题的过程。

行间小筑有的本地(开发测试)和线上(运营)二个版本,使用Git作为版本控制工具并托管到Coding.net。线上版本的文件权限是较小的,这样我的所有插件、主题以及WordPress的安装与更新,都需要通过本地来进行,再提交到Git并在服务端拉取,开发过程十分简单方便而且条理清晰。在建立博客的几周之后我建立了一个自有插件,专门用于给博客添加一些功能和改变一些原有功能,配合其他插件一起完成博客的所有功能。建立一个自有插件是十分必要的,我们无需修改WordPress核心(修改WordPress核心是愚蠢且糟糕的,除非你真的确定非这样做不可),WordPress强大的拓展机制足以让我们的插件覆盖到整个博客的任何角落。将自己开发的功能统一成一个插件十分利于管理和维护。

目前我的博客以自有插件为基础,辅以JetPack(部分功能)、SEO、七牛云、缓存、评论、备份和代码高亮插件,并从一款优秀漂亮的主题派生了自己的主题。

1 针对墙的优化

由于GFW对Google、WordPress、Gravatar.com等网站的封锁,会导致使用Google APIs CDN的WordPress核心、插件和主题的JavaScript、CSS和字体资源无法加载,导致页面响应速度过慢。WordPress的用户头像依赖于Gravatar.com(根据用户的email提供响应的头像服务),而头像图片无法加载也会导致页面响应速度过慢。

所以我们应该从上述几点着手,将主题依赖的Google APIs替换到国内可靠的前端公共CDN上,禁用掉一些被墙的插件功能,如JetPack插件的很多功能依赖wordpress.com/wp.com,我直接关闭了很多功能,只使用我需要的Markdown及其他一些可用的功能。

1.1 替换Google APIs

目前国内有一些前端公共CDN库,如360CDN做到了完全镜像Google APIs,但是它不支持HTTS协议。某些支持HTTPS协议的公共CDN却又没能做到完全镜像,增加了使用的复杂性。如果你的博客是非HTTPS网站,建议直接使用360 CDN。如果你的博客像我一样是HTTPS的,我推荐使用中科大CDN。它支持http(s)的全量Google APIs镜像,你只需要为引用的URL替换host便能够轻松使用。使用说明:https://servers.ustclug.org/2014/07/ustc-blog-force-google-fonts-proxy/

  • 你需要替换WordPress默认使用的Open Sans字体
  • 你需要替换第三方主题可能使用到的Google APIs

1.2 如果你使用Jetpack插件

  • 你需要移除JetPack插件对 devicepx-jetpack.js 引用
  • 仅仅保留你需要的功能,并测试当前启动的功能是否使用了墙外的服务

1.3 关于Gravatar.com头像服务

在我的博客中并没有禁用Gravatar.com头像,一是因为Gravatar.com头像确实非常的方便,能够让我直观的看到评论者的头像;二是修改这一功能需要修改WordPress核心,我认为这是极其糟糕的;三是它对页面响应时间的影响较小,而且我可以为头像做缓存来优化响应时间,所以我并没有禁用这一功能。如果你对禁用Gravatar.com头像感兴趣,可以搜索相关教程。

2 常用插件

2.1 Jetpack

其实安装这个插件最初的目的只是以为了它的Markdown功能十分强大好用,安装完了才发现有好多功能也是比较实用的。这个插件的很多功能都需要链接WordPress使用。如果是在后台还好,若是在前端访问会直接影响到国内用户的加载速度,影响体验,建议禁用这些功能。如果需要,可以使用其他独立的插件替换。Jetpack确实是WordPress下的最强大的插件之一,建议安装。

2.2 SEO

我使用的是all-in-one-seo-pack(多合一SEO集)插件,有关SEO相关配置在这里就不详述了。

我在这个插件里遇到了一个坑,就是这个插件会自动修改404页面标题,需要注意下。

2.3 代码高亮

推荐使用 Crayon Syntax Highlighter 插件, 这款高亮插件选项、代码样式、支持语言十分丰富, 最重要的是通过简单地配置就能够和Markdown插件完美配合。某些高亮插件并不能和Jetpack提供的Markdown功能完美配合(Mardwon 使用三点形式标记代码),会出现代码标签被HTML转译的情况,在不修改插件的情况下只能提前在文章中使用一次[code][/code]形式才能禁止代码符号到HTML的转译,所以推荐这款插件。

2.4 备份

网站的备份我使用了 BackWPup 插件,这个插件能自定义自由度非常高的备份任务,可以被分到文件夹、FTP、Dropbox、Amazon S3、Microsoft Azure、Rackspace Cloud Files、SugarSync和E-Mail,备份内容和打包格式也可以配置。这个插件的备份方式有5种: 手动、借助WordPress的Cron、借助EasyCron.com提供的定时服务触发WordPress的Cron、提供一个用于执行任务的WordPress的Cron链接, 最后一种:利用WP-CLI工具在命令行执行WordPress Cron(该种方式默认支持,不与上面4种方式冲突)。手动备份过于繁琐,剩余3种都过于依赖WordPress提供的基于HTTP请求触发的Cron,任务的执行时间还是具有不确定性,如果你不能使用WP-CLI且不能在你的主机上建立Cron任务,那么我推荐借助EasyCron.com提供的服务来触发WordPress Cron。

WP-CLI的使用方法比较简单,首先下载这个工具并安装,然后在WordPress的目录运行这一命令(wp)就可以了。如果你使用Root用户运行命令, 需要附加 --allow-root 选项。http://wp-cli.org/

安装

在WordPress目录运行

Crontab 计划任务的例子

该任务会在每天的3:00与12:00执行备份, /blog-paht 是我的博客项目在文件系统的路径, 最后的”1″是我建立的backwpup任务的任务号。你可以在WordPress目录使用下面的命令查看任务列表:

3 主题与内容

3.1 放置网站备案号

WordPress中文版是默认支持网站备案号设置, 但是它只能在默认的主题里显示。如果使用第三方主题,可修改主题的footer.php文件中的版权声明区域, 使用 get_option( 'zh_cn_l10n_icp_num' ) 来获得备案号。架设在大陆的个人博客声明备案号还是很有必要的,比较规范的做法是将备案号连接到工信部的查询网站。

3.2 添加第三方统计代码

第三方的统计代码有利于我们监控和分析网站的流量,常用的第三方统计有CNZZ站长统计、百度统计和Google Analytics分析。鉴于Google Analytics被墙,访问速度并不是很明朗的情况,推荐面向国内的博客使用百度统计或站长统计,二者各有优点和差异。我选择了同时使用了百度统计和CNZZ。这样可以让我从各种角度俯瞰我的网站浏览过与受访情况,并能够比对2种统计的差异。我认为这些优点远远的大于加载2种统计带来的微小的加载速度的损失,对访客的体验影响也较小。

我在自己的插件中实现了这一功能。跟放置网站备案号比较类似,我向管理后台的常规设置中添加了一个字段用来保存统计代码,使用 add_filter("wp_footer") 向页面底部添加统计代码。这样做(不是修改主题)的好处是统计代码的功能不依赖于主题。需要注意的是统计代码一般是一些html标签和JavaScript代码,请不要在存取输出的过程中转译它们。

3.3 添加转载版权声明

行间小筑坚持写原创内容,在其中附加转载声明及版权声明有利于在转载的过程中提升博客和原始页面的访问量,这也是对自己写原创的一种激励。如果在每篇文章中都手动注明转载版权声明,显然很麻烦,而且不能进行统一的管理。转载版权声明具有高度的相似性,所以我在自己的插件中实现了这一功能:可以在所有文章列表的快速设置中标记一个文章是原创文章, 在所有可能输出文章内容的地方,如果是原创文章,就按照已经设定好的模板在文章底部附加上转载版权声明。每个声明会附上文章的url,我使用了 str_replace() 函数将模板中 $link 的字符串替换为文章的url。

下面代码只是提示相关功能可能需要用到的钩子名。

3.4 添加分享代码

添加文章的第三方分享功能有助于提高我们的流量,能够给我们带来些额外的用户,而且分享这件事情本身也是很有意义的。专业的事情交给专人去做,这里我们直接使用第三方分享代码。

我仔细的对比了几家第三方代码,只有百度分享的图标样式比较多而且看起来还不是那么老旧。它们的缺点就是不支持HTTPS。让网站支持第三方代码很简单,与添加第三方统计代码和转载版权声明差不多。

为了让我的HTTPS站能够使用HTTPS版本的第三方分享代码,我使用了“代理”的方法让我的博客自动缓存非HTTPS内容,并将静态文件同步至七牛云CDN,有关这个功能的具体开发我将在 代理非HTTPS内容 一节中具体描述。

4 缓存和CDN

行间小筑使用了 W3 Total Cache 作为缓存插件,启用了页面缓存、数据库缓存、对象缓存及浏览器缓存管理,分别存储在Memcache和硬盘上。

我选择使用了七牛云来加速博客的静态文件。因为七牛云每月有一定的免费额度可以使用,足够支撑网站目前以及未来很长一段时间的流量,七牛云CDN的配置也十分简便。最重要的是,七牛云支持部署SSL证书,提供HTTPS访问。这里简要介绍下配置过程:

首先在七牛云建立一个bucket,创建CDN加速并绑定域名 static.panlatent.com, 配置源站为七牛云空间。设置这个bucket镜像源为https://panlatent.com/。(需要注意的是:当bucket镜像的方式工作,只会在第一次没有源文件的情况下会到源站获取文件。除此之外,不会主动刷新文件,除非手动删除镜像文件)

然后可以使用 WPJAM 七牛镜像存储 插件配置CDN加速。具体可以参考插件作者我爱水煮鱼提供的参考PDF《七牛镜像云存储WordPress插件使用指南.pdf》

使用七牛云犯过的错误

  • 更改七牛云CDN的配置时需要很长时间(最久一天)去配置生效,这段时间几乎做不了任何事情,所以初期配置CDN时一定要谨慎。

  • 为了保证CDN资源尽量不被恶意引用(:D 防患于未然),我设置了防盗链功能,但是配置白名单的时候七牛是将 panlatent.com 和 *.panlatent.com 两个配置区别开的,我错写了泛域名导致1天后才能更改和生效正确到配置。

5 有关HTTPS的几点问题

我遇到的HTTPS问题几乎都集中在HTTPS点站对非HTTPS资源的引用上。使用Chrome浏览器,出现这一情况的明显的特征是浏览器开发者调试工具控制台会给出警告,失去小绿锁标志。如果我们能直接替换到HTTPS资源,这是最简单直接的方法。但是很多的非HTTPS资源,例如JavaScript、CSS文件都有其他资源的引入。为了处理这一问题,我为我的博客编写了代理非HTTPS内容的功能,可以实现将网络资源下载并缓存到本地(服务器),并输出内容(按一定规则替换相关引用,原样输出HTTP头)。

5.1 代理非HTTPS内容

后台设置页面
后台设置页面

为了简化调用,我利用了Nginx的重写功能将目录式的URL转换为目标地址的URL参数。在程序获取到目标URL之后,会判断目标Hostname 是否在配置的白名单中(防止恶意调用),如果通过白名单验证,则会询问是否缓存源文件,如果不存在缓存才使用CURL下载远程源文件。然后使用配置的替换规则将可能存在的资源引用替换为代理连接。

一些JavaScript可能存在对非HTTPS的动态请求,如果这些请求不是必要的,在我的插件中可以禁止缓存动态请求的内容,甚至将这些代理的请求伪造为空白内容。这样做可以降低代理功能消耗的资源。

5.2 如何做到引用不支持HTTPS的百度分享

现今的所有国内的第三方分享服务都不支持HTTPS协议,我选择百度分享的主要原因是百度提供的默认图标样式比较统一和美观。百度分享需要在网页引入一段JavaScript代码,去百度加载百度分享的主代码,并且整个分享功能的JS代码是一以模块划分的。此外每次加载分享代码时还会请求一次用于统计的URL。我将默认的分享代码的链接改为 https://panlatent.com/proxy/http/baidu.com 的形式,这样第三方分享功能就会使用我的代理(HTTPS)功能获取到外部资源。我使用了正则将百度网址替换为代理网址的形式,并且专门针对百度分享做了一些特殊的规则。例如,将代理分享统计的请求输出空内容,这样代理功能并不会真的进行资源请求,只是简单的输出空内容。

我尝试了使用七牛云CDN存储我的代理文件,但是尝试了几天失败了。镜像在CDN节点上的百度分享代码模块化加载总是不完全,而由于这些JavaScript代码是经过压缩和精简的,我不太好阅读,另一个原因是因为部署在CDN上的资源刷新需要漫长的时间,即使利用七牛云提供的限额刷新功能,对于调试来说也十分漫长,所以我最终还是使用了源站资源。如果你对此有什么研究和建议,欢迎讨论!我也会不断的尝试实现和优化这一功能。

还有一种方式是直接使用类似七牛云的镜像功能,镜像百度分享。做镜像实际上是比较简单的,但是仍要进行一些简单的字符串替换。为了增强对其他非HTTPS引用的普适性,我并没有使用这种方法。

感言

行间小筑的建立离不开国内云主机的先驱者阿里云提供的云主机,离不开国内证书提供商对SSL免费证书的推广,离不开强大的WordPress,感谢一众博主的技术博客,是他们孜孜不倦且低调内涵的原创内容鼓励着我。进行博客开发的过程使我意识到了对相应场景进行优化开发的重要性。在写作原创文章的过程中,我知道了将脑中知识转换为文字是比较困难,对一个人的知识水平、写作功底、总结能力等都是很大的考验,而且坚持也是十分重要的。我会继续且持续的将我遇到的问题和所感所悟记录在我的博客上,分享给自己,分享给大家。

从没有一个时代可以如此愉快的学习编程,有着如初优厚的资源和环境,有着如此强进的朝气和动力,愿与君努力,用代码 ———— 改变世界!

感谢你的阅读!本文系原创文章,出自 行间小筑 并遵循 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证),转载时请注明出处和本文链接:https://panlatent.com/archives/blog-optimization-process

发表评论