插件“Asset CleanUp”解决 WordPress 前端页面 CSS/JS 文件资源下载数量过多而导致的网页阻塞和渲染速度慢的问题，对于访问速度的优化和降低服务器的压力方面，它是专业的。 这就是一款实属难得的 WordPress 访问速度优化插件。
前言
前提条件——过于臃肿
众周所知，WordPress 因为越发强大的插件系统和生态环境，导致其核心代码规模越来越庞大，甚至有人说臃肿。
就因为服务器端程序的庞大和大量插件和主题自带和生成的各种 JS 和 CSS 文件的加载，使得 前端发出的 HTTP 请求量过大，于是便 拖慢了系统的整体访问速度，降低了用户体验的分数。
也可以这样说，运行一个 WordPress 站点，如果 没有经过优化，访问速度慢，那么访问的用户体验可以说是极差的。
“Asset CleanUp”顺势而为
在这种大环境下，一些专门优化 WordPress 站点前端静态资源的插件应运而生，其中就包括本文的主角—— Asset CleanUp。
WordPress 插件“Asset CleanUp”用于改善前端页面静态资源的文件数目和文件大小，以及还有一些小功能，禁用一些一般情况下没必要用的页面元素和特性，例如禁用 Pingback、XML-RPC、谷歌字体等等。
优化的本质
Asset CleanUp 压缩和合并 CSS 和 JavaScript 文件，以使这两种文件的体积变小，以及经文件之间按一定规则的合并操作，使得前端网页的 CSS/JS 文件的数量极致地减少。
这一组合拳打一通，使得 WP 站点前端页面的 HTTP 请求数量大幅减少，并且使这 CSS/JS 代码或文件导致的 阻塞得到优化，这也是 加速优化了网页的加载和渲染速度的根本原因。
应用文件的缓存
Asset CleanUp 把 CSS/JS 代码和文件 经压缩和合并处理，然后把处理后的代码放进缓存文件中，再就是把缓存到的文件取出将 URL 放置到响应给前端的 HTML 文档中，这是使用 该插件会降低前端网络请求数 的根本原因。
插件主页： https://wordpress.org/plugins/wp-asset-clean-up/
本文分为两大部分，这是上篇。上篇的前面写的是使用“Assets CleanUp”的原因和该插件的加速原理，然后是安装插件的方法，再就是一些全局的基础设置，后面部分写的是对 CSS/JS 代码和文件的核心优化设置。
安装插件“Asset CleanUp”
这次通过管理后台在线安装插件。
导航至“插件（Plugins） -> 添加新插件（Add New）”。
然后搜索“Asset CleanUp”。
这个搜索结果是想要的插件：
点击图片查看大图
配置“Asset CleanUp”
该插件的主要功能是缩小 CSS/JS 文件的体积和减少前端的 HTTP 请求数。
除此之外，它还附加着一些实用的小功能。
诸如“隐藏 WordPress 的版本号”、“移除谷歌字体”、“禁用 XML-RPC”、“全站禁用 Emojis”、“禁用 oEmbed”等等，很多很多好用的小功能。
笔者在这里挑些设置来讲解，因为篇幅有限，并且有些配置需要收费版才支持，或者读者自己一看就懂，自然便不必赘述。
导航至：“管理后台 -> 左侧栏 -> Asset CleanUp -> Settings”。
Stripping the “fat”（去除脂肪）
该选项界面的文字主要描述插件的宗旨和其他的注意事项，看完明白就好。
把底部的形状打开表示你明白以上文本的意思，了解清楚使用该插件来进行 CSS 和 JS 文件优化的原理和注意事项。
然而这个开关并没有实际的其他意义。
依照惯例，打开此开关，点击它变绿就是了。
然后点击“Update All Settings”按钮保存设置。
Plugin Usage Preferences（插件使用配置）
常规设置与文件管理。
选择资源的检索方式以及你是否希望在仪表板/前端视图中查看它们；根据你的喜好决定 CSS 和 JavaScript 文件的管理列表将如何显示和排序。
Manage in the Dashboard（在仪表板管理资源）
其实这是设置在管理后台的文章编辑页面的资源管理选项。
仪表板显示资源列表
这将在仪表板中编辑文章（任何类型）/页面时在元框中显示资源列表。
“Asset CleanUp”的其中一个原理是调用 AJAX 来获取 Page/Post 的 URL，然后提取在队列中所有的 CSS 样式和 JS 脚本。
有时“Dashboard”并没有加载资源列表，这应该与 Apache 的相关配置有关，或者一些安全插件屏蔽掉 AJAX 请求。如果此选项不起作用，请考虑在前端视图中管理列表
（导航到：“后台管理界面 -> 左侧栏 -> Asset CleanUp -> Settings -> Plugin Usage Preferences -> Manage in the Front-end”）。
检索方式
“Select a retrieval way”选择其中一个即可，它们各有优缺点。
在文章编辑界面显示资源列表
如图：
点击图片查看大图
勾选“Show”则显示，否则不显示。
“Fetch the assets automatically and show the list (Default)”表示自动显示资源列表，这是默认值。
笔者要选择的是下面一个：
“Fetch the assets on a button click”，这样做可以避免文章依赖过多的资源而导致占用太多界面的地方，当然，有必要用时就点击按钮。
此时，文章编辑页面显示：
点击图片查看大图
下面是选择不显示上述元框（Meta Box）的文章类型：
点击图片查看大图
按需选择吧。
Manage in the Front-end（在前端管理资源）
如果你已登录，这将使资源列表显示在你查看的前端页面（主页、文章或页面）下方。
该区域依赖wp_footer()函数在前端显示，用此函数的主题就可以在登录情况下显示资源列表。
按需要选择，然而勾选它，可以在前端界面的下方显示该文章页面要加载的 CSS/JS 文件，并管理它们。
但，若在文章页面 URI 中有下面文本框中指定的网址参数，那么则表示不显示资源列表。
点击图片查看大图
在管理员登录之下，前端页面最下方显示资源的列表，
点击图片查看大图
Allow managing assets to（允许谁管理资源）
只有选定的管理员才能访问插件的 CSS 和 JS 管理器。
“any administrator”表示任意的管理员；
“only to the following administrator(s)”表示按需选择一个或多个可访问的管理员。
Assets List Layout（资源列表布局）
决定如何查看排队（列表）的 CSS 和 JavaScript 列表。
按需选择，并可尝试多几次，找到喜欢的：
点击图片查看大图
当选择默认值时，可选择插件资源列表时的显示状态：
- “Expanded (Default)”：表示展开的。
-
“Contracted”：表示收缩的。
这里设置的是仅仅是插件资源列表会展开或收缩，接下来这个都是全部按任何分组方式皆可设置的资源列表状态。
On Assets List Layout Load, keep the groups（在资源列表布局加载时，保留组）
有时，当编辑页面中有大量元素时，你可能希望在查看页面时收缩资源列表，因为这样可以节省空间。这是一个很好的做法，尤其是当你完成页面优化并且不想每次编辑页面时都看到一长串文件时。
还可根据你的偏好单独扩展和收缩的组中的资源行。
说到底，此选项就是按组列出资源时，选择默认是否收缩或展开。
On Assets List Layout Load, keep “Inline code associated with this handle” area（在资源列表布局加载时，保留“与此时关联的内联代码”区域）
该选项决定资源列表中与每项资源相关联的内联代码的展开状态。
默认是收缩，可选择展开。
Input Fields Style（输入框样式）
设置如何查看复选框/选择器。
默认值（Enhanced iPhone Style (Default)）的效果：
- 未选中：
点击图片查看大图
-
选中后：
点击图片查看大图
设置为“Standard”的效果：
点击图片查看大图
如果你不常用此插件，并且想给顶部管理栏腾出空间，那么你可以勾选此选项。
如果你的顶部管理栏充满了太多项目并且你很少使用该插件，这可能很有用。
或者，在下面的勾选框，还可以隐藏管理后台左侧栏的“Asset CleanUp”菜单，勾选之后，它会在后台左侧栏的“设置（Settings）”中出现。
除非左侧栏太过于拥挤，否则不建议隐藏它。
一般情况下不勾选，保持显示状态。
Hide WordPress Core Files From The Assets List（在资源列表中隐藏 WP 核心文件）
在资源列表中隐藏 WordPress 的核心文件。
只有经验丰富的开发人员确信在特定情况下不需要它们时，才应卸载它们。 如果你不确定是否需要它们，最好让它们加载。 通过将它们隐藏在资源管理列表中，你将看到一个更小的资源列表（更易于管理），并且你将避免错误地更新与任何核心文件相关的任何选项（卸载、异步、延迟）。
Allow Usage Tracking（允许使用追踪）
是否允许使用追踪。
是否允许 Asset CleanUp 匿名跟踪插件使用情况以帮助开发方改进插件。不会收集任何敏感或个人数据。
一般不开启。
Fetch assets’ caching information from（从哪里获取缓存信息）
决定从哪里（磁盘或数据库，亦或者两者一半半）获取缓存数据。
Clear previously cached CSS/JS files older than (x) days（清除多少天之前的缓存）
清除以前缓存的 CSS 和 JS 文件。
设置个天数，若是设置为 0，那么意味着会删除所有以前的资源文件。
就是说，当执行“清理 CSS/JS 文件缓存”之后，这个天数之前的文件缓存将被删除。
点击图片查看大图
之所以要设个时间，是因为有些站点使用了网页缓存技术，若资源缓存文件清理之后，缓存的网页还没有得到最新的 CSS/JS 文件 URL，那么会导致问题，网页可能会显示不正确、JS 报错、或者缺少样式。
设置哪个值，由管理者决定。
不过，笔者保留默认值（15），到需要时再调整。
Do not load the plugin on certain pages（在指定的页面不加载插件）
设置哪些确定的页面不加载该插件。
可用 PHP 函数preg_match()兼容的正则表达式来指定文件的相对路径。
一行一条规则。
点击“Update All Settings”保存修改。
最终设置：
总览 01：
点击图片查看大图
总览 02：
点击图片查看大图
总览 03：
点击图片查看大图
总览 04：
点击图片查看大图
Test Mode（测试模式）
测试模式。
在你完成插件设置并卸载无用的 CSS 和 JavaScript 时，让你的访问者在没有任何资源清理设置的情况下加载网站！
开启“测试模式”后，只在有管理员登录的页面上启用该插件，而普通访客在前端禁用该插件，这时相当于没有激活该插件。
最重要的是，启用该模式避免了上线的网站在前端因该插件的配置而出现错误，无论是样式还是 JavaScript 脚本导致的。
测试时最好在浏览器的“无痕模式”。
笔者先禁用此模式，到需要时再开启。
Optimize CSS（优化 CSS）
导航到：“后台管理界面 -> 左侧栏 -> Asset CleanUp -> Settings -> Optimize CSS”
这部分对 CSS 样式代码/文件进行缩小和组合进行设置。
CSS Files Minification（CSS 文件缩小）
CSS 文件的缩小。
此选项有助于进一步减小页面的总大小。
该选项会将内联 CSS 代码、内嵌样式表（style 标签）和本地 CSS 文件进行缩小，然后将 CSS 文件缓存起来，将 style 标签里面的代码压缩成一行。
接下来说说附加选项，有三个附加选项：
- “LINK tags with “href” attribute (default)”（LINK 标签中的 href 属性，默认值）：
只缩小 LINK 标签指定的 CSS 文件。
-
“STYLE tags with inline CSS code”（STYLE 标签中的内联 CSS 代码）：
压缩内嵌样式表和内联 CSS 代码。
-
“All LINK & STYLE tags * both options”（同时压缩外部和内联的 CSS 代码）：
包括网页上所有样式文件、内联、内嵌模式表都会被压缩起来。
笔者选择“选项 3”。
还可以在下方的文本框按行输入不缩小的 CSS 文件。
支持 PHP Perl 兼容的正则表达式。
注意：
插件不会压缩以“.min.css”结尾的文件。
Combine loaded CSS (Stylesheets) into fewer files（将加载的 CSS 合并到更少的文件）
将网页上加载的 CSS 代码/文件组合成新的文件。
并把文件保存到 /wp-content/cache/asset-cleanup/ 目录，此目录由插件来创建和管理，如果它不可写，那么此设置将不会正常工作。
该选项有助于尽可能减少前端的 HTTP 请求，从而提高页面性能。
开启该选项，前端页面请求的 CSS 文件数量便大幅地降低，大多数情况下就只剩下一个 CSS 文件了。
选择 “Apply it only for guest visitors (default)” 意味着该插件仅适用于不登录的游客访客，此时游客浏览站点前端，CSS 文件将会合并。
下一个选项 “Apply it for all visitors (not recommended)” 指无论管理员登录时还是普通访客，都会在前端页面上组合 CSS 文件。一般不选用这个，因为会大幅增加占用的磁盘空间。
默认就好。
此外，还会扫描<head>和<body>位置的剩余 CSS 文件，若是还有，那么插件会分别生成两个组合成的 CSS 文件。它们各一个，分别分布到各自的位置。
此功能在以下的两种情况下是不起作用的：
- “Test Mode”启用的时候；
-
当 URL 有请求字符串（URL 参数）的时候。
建议启用组合 CSS。
下方文本框一行一个可由正则表达式组成的相对路径，以不合并指定的路径的 CSS 文件。
Inline CSS Files（内联 CSS 文件）
内联 CSS 文件，既是将大小小于指定 KB 的 CSS 文件内联到页面的 HTML 代码中。
点击图片查看大图
这与插件的“组合”，是相向而驰的，但又觉得合理。
这适用于本地（同一域名）的文件。
不仅有自动内联，而且可以手动设置需要内联到 HTML 中的 CSS 文件的相对路径。
就在正文的文本框中设定，一行一个文件路径，并且支持正则表达式（不用添加边界符 “#”）。
Cache Dynamic Loaded CSS（缓存动态加载的 CSS）
此选项启用之后的功能是：每当发出动态 CSS 请求时， 避免加载整个 WP 环境，并且缓存该 CSS 内容到文件。
在不使用动态 CSS 的一般时候，不开启此开关。
点击“Update All Settings”保存修改。
Optimize CSS 的最终配置：
设置总览 01：
点击图片查看大图
设置总览 02：
点击图片查看大图
Optimize JavaScript（优化 JS）
导航到：“后台管理界面 -> 左侧栏 -> Asset CleanUp -> Settings -> Optimize JavaScript”
作为“Asset CleanUp”的核心功能，对 JavaScript 代码缩小和对 JS 文件的缩小和合并是该插件最强的部分。
值得称道的是，与旧版本相比，今天的插件版本对 jQuery 的处理已经是一大进步。
总的来说，“Asset CleanUp”越来越好用了。
单单是对 CSS 代码和文件处理还不够，一个网页的结构中，CSS 代码要远比 JS 代码少得多。
因此对 JS 代码的优化（尽管只是对它进行压缩和合并）更影响着前端的性能和访客的浏览体验。
接下来的几个小章节是对 JS 代码和文件的处理。
JavaScript Files Minification（JS 文件缩小）
对 JS 文件的缩小是不精简代码的前提下减小页面总大小的好方法。
在“Asset CleanUp”，把缩小的 JS 文件保存到缓存文件目录中。
和优化 CSS 一样，对 JS 同样可以压缩本地 JS 文件和内嵌 JS 代码（script 标签包裹着的代码）。
和 CSS 不同，JS 代码每行有效代码的行尾可以没有分号的，所以还是保留嵌入网页 HTML 代码的 JS 代码，避免因没有分号而导致语法错误。
点击图片查看大图
所以笔者按上图的方式配置。
下方的文本框可填上你想不被缩小的 JS 文件的相对路径，可以使用 PHP 兼容的正则表达式。
对后面有版本号的 URL，版本号也会安排进新缓存文件的文件名中。
Combine loaded JS (JavaScript) into fewer files（合并加载的 JS 到更少的文件）
将加载的 JS (JavaScript) 合并到更少的文件中，有助于进一步减少 HTTP 请求的数量。
选择仅仅应用于普通访客（Apply it only for guest visitors），这也是默认值。
如果选择“Apply it for all visitors (not recommended) ”，生成的缓存文件将会使缓存目录的大小过大。
JS 文件被组合的时候，HTML 文档中内联的相关 JS 代码等内容也会跟着被放进缓存文件。
这样做可以减少浏览器渲染网页结构时的 DOM 元素的数量，并确保在延迟组合文件的情况下，来自内联标签的代码与来自文件的代码同时触发。
这部分接下来有两个选项：
- “Defer loading JavaScript combined files”：
把
defer="defer"属性放进<body>元素内有缓存文件 URL 的 script 标签，以延迟该缓存 JS 代码的执行。勾选该选项，做的是这件事。
但是也不是所有的情况都适合，比如笔者在使用中遇到的情况，勾选它会出问题。
因此笔者并不勾选。
-
“Wrap each JavaScript file included in the combined group in its own try {} catch(e) {} statement”：
插件以
try {} catch(e) {}语句包裹着合并进组的 JavaScript 文件（代码）。有的时间，这个选项也不一定有用，或者可能会出错。
总而言之，无论是前一个选项，还是当前选项，选择之前要多做几次调试。
访问前端，然后用浏览器的开发者工具的控制台查看有没有错误。
Good Luck！
然后，把无必要合并（或出错）的 JS 文件的相对路径填入文本框中。
必须要提醒的是：
若合并的是有“defer”或“async”的 script 标签的代码，那么会分别对应生成两个缓存文件。
若用户访问前端的 URL 有查询字符串的话，那么此选项会失效。
配置总览：
点击图片查看大图
Move jQuery Inline Code After jQuery library is called（移动 jQuery 相关的内联代码到 jQuery 调用之后）
移动 jQuery 相关的内联代码到 jQuery 库调用位置的后面。
请仅在浏览器控制台中显示与 jQuery 相关的 JavaScript 错误时才启用它。
此功能在加载 jQuery 的 HTML 标签之后移动任何这些内联 SCRIPT 标签，旨在修复“jQuery 未定义错误”。
该选项在以下两种情况应用：
- 你已将“jquery-core”移动到 BODY 以减少渲染阻塞资源，并且你收到“jQuery 未定义”错误，因为内联 jQuery 脚本在 jQuery 标签之前加载（通常是硬编码）。
-
jQuery 已经加载到 HEAD 中（这是默认行为），但是在 jQuery 库的脚本标签（来自插件或主题）之前打印了内联 jQuery 代码（例如，硬编码和不使用具有“jQuery”依赖项的函数 wp_add_inline_script()）。
综上，按需启用。
Cache Dynamic Loaded JavaScript（缓存动态加载的 JS）
缓存动态加载的 JavaScript。
请不要启用此选项，除非你有非静态（动态）加载的 JavaScript。
点击“Update All Settings”保存修改。
中途总结
这是本教程的上篇，主要写了 WordPress 速度优化插件“Asset CleanUp”的简要介绍，以及如何安装和配置该插件。
其中，本部分逐一详细地讲解了“Asset CleanUp”的基本配置，从插件在仪表板和文章编辑界面的资源及界的面显示方式，到 CSS 和 JS 代码和文件的缩小和合并的相关设置。事无巨细，对这些选项设置一一地进行了解释和使用说明。
下篇继续讲解 WordPress 速度优化插件“Asset CleanUp”的站点全站范围的选项设置，以及针对特定页面的资源管理（卸载或加载）。
《下篇》链接： WordPress 的前端性能优化插件：Asset CleanUp 使用教程-下篇。
鉴于本人的相关知识储备以及能力有限，本博客的观点和描述如有错漏或是有考虑不周到的地方还请多多包涵，欢迎互相探讨，一起学习，共同进步。
本文章可以转载，但是需要说明来源出处!
本文使用的部分图片来源于网上，若是侵权，请与本文作者联系删除： admin@icxzl.com