几个优化WordPress中JavaScript加载体验的插件介绍


本文整理自网络,侵删。

WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能。为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件。但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应、渲染)速度。本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript。

下面先简单介绍几个相关的优化 JavaScript 的 WordPress 插件及特点,然后演示如何处理一些特殊情况。

一. 优化JavaScript的WordPress插件
我曾经用过 WP Minify、Autoptimize、JavaScript to Footer这三个插件,下面一一介绍其特点。

1. WP Minify
这个插件将 Minify 引擎整合到 WordPress 中。一经启用,该插件就能够合并和压缩你的 JS 和 CSS 文件来提高页面的加载速度。

WP Minify 能够抓取生成的 WordPress 页面中的 JS/CSS 文件,将文件列表传递给 Minify 引擎。Minify 引擎处理后返回一个加强、精简并经过压缩的 JavaScript 或样式表文件(CSS),由 WP Minify 将其替换到 WordPress 页头中。

其主要特点是:

  • 易于使用;
  • 对 JavaScript、CSS 和 HTML 均有效;
  • 提供了调试工具;
  • 能够处理外部 JS 和 CSS 文件;
  • 能够排除指定 JS 和 CSS 文件;
  • 能够指定处理后的 JS 和 CSS 文件的位置(页头或页尾,甚至别的地方);
  • 可对处理后的 JS 和 CSS 文件添加过期时间等。


当 WordPress 3.1 测试版出来后,我发现 WP Minify 与之不兼容,会导致网站无法正确加载。

2. Autoptimize
也许将来 WP Minify 升级后会解决不兼容问题,但是我等不及了。后来找到了 Autoptimize 这个具有类似功能的插件,而且这个插件操作更简单。

Autoptimize 整合、精简并压缩所有的 JS 和 样式表(CSS)文件,增加缓存过期标志。然后将样式表文件放到页头(同样是为了提高页面加载效率),并将 JS 文件放到页尾。它还能够精简 HTML 代码,给你的页面瘦身。不过我觉得给 HTML 页面瘦身作用不是很明显,只要你的服务器开启了 Gzip 压缩特性就没必要这么做了。

默认情况下,Autoptimize 会按照上面介绍的方式优化所有 HTML/CSS/JavaScript 。

我个人觉得,Autoptimize 是比 WP Minify 更好用的 WordPress 优化插件。

3. JavaScript to Footer
这个插件写的非常简洁。我查看了源代码,完成任务的代码只有 6 个 WordPress 函数(见下文),也就是 6 行。所以这个插件从创建之后就怎么更新过。我一开始就因为见它最后更改日期还停留在2009年9月22日,所以把它给忽略了。

但是它仅仅优化 JavaScript 的加载位置,也就是将所有在 WordPress 中正确声明了的 Javascript 文件都给移到页面末尾来加载。它没有对 HTML 代码和 CSS 样式表文件作任何处理。

根据 JavaScript to Footer 的源代码,它使用下面的 6 行代码来完成工作:

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

如果有需要,可以在某个特定 WordPress 模板的 wp_head() 函数前加入下面的代码,将上述过程逆转过来,也就是使之失效,恢复成了本来的加载位置:

remove_action('wp_footer', 'wp_print_scripts', 5);
remove_action('wp_footer', 'wp_enqueue_scripts', 5);
remove_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_head', 'wp_print_scripts');
add_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_head', 'wp_enqueue_scripts', 1);

当然只是说某些特定的页面模板,如果是所有页面,那干脆禁用该插件好了 :D

阅读剩余部分

相关阅读 >>

wordpress如何安装,wordpress安装过程

wordpress与人人网文章同步操作教程

wordpress别名已被其它条目使用的解决方法

怎么给wordpress网站选择虚拟主机空间

wordpress 网站转移服务器操作的两种方法

在七牛云存储上部署wordpress站点的教程

wordpress菜单css类选项设置方法

wordpress固定链接伪静态的设置方法

博客建设需要做些什么?

wordpress使用外链图片作为文章缩略图的方法

更多相关阅读请进入《wordpress》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...