最新动态
WordPress 的前端性能优化插件:Asset CleanUp 使用教程
2025-01-03 06:43

众周所知,WordPress 因为越发强大的插件系统和生态环境,导致其核心代码规模越来越庞大,甚至有人说臃肿。

运行一个 WordPress 站点,如果没有经过优化,那么访问的用户体验可以说是极差的。

就因为服务器端程序的庞大和大量插件和主题生成的各种 JS 和 CSS 文件的加载,使得前端发出的 HTTP 请求量过大,于是便拖慢了系统的整体访问速度,降低了用户体验的分数。

在这种大环境下,一些专门优化 WordPress 站点前端静态资源的插件应运而生,其中就包括本文的主角—— Asset CleanUp

Asset CleanUp 压缩和合并 CSS 和 Javascript 文件,以使这两种文件的体积变小,以及经文件之间按一定规则的合并操作。

这一组合拳打一通,使得 WP 站点前端页面的 HTTP 请求数量大幅减少,并且使这 CSS/JS 代码或文件导致的阻塞得到优化,这也加速了网页的加载和渲染速度。

Asset CleanUp 把 CSS/JS 代码和文件经压缩和合并处理,然后把处理后的代码放进缓存文件中,再就是把缓存到的文件取出将 URL 放置到响应给前端的 HTML 文档中,这也是会降低前端网络请求数的根本原因。

插件主页:https://wordpress.org/plugins/wp-asset-clean-up/

在此插件中,CSS/JS 这些静态资源被称为“资产”(Assets)。

鉴于篇幅原因,本文被分割成三部分。

第一部分,主要内容是:

  1. 1. 前言:介绍 WordPress 站点在服务器端和前端两方面对于性能的要求;

  2. 2. 安装插件:介绍如何安装“Asset CleanUp”;

  3. 3. 对“Asset CleanUp”的使用进行全局的基本的配置:比如 WordPress 后台文章编辑页面显示资产管理面板、对资产管理的权限,以及一些对插件全局有影响的行为和样式的设置。

  4. 4. 测试模式:当你想只对于登录用户启用该插件时就开启它,这对于测试很有用。

第二部分,本部分涵盖着该插件的核心功能——对前端 CSS/JS 文件和代码的优化。以及选择性地对全站范围有影响的一些功能的关闭和启用。优化资产重点从两方面入手,其中之一是合并文件,另一方面是压缩代码。

第三部分,本部分继续第二部分的“配置“Asset CleanUp””章节,此章节也是本插件配置内容的最后一个部分。接下来是介绍如何去使用插件,也就是如何管理资产。

这是本文的第三部分。

第一部分:[WordPress 的前端性能优化插件:Asset CleanUp 使用教程-上篇]

第二部分:[WordPress 的前端性能优化插件:Asset CleanUp 使用教程-中篇]


通用的 CSS 和 JS 文件全站缷载。

该区域允许你为下面的 Javascript 脚本快速添加规则“Unload Site-wide”,这些脚本经常在 WordPress 环境中使用。

这些 JS 脚本是按需缷载的,如果你觉得现在没必要用,或者未来也不用,那么就可以任性一把,全部都禁用掉。

若要使用到,那请斟酌着禁用。

Disable Emojis Site-Wide(禁用 Emojis)

这将卸载 WordPress 的表情符号(笑脸图标)。

缷载后,它将回退到默认浏览器的表情符号,而不是从获取那些。

虽然建议用 WordPress 做博客不要禁用,但是笔者做的就是博客,觉得没必要有到。

嗯,就这样,禁用并缷载吧。

Disable oEmbed (Embeds) Site-Wide(禁用 oEmbed)

这将删除 oEmbed 功能。

此功能主要用于在可视编辑器通过粘贴 URL,即可预览视频或推特帖子等资源。

在以下的理由中,可不禁用它:

  1. 1. 允许其他用户将你 WP 博客文章嵌入他们的站点;

  2. 2. 你喜欢嵌入其他网站的文章、YouTube 视频、推特帖子到你的博客文章。

