多说评论不稳定,加载速度慢优化方法

多说评论不稳定怎么办

我为什么最后没有放弃多说

相信不少正在使用多说社会化评论系统的博主和我遇到同样头痛的问题,就是多说系统偶尔会抽风,服务器器不稳定,加载速度慢,甚至有时候多说js与css文件加载失败,导致多说评论框无法显示,多说分享无法正常使用等等。或许你会建议我使用其他第三方社会化评论系统,其实第一次听说要换社会评论系统我是拒绝的,因为,你不能让我换,我就马上去换,后来尝试了两三个其他第三方社会评论系统后,我还是用回了多说评论,原因有三:

  • 多说是我个人觉得最好用的第三方评论托管系统,没有之一。多说作为国内比较老牌的第三方社会化评论服务商,其用户数量要比其他评论系统庞大,功能比较完善,支持新浪微博、QQ(腾讯微博和QQ空间)、人人、开心、豆瓣、网易微博、搜狐微博、百度等多帐号登录并评论功能,它还有众多实用特性,如支持多种社会化账号登录,回复提醒,多说自定义样式css,评论支持标记喜欢,与社交网站紧密结合,手机界面深度优化适配,还有最新的多说分享,功能强大且永久免费。我比较看好多说的有下面几点:
  1. 支持的社会化账号实在太全面了,多说可以更好地增加用户与网站、用户之间的交互和黏性;
  2. 手机界面深度适配,国而内一些第三方社会化评论系统居然还需要PC端和手机端分开设置,多说在易用性上更胜一筹;
  3. 庞大的用户量;wordpress可以用多说,emlog可以用多说,typecho可以用多说,z-blog可以用多说,hexo可以用多说,Jekyll可以用多说。。。也许正是这庞大的用户量,多说服务开始有点跟不上了。。。
  • 别逗了,撤掉多说评论的话,我hexo站点以前的评论不久没了么。
  • 好吧,其实最让我不舍的是多说最近访客功能,这是其他社会化评论系统无法提供的。如何让你的博客支持多说最近访客可以参考我的这篇文章《动动手指,给你的Hexo站点添加最近访客(多说篇)》。

多说评论不稳定,加载速度慢怎么办?

把多说评论依赖的embed.js放置底部

Yahoo性能中心总结的高性能网站设计的规则提及,把Javascript脚本尽量放到页面底部加载,这里不多说。
wordpress多说插件提供了在网页底部插入多说核心脚本embed.js这选项供用户选择,比较人性化。其他博客程序的话可以把embed.js放置到主题的footer底部加载。这里以hexo静态博客程序,NexT.Mist主题举个栗子,这里需要修改的文件是duoshuo.swig,路径是your-hexo-site\themes\next\layout\_scripts目录下,将下面一段代码

1
(document.getElementsByTagName('head')[0]

修改成下面的代码

1
(document.getElementById('footer')

即可。

并不是所有页面都需要加载多说embed.js,一些没用上多说服务的页面就没必要加载了

如果在一些没必要加载多说embed.js的页面你却加载了,这样也是会影响页面打开速度的。hexo的next主题这方面就处理的很好。next主题仅仅在首页(首页文章评论数需要引用多说embed.js)和内页(内页多说评论和多说分享依赖多说脚本)加载多说核心脚本embed.js,其它页面概不加载,next主题不愧是《有那些好看的hexo主题? 》深受hexo博主欢迎的一个hexo主题,细节方面处理的很好,感谢主题作者iissnan。
顺便提一下,我的hexo网站留言是我在next主题基础上加的,因为用到多说评论和多说最近访客,所以也是需要加载多说核心JS的,hexo留言页具体实现可以参考我这篇文章《动动手指,NexT主题与Hexo更搭哦(基础篇)》

巧用七牛镜像存储实现多说JS和CSS静态文件CDN加速

这(shang)是(mian)本(zhu)文(yao)的(wei)核(le)心(S)部(E)分(O)!
多说在我们的网站前台主要依赖加载embed.jsembed.xxx.css这两个文件提供服务,其中embed.js是多说评论的核心脚本,多说样式embed.xxx.css也是靠这脚本调用加载的,而embed.xxx.css又包含多说评论样式和多说分享样式。这两个文件存放在多说static.duoshuo.com二级域名下,我们可以把这两个静态文件放在七牛云存储,获得更多的加速节点来加速这两个文件。利用七牛镜像存储实现多说静态文件CDN后,我们请求的是七牛加速节点,减少对多说服务器的请求,多少减少了多说服务器负担,越多站长加入,效果更明显,多说服务器也相对稳定些。
具体实现步骤:
1、 在七牛新建一个空间(还没七牛账号可以点击这里注册,有edu邮箱的可以参与青葱创业计划:凭edu邮箱免费领取七牛1000元抵用券),点击空间设置 > 基本设置 > 一键加速网站,镜像源地址填写static.duoshuo.com,提交
七牛镜像存储加速多说
加速成功后,可以通过七牛提供的空间访问域名访问到多说镜像网站,也可以自定义域名。我使用的是自定义域名araome.yiluup.com,访问结果
多说镜像网站
2、 下载多说核心脚本embed.js,需要更改一处地方代码,

1
function n(e){j.theme=e,"none"!=e&&o.injectStylesheet(j.STATIC_URL+"/styles/embed"+(e?"."+e+".css?"+R[e]:"."+short_name)+".css")}

上面代码应该是调用多说样式embed.xxx.css,我们需要修改成我们七牛镜像的多说样式,只需把j.STATIC_URL更改成七牛空间访问域名,例如我修改成""。更改后另存为dsembed.js(重命名主要防止与七牛镜像中的embed.js冲突)。最后上传到七牛空间里。现在你可以通过地址/dsembed.js访问经过七牛CDN加速后的多说核心脚本。
3、 把多说默认引入static.duoshuo.com域名下的embed.js更改成七牛空间更改后的dsembed.js即可。
这里以多说通用代码为例,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"araolin"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>

<!-- 多说公共JS代码 end -->

embed.js引入的代码是

1
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';

这里需要更改成

1
ds.src = (document.location.protocol == '这里是你的七牛空间embed.js的地址';

以我的为例,我更改成了

1
ds.src = (document.location.protocol == '/dsembed.js';

如果你是hexo Next主题的话,需要更改的文件是duoshuo.swig,具体路径在your-hexo-site\themes\next\layout\_scripts\comments目录里。
最后值的注意的是,如果你的https站点的话,需要在七牛云储存配置https,最后通过七牛提供的https://dn-yourdomain.qbox.me的域名访问多说镜像静态文件,具体实现就不赘述了。

多说静态文件经过七牛CDN加速效果

没加速之前,经百度站长平台网站速度诊断工具测试,多说dsembed.js花了接近两秒时间来加载;
多说CDN加速前
利用七牛镜像存储实现多说JS和CSS静态文件CDN后,再重新测试,足足省了1秒多。
多说CDN加速后

拓展

你还可以通过把你的网站镜像到七牛,而七牛具有cdn加速功能,从而加速你的网站,详情参考镜像存储与qrsync数据同步的使用,因为我的hexo不仅放在github pages,还同步放在gitcafe pages上,访问速度还OK,就不折腾这个了。