MinQueue

网页前端优化就是要越少文档越好。每个静态文档都需要额外的 HTTP 请求,很浪费时间。尤其是手机用户,延迟高,需要请求的时间更长。

优化目标

CSS 尽量缩小(minify)并串联(concatenate)成一个文件。JavaScript 也是一样,缩小并串联成一个文件。

通常,这样的过程需要手动的。事实上,有好多工具可以自动化这些过程。例如:Gulpjs 和 Grunt。

来到 WordPress,自己做的或者特制的主题当然可以做到这些优化。问题是,有些插件它有自己的 CSS、JS 文件。优化目标永远达到不了~~。难道我们又要手动在 WordPress 里注销加载这些加载的文件么?

MinQueue – WordPress 前端优化神器

下载:https://wordpress.org/plugins/minqueue/

使用方法

插件本身不会做任何事的,也不会自动优化。需要你手动一下。

1、在浏览站点时工具(admin bar)栏多出 MinQueue 的按钮,点击就会显示当页加载了哪些 CSS 和 JS 文件。

minqueue
前端加载了很多文件哦

 

2、来到 WordPress 后台『设置』> 『MinQueue 』。勾上『Enable helper』来激活 MinQueue。

minqueue settings
MinQueue 后台

 

如果要优化 CSS,就选『Enable style minification』,再输入这些加载 hook 的名称。例如 WordPress 2015 的主题,主 CSS 文件就是叫做 twentyfifteen-style。

留意:

1、有些文件不是一样颜色的,就算优化也是分开加载的。橙色的文件是加载在<head> 里面。黄色则是加载在网页的底部。
2、有些文件是登陆后加载的,优化也没什么用,可以跳过。
3、不要优化 CSS Font,优化后位置跟原来的 font 文件不一样,会失败加载 font 文件的。

优胜之处

W3 Total Cache 也有类似优化功能,但是它好难配置。还有,它的优化是计算后再输出。MinQueue 的优化则是生成静态文件,然后自动帮你注销加载前端文件。

如果你的主题的 CSS、JS 是硬编码进去的,MinQueue 会发现不到文件的。MinQueue 只针对 enqueue 方式,请参考官方文档:wp_register_scriptwp_enqueue_script

Published by

Galovia

九十度博客站长。