启用它会增加加载的 HTTP 请求。

Disable Dashicons if Toolbar is hidden (Site-Wide)(在管理工具栏隐藏时禁用 Dashicons)

当顶部管理工具栏隐藏时全站禁用 Dashicons。

这个 Dashicons CSS 文件有时在非登录访客状态也会加载,尽管没必要。

Disable Gutenberg CSS Block Library Site-Wide(禁用古腾堡的 CSS 块代码库)

在站点范围内禁用古腾堡 CSS 块库。

如果你没有主意是否禁用它,请参考:https://www.assetcleanup.com/docs/how-to-check-if-gutenberg-blocks-css-file-is-needed-or-not/

如果你没有在用或不打算用古腾堡编辑器,那么你就可以禁用该 CSS 文件,以免在加载 CSS 文件是造成额外的渲染阻塞。

Disable jQuery Migrate Site-Wide(禁用 jQuery Migrate)

全站范围内禁用“jQuery Migrate”库。

自 5.5 版本的 WordPress 以来,“jQuery Migrate”就不再加载,对站点再也没有任何影响。

直到如今 WP6.1 版本,它仍然是加载的。

禁用后,如果还是想启用,可以安装以下的插件:

Enable jQuery Migrate Helper

注意:

如果不是使用过于老旧的主题或 jQuery 库,就没有必要再留着“jQuery Migrate”了!

Disable Comment Reply Site-Wide(禁用评论回复)

禁用全站评论回复。

只要不使用 WordPress 默认的评论系统,就可禁用它。

点击“Update All Settings”保存修改。

当前配置如下:

全站卸载总览-01
全站卸载总览-02

点击图片查看大图

HTML 源码清理:从部分移除不使用的元素。

这些元素很多时候在 WordPress 环境中默认被启用,但不是必须被启用。

“Asset CleanUp”插件可以从和之间清除掉它们。

Remove 'Really Simple Discovery (RSD)' link tag(移除 RSD link 标签)

XML-RPC 客户端使用这种发现方法。

如果你不知道这是什么,以及不使用一些服务集成,你可以移除它。

Remove 'Windows Live Writer' link tag(移除 WLW link 标签)

如果你不使用“Windows Live Writer”编辑博客内容,然后可以安全地移除它。

Remove 'REST API' link tag(移除 REST API link 标签)

如果你不通过端点(REST API/wp-json)访问你的内容,那么你就可以移除它。

Remove Pages/Posts 'Shortlink' tag(移除 Shortlink 标签)

你是否使用 SEO 友好的 URL 并且不需要默认的 WordPress 短链接?你可以删除它,因为它会占用你网站的头部部分。

Remove 'WordPress version' meta tag(移除 WordPress 版本 meta 标签)

这个更简单,就是从中移除显示当前站点的 WordPress 版本号的元素。

这也有利于安全目的,因为它隐藏了你正在使用的 WordPress 版本(以防黑客攻击)。

Remove All 'generator' meta tags(移除所有 generator meta 标签)

这将删除所有带有“generator”名称的标签,包括“WordPress 版本”标签。你可以使用已添加“generator”提示的插件或主题,但你不需要将其放在那里。此外,出于安全原因,它会隐藏你正在使用的插件和主题的版本。

Strip HTML comments(去除 HTML 注释)

去除 HTML 注释。

从生成的页面源中删除额外的元素。

此功能将去除除 Internet Explorer 条件注释之外的所有注释。如果你希望保留特定注释,请使用下面的文本区域添加不想移除的注释(每行一个,大小写不敏感)。

有些注释可能不会从最终的 HTML 源代码中删除,这是由于源代码在 WordPress 环境之外进行了更新,或者通过缓存插件在呈现缓存页面之前添加了自己的签名。 阅读更多 关于如何删除这些评论的信息!

点击“Update All Settings”按钮保存修改。

