多说 提速:js内页页脚加载、静态文件CDN

多说 提速:js内页页脚加载、静态文件CDN

最近为 Jeff的阳台 折腾着插件的提速工作。Jeff的阳台使用了多说评论系统,但多说的加载速度实在是不敢恭维(稳定性也一样),于是又邪恶地想到为多说提速一番,下面就将Jeff的成果写出来分享分享。Jeff 针对多说的提速目前只要在两个方面:js内页页脚加载、静态文件CDN。以下是以最新版本的多说插件(1.1版本)来提速。

js内页页脚加载

以前版本的多说,多说核心脚本embed.js默认所有页面加载,默认网页头部加载。最新版本的多说对于后面一项已经提供用户选择的权利了,在WordPress 后台-多说评论-高级选项 就有:

那么,是要解决“所有页面加载”的问题了。这一点多说插件并没有选项,而我们知道,评论一般在文章中(内页),如果在首页也加载,并不是一个明智的做法。要将多说核心脚本embed.js 只在内页加载,必须要对插件php 文件动手。打开插件目录的 duoshuo 文件夹,里面有个 WordPress.php 文件,打开,大概在581 行有那么一段代码:

<script type="text/javascript">
var duoshuoQuery = <?php echo json_encode($this->buildQuery());?>;
duoshuoQuery.sso.login += '&redirect_to=' + encodeURIComponent(window.location.href);
duoshuoQuery.sso.logout += '&redirect_to=' + encodeURIComponent(window.location.href);
</script>
<script type="text/javascript" src="http://static.<?php echo self::DOMAIN;?>/embed.js" charset="UTF-8" async="async"></script>
<?php 
	}

只在内页加载的话将上面代码替换为如下:

<?php if ( is_single() || is_page() ) {?>
<script type="text/javascript">
var duoshuoQuery = <?php echo json_encode($this->buildQuery());?>;
duoshuoQuery.sso.login += '&redirect_to=' + encodeURIComponent(window.location.href);
duoshuoQuery.sso.logout += '&redirect_to=' + encodeURIComponent(window.location.href);
</script>
<script type="text/javascript" src="http://static.<?php echo self::DOMAIN;?>/embed.js" charset="UTF-8" async="async"></script>
<?php 
	}}

搞定!

静态文件CDN

在前台的话,多说插件一般加载有个js与css 文件——embed.js、embed.xxx.css(xxx为评论样式主题名称,最新版有该功能)。两个文件都是在static.duoshuo.com 这个二级域名下,该域名本身也有CDN,但Jeff 用站长工具“超级ping”查看了一下,加速节点才那么几个。于是Jeff 想到了用七牛云存储 来加速这两个静态文件。

熟悉七牛的应该知道怎么做了:在七牛后台新建一个空间,如Jeff新建了一个dstatic的空间,对应的七牛的二级域名就是 dstatic.qiniudn.com 。接着在空间设置 那里源站加速static.duoshuo.com 。

在此之前,先说说对于embed.xxx.css ,因为该文件是在embed.js(http://static.duoshuo.com/embed.js) 那里调用的,调用的代码在embed.js 是这么一行:

e != "none" && b.injectStylesheet(y + "/styles/embed" + (e ? "." + e + ".css?" + g[e] : "." + short_name) + ".css")

如果你将embed.js 格式化分析一下,你就会发现这么一句:y = "http://static.duoshuo.com",,好吧,我懒得分析这个与上面代码的关系了,下面只说修改方法:下载该embed.js 文件,在该下载的文件搜索 static.duoshuo.com (仅有一处),修改为七牛的地址(如Jeff 是 dstatic.qiniudn.com)。

然后将embed.js 改名为embed2.js (为了防止与七牛镜像的embed.js 起冲突),上传到七牛的空间里面。以Jeff的为例,在七牛的地址就是 dstatic.qiniudn.com/embed2.js 。

插件目录的 duoshuo 文件夹,里面有个 WordPress.php 文件,搜索“embed.js” 有两处结果,对应的代码是:

//第一处
<script type="text/javascript" src="http://static.<?php echo self::DOMAIN;?>/embed.js" charset="UTF-8" async="async"></script>
//第二处
 ds.src = 'http://static.duoshuo.com/embed.js';

上诉的url(http那段) 都改为七牛的地址,如Jeff 改为:http://dstatic.qiniudn.com/embed2.js

保存上传,搞定!

本次教程一个例子就是 Jeff的阳台 ,请自行前往分析。

评分:
当前平均分 4.56 (86%) - 9 个投票
云左主机 广告
10 条 评论
  1. 我把多说本地话了,JS和css全集成在主题中了

    3年前 回复
  2. 已经全部应用了这两项技术,明天看看效果如何,谢谢分享!下班了!

    3年前 回复
  3. 很好的技术,最讨厌无关插件在首页加载

    3年前 回复
  4. 暂时不用多说。。wumii也能真么干吧?

    3年前 回复
  5. 以前就想这么做,但考虑到更新什么的……现在发现多说等第三方评论全部都歇菜了,都停止更新了,起码更新速度和博客更新速度都历史最低很久了~所以终于下手来改了,哈哈~

    3年前 回复
  6. 我首页是最新的那篇文章全文加多说评论,懒得折腾了,不过还是谢谢博主分享这个技术,先收藏先。

    3年前 回复
  7. 首页不加载多说的想法真不错啊,已经用上啦~

    3年前 回复
  8. 怎么我改了好几次,认真地看了好几次,就是没改成功呢?wordpress.php一旦改成cdn地址就出问题呢?你有遇到过吗?

    4年前 回复
    • 没呀,现在在Jeff的阳台上运行得好好的

      4年前 回复
  9. 速度果然快了不少

    4年前 回复
发表评论