WordPress 的前端性能优化插件:Asset CleanUp 使用教程-下篇

By | 最新修改:2024-08-17
目录 显示

本文分为两大部分,这是下篇,也是完结篇。这一部分将描述对一些全站范围起作用的前端优化配置选项的设置,比如在前端页面禁用一些常见的多余公共 CSS/JS 代码和文件、从 <head> 部分删除没必要的元素、禁用谷歌字体,以及禁用 XML-RPC 等等。
下篇还讲述了如何管理前端的资源,特定的页面指定加载或不加载某些 CSS/JS 资源,以及决定是否对由插件带来的静态资源是否在前端加载。

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

配置“Asset CleanUp”

Site-Wide Common Unloads(全站范围通用的卸载)

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

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

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

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

Disable Emojis Site-Wide(禁用 Emojis)

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

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

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

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

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

这将删除 oEmbed 功能。

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

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

  1. 允许其他用户将你 WP 博客文章嵌入他们的站点;
  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 Source CleanUp(HTML 源代码清理)

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

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

“Asset CleanUp”插件可以从<head></head>之间清除掉它们。

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 标签)

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

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

Remove All “generator” meta tags(移除所有 generator META 标签)

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

Strip HTML comments(去除 HTML 注释)

去除 HTML 注释。

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

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

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

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

配置总览:

HTML清理总览-01

HTML清理总览-02

点击图片查看大图

Google Fonts(谷歌字体)

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

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

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

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

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

Disable RSS Feed(禁用 RSS)

禁用 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?”对作者无用,故禁用了它。

Disable XML-RPC(禁用 XML-RPC)

禁用 XML-RPC。

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

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

有此三个选项可选:

禁用 XML-RPC 的选项

点击图片查看大图

从上到下它们分别表示:

  1. 保持启用;
  2. 仅仅禁用 Pingback;

  3. 完全禁用 XML-RPC。

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

curl -d '<?xml version="1.0"?> <methodCall> <methodName>wp.getUsersBlogs</methodName> <params> <param> <value>username</value> </param> <param> <value>password</value> </param> </params> </methodCall>' -X POST https://test.com/xmlrpc.php
# 其中,test.com 为 WordPress 站点的域名

Windows 下:

curl -d "<?xml version=\"1.0\"?> <methodCall> <methodName>wp.getUsersBlogs</methodName> <params> <param> <value>username</value> </param> <param> <value>password</value> </param> </params> </methodCall>" -X POST https://test.com/xmlrpc.php

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

完全禁用 XML-RPC

点击图片查看大图

使用插件

CSS/JS Manager(CSS/JS 管理)

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

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

Homepage(前端主页)

Assets List Layout(资源列表布局)

此选项有多个选择:

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

点击图片查看大图

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

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

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

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

From Plugins(来自插件的资源)

分组后效果如下:

资源列表编组

点击图片查看大图

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

管理来自插件的资源

点击图片查看大图

让作者解析上图:

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

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

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

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

    显示:

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

    点击图片查看大图

  6. 有两个选项可以通过 Asset CleanUp 预加载 CSS/JS:

    一是“Preload Type: Basic(CSS/JS)”,另一个方法是 Pro 版本的 “Preload Type: Async(仅 CSS)”。

    前者可以在这里设置:

    设置 JS 资源的预加载

    点击图片查看大图

    当前没必要将它设置为“预加载”。

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

此时,界面如图:

关于从全站卸载的解释

点击图片查看大图

  1. “Make an exception from any unload rule & always load it:”(从任何卸载规则中排除并始终加载它):
  2. “On this page”:若勾选它,将会在 Homepage 这个页面加载该 JS 文件,这种情况下全站其他地方仍然保持不加载。

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

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

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


程序知路

鉴于本人的相关知识储备以及能力有限,本博客的观点和描述如有错漏或是有考虑不周到的地方还请多多包涵,欢迎互相探讨,一起学习,共同进步。

本文章可以转载,但是需要说明来源出处!

本文使用的部分图片来源于网上,若是侵权,请与本文作者联系删除: admin@icxzl.com