配置总览:

HTML清理总览-01
HTML清理总览-02

点击图片查看大图

谷歌字体,因为其分发的服务器在境外,所以在境内获取它们简直是自虐。

为了网站的性能,必须优化掉谷歌字体。

“Optimize Font Delivery”就不看了,直接就“Remove All”,意思很明白,就是移除所有主题或插件用的谷歌字体。

点击“Remove all”标签按钮,启用“Remove Google Fonts”,然后点击“Update All Settings”保存设置。

之前还安装了个禁用和移除谷歌字体的插件“Disable & Remove Google Fonts”,现在可以停用并缷载该插件了。

禁用 RSS 提要(Feed)。

如果你根本不将 WordPress 用于博客目的,并且它没有任何博客文章(除了你添加的主要页面),那么你可以禁用 RSS 提要。

什么是 RSS 提要

“提要是特殊软件的一项功能,它允许提要阅读器访问站点,自动查找新内容,然后将有关新内容和更新的信息发布到另一个站点。这为用户提供了一种了解不同博客站点上发布的最新和最热门信息的方法。有几种不同类型的提要,由不同的提要阅读器阅读。一些提要包括 RSS(或者定义为“丰富站点摘要”或“真正简单的聚合”)、Atom 或 RDF 文件。”

https://wordpress.org/documentation/article/wordpress-feeds/

笔者博客网站,RSS Feed 还是挺重要的,笔者是启用 RSS Feed,也不从页面 HTML 移除它的链接。

因为笔者的站点禁用了评论功能,因此“Remove Comment RSS Feed link?”对笔者无用,故禁用了它。

禁用 XML-RPC。

这是 WordPress 用于第三方应用程序的 API 服务,例如移动应用程序、博客之间的通信、Jetpack 等插件。如果你使用或计划使用远程系统将内容发布到你的网站,你可以启用此功能(默认情况下)。许多用户根本不使用此功能,如果你是其中之一,则可以禁用它。

部分或完全禁用 XML-RPC 协议支持。

有此三个选项可选:

禁用 XML-RPC 的选项

点击图片查看大图

从上到下它们分别表示:

  1. 1. 保持启用;

  2. 2. 仅仅禁用 Pingback;

  3. 3. 完全禁用 XML-RPC。

Linux 下可以用以下 Shell 命令来检查 XML-RPC 是否已经禁用:

Windows 下:

如果得到以下的结果,表明已经禁用:

完全禁用 XML-RPC

点击图片查看大图


管理前端各类型页面的资源。

你可以在这里对某一前端页面缷载 CSS/JS 资源或将缷载应用到整站的范围。

Homepage(前端主页)

Assets List Layout(资源列表布局)

此选项有多个选择:

前端首页的资源管理布局设置

点击图片查看大图

以上的这些选择都很简单,一看就明白,关于它们的效果就不再赘述。

但是总是要选择一个吧,笔者选择第一行——”以(主题、插件、核心和外部)位置为组“。

这个选择就是表明这样分组。

使用“Update”(更新)按钮后,任何新更改都会生效。

From Plugins(来自插件的资源)

分组后效果如下:

资源列表编组

点击图片查看大图

比如,要在前端首页(Homepage)禁用一个插件资源,那就依次点开“From Plugins (.css & .js) -> WP Editor.md”,然后出现以下的界面:

管理来自插件的资源

点击图片查看大图

让笔者解析上图:

  1. 1. “Check All”:选择所有,所有该插件的资源都被选中“Unload on this page”。

  2. 2. “Uncheck All”:取消勾选。

  3. 3. “Unload on this page”:从这个页面(首页)卸载。

  4. 4. “Unload site-wide * everywhere”:从全站所有地方缷载。

  5. 5. “Show/Hide”:显示/隐藏与此 JS 文件相关联的 JS 代码。是在这里显示,这些内联代码还要放进最终生成的缓存文件里面。显示:

    与当前 JS 文件相关联的内联代码的显示

    点击图片查看大图

  6. 6. 有两个选项可以通过 Asset CleanUp 预加载 CSS/JS:一是“Preload Type: Basic(CSS/JS)”,另一个方法是 Pro 版本的 “Preload Type: Async(仅 CSS)”。前者可以在这里设置:

    设置 JS 资源的预加载

    点击图片查看大图 当前没必要将它设置为“预加载”。

当勾选上面列表的“Unload site-wide * everywhere”,该 JS 文件将在全站移除。

此时,界面如图:

关于从全站卸载的解释

点击图片查看大图

  1. 1. “Make an exception from any unload rule & always load it:”(从任何卸载规则中排除并始终加载它):

  2. 2. “On this page”:若勾选它,将会在 Homepage 这个页面加载该 JS 文件,这种情况下全站其他地方仍然保持不加载。

  3. 3. “If the user is logged-in”:若勾选它,那么将强制在登录的情况下全站加载此文件。

当“Unload on this page”被勾选,出现以下界面:

从当前页面卸载的界面

点击图片查看大图

如果此时选择“On this page”,会直接导致“Unload on this page”自动取消勾选。

这个“Homepage”的解析就到此为止,若读者还是不明白,多试验几次。

记住:

每次修改都要更新配置。即点击界面下方的“Update”按钮才能生效。

Posts(来自帖子的资源)

“Posts”与其他几种帖子类型的资源设置几乎一致,就以此为例子吧。

如何使用

可以在文本框输入关键字,或者帖子的 ID。

支持模糊匹配,实时显示结果列表。

选择帖子后,CSS 和 JS 管理器将加载以管理所选帖子的资源。

举个栗子,笔者的网站有篇 Post 文章的 ID 是“3318”,那么就可以在文本框搜索此 Post ID 了。

搜索结果以下:

资源管理界面的文章搜索和显示结果

点击图片查看大图

点击文章标题后进入的是:

指定文章 Post 的资源管理

点击图片查看大图

展开相应的资源管理界面,如下:

展开指定文章页面的资源列表

点击图片查看大图

这个界面是否与“Homepage”的类似,甚至一样。

于是,其他的操作就不必在这里赘述了,希望读者能使用愉快!


文章写到这里,WordPress 速度优化插件“Asset CleanUp”的介绍也就告一段落,现在做个总结:

本文的三个部分分别对该插件的全局、界面和行为,以及对全站的 HTML 元素的优化和资源管理的详细讲解和介绍。

原本 WordPress 的前端页面在各种插件和主题的影响下要向服务器请求无数的 CSS 和 Javascript 文件,还有页面内部也有不少的 CSS/JS 代码,这些都会影响页面的加载和渲染速度,作为一款速度优化插件,“Asset CleanUp” 非常全面地改善了这些问题。

只想说, Asset CleanUp 这款插件实在良心,其对于前端静态资源的优化已经是业界同类插件中比较好的了,不多说,就是够全面。美中不足的是它没有中文版。

该插件还有收费版,那功能更多更全面,只是笔者免费版已经够用了。

这篇文章写了这么多,笔者实在没更多的话说了。

只想说, Asset CleanUp 这款插件实在良心,其对于前端静态资源的优化已经是业界同类插件中比较好的了,不多说,就是够全面。美中不足的是它没有中文版。

该插件还有收费版,那功能更多更全面,只是笔者免费版已经够用了。


本篇章是本文系列的完结篇。

关于对 WordPress 插件“Asset CleanUp”的介绍就到此为止。

读者如果还有不明白的地方,可以和笔者探讨一下。一起学习,共同进步!

    以上就是本篇文章【WordPress 的前端性能优化插件:Asset CleanUp 使用教程】的全部内容了,欢迎阅览 ! 文章地址:https://sicmodule.kub2b.com/quote/18401.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 企库往资讯移动站https://sicmodule.kub2b.com/mobile/,查看更多   
发表评论
0评