网站变得越来越慢?透过 Autoptimize 外挂来为你缩小档案,提高网站速度 !

文章最后更新于 April 7, 2021

网站变得越来越慢,我一定要为网站提速吗?我只想专注在网站的内容可以吗?我只能说网站变得缓慢会对你的 Google 排名和浏览数量产生非常严重的影响,无论网站提供的内容有多么好,没有排名,没有人看,最终还是成为床底下落灰的书,永远都不会有曝光的机会。所以今天我推荐了一款 WordPress 外挂,它能够优化网站大部分的资料,让网站能够持续优化,保持最快的速度。

Autoptimze-Image

Autoptimize 是一款 WordPress 免费的外挂,它能够轻易的优化网站的资料像是 HTML, CSS 以及 Javascrpit。它主要的优化方式是通过压缩网站资料,让档案变得更小,为浏览者提供最快的读取速度。

WordPress 主题名称 :Autoptimize
外挂下载链接 :Autoptimize – WordPress plugin | WordPress.org
下载数量 :1,000,000+

JavaScript, CSS 和 HTML 档案优化

Autoptimize-Javascript

JavaScript 档案优化

Optimize Javascript Code (Javascript 代码优化)—— 建议启用

这个选项我们就将它打开,它主要的功能就是压缩网站所有 JavaScript 的档案,让浏览者快速读取档案。将其功能启用后,我们就可以启用更高级的 JavaScript 压缩功能。

Aggregate JS Files (结合所有 JS 文件)—— 建议启用

这个功能一旦启用,它就会将所有的 JS 文件结合到一个档案。但这个功能不一定所有的 WordPress 网站都适合,为什么?在第一代的 HTTP 或许这个功能是关键的功能,但自从 2015 ,第二代的 HTTP 问世后,它就开始支持并行下载以及多路复用(Parallel downloads and Multiplexing),这也意味着将 JS 文件结合到一个档案不在如此重要。相反的,它可能还会影响到网站的速度,所以为了避免面临类似的问题,非常建议大家先进行测试才决定是否需要启动该功能。

Do not Aggregate But Defer (不做结合,进行 JS 文件延迟)

如果结合 JS 文件没有明显的提速效果,用户也可以使用此功能来进行 JS 文件延迟(只能和上一个功能二选一)。此功能会让HTML解析器在解析其余HTML的同时下载JavaScript,并等待执行,直到HTML解析完成。

Also Aggregate Inline JS (结合内部 JS 文件) —— 不建议启用

大部分的网站我都不推荐使用这项功能,因为它会快速增加快取的体积,同时也增加了主机负担以及网站整体的性能。

Force JavaScript in <head> —— 不建议启用

同样也是不建议将 JS 强制性导入到 <head>,因为过早的加载 JS 会产生渲染阻止资源(Render-Blocking Resources),大幅度的影响网站的速度。什么原因产生这个问题?因为网站解读代码正常来说都是从上到下,一旦过程中解读到 JS(或CSS)文件,浏览器就需要停止加载来为JS(或CSS)文件进行下载以及处理。如果真的想让 JS 文件导入到 <head>,建议使用接下来的排除文件功能来排除部分拖慢网站速度的 JS 文件。

Exclude Scripts from Autoptimize

此项功能的主要目的就是排除 JS 部分的文件,让其文件不会被结合。这里注意的是 JS 文件虽然不会被结合,但是还是会压缩。想要让 JS 文件完全排除,不被优化,可以到设定下方的 Misc Options 点选“minify excluded CSS and JS files”。

Add Try-Catch Wrapping

如果在使用 Autoptimize 功能过程中,网站异常的发生错误,可以建议启用这个功能。它主要是debug JS 文件优化功能所产生的问题。

CSS 档案优化

Autoptimize CSS Settings

Optimize CSS Code (CSS 代码优化)—— 建议启用

同样的这个功能主要就是压缩所有 CSS 的档案,让浏览者快速读取。

Aggregate CSS File (CSS 文件结合) —— 建议启用

将所有网站的 CSS 文件结合起来成一个档案,但因为第二代的 HTTP 问世,开始支持并行下载以及多路复用(Parallel downloads and Multiplexing),所以建议用户可以进行网站速度测试才决定是否开启功能。

Also Aggregate Inline CSS (结合内部 CSS 文件)—— 不建议启用

如果网站属于比较普通的部落格,或网站大部分的结构都是由古腾堡编辑器建立,此项功能就非常推荐启用。然而如果网站大部分页面都是使用类似 Elementor 的编辑器,就不推荐启用该功能,因为 Elementor 将 CSS 导入到 HTML 的方法会增加快取的容量,严重影响主机和网站性能。

Generate Data: URIs for Images (生成数据:图像的URI)—— 建议启用

这项功能一旦启用可以将网站的背景图像转换成 base64 代码,并且将其嵌入到 CSS 文件当中。它的主要目的是为了减少对 HTTP 的请求。这里要注意的是,不是网站所有的图像都会被转换成 base 64 代码,它是根据特定的计算方式来决定图像是否能够合并成 base 64。通常体积较大的图像普遍是不会被 Autoptimize 优化,主要是为了避免在图像加载时候发生错误。在图像转换成 base 64 代码后,图像的体积通常会增加至少 20 – 30 % ,无论是 JPG 或 PNG 类型的图像,为了保险起见还是建议大家进行网站速度测试,查看是否有明显的速度上升。

Inline and Defer CSS (内敛以及延迟 CSS 文件)—— 不建议启用

这项功能启用后,网站的 CSS 文件就会同时被内敛以及延迟。内敛(Inline)就是将网站的 CSS 文件从外部资源导入到 HTML 骨架了。它主要的目的就是为了让浏览器不再需要下载和处理外部的 CSS 资源,而且因为 CSS 文件已导入到 HTML 骨架的关系,所以它们能够一同在网页中立即呈现出来。它主要的坏处就是无法存入到 CSS 的快取档案中,所以每次加载网页的时候,因为无法读取快取档案的关系,浏览者都必须下载相同的 CSS 档案,导致无法维持网站最快的速度。但这里主要会内敛的 CSS 文件主要是针对网页的 “above the fold”,也就是网页一旦打开最先呈现的部分,不会过多的影响网页的速度。

延迟(Defer)就是延迟 CSS 文件的加载或处理,优先让网站的 HTML 文件完成加载,以确保浏览者能够以最快的速度进入到网页。主要会被延迟的 CSS 文件通常是会严重阻止页面呈现的文件,个人推荐使用 Google 的 PageSpeed Insights 可以用来查看相对的文件。

Inline All CSS (内敛所有 CSS 文件)—— 建议启用

在上一个功能也提到了,内敛所欲的 CSS 文件会增加网页的文件的体积,而且无法导入到 CSS 的快取档案中,严重影响网页速度,所以我个人是不建议启用该功能。

Exclude CSS from Autoptimize

此项功能的主要目的就是排除 CSS 部分的文件,让其文件不会被结合。这里注意的是 CSS 文件虽然不会被结合,但是还是会压缩。想要让 CSS 文件完全排除,不被优化,可以到设定下方的 Misc Options 点选“minify excluded CSS and JS files”。

HTML 档案优化

Autoptimize-HTML

Optimize HTML Code (HTML 文件优化)—— 建议启用

这个功能主要是清除掉 HTML 编码里头的空格,减少 HTML 文件的体积。但这里要注意的是它可能会影响到一些网站产生小故障,所以建议测试后才启用这项功能。

Keep HTML comments (HTML 编码注解)—— 不建议启用

如果你想保存 HTML 里的编码注解,不想被优化功能清除掉,这个功能可以打开。如果是新手或对编码一窍不通,这个功能可以不必开启。

CDN 设定

CDN Base URL

如果你目前有使用 CDN 的功能,你就需要把 CDN 的基础网址贴到这里,主要是将已优化的资源提供 CDN 功能。如果你目前是使用 Cloudflare 平台的 CDN 就无需贴上网址,如果你还不了解什么是 Cloudflare, 可以查看我之前所写的文章:如何免费提高网站速度与安全?Cloudflare 完整设定教学 (免费 CDN + 代管 DNS 服务)。

Cache Info (快取信息)

这里主要只是显示快取的基本资讯,像是快取的档案位置,快取的样式和脚本的总大小。Can we write 这里的右边部分肯定是显示出 Yes,意思是我们拥有权限去改写快取档案。

Misc Options (其他设定)

Autoptimize-Misc-Option

Save Aggregated Scripts/CSS as Static Files —— 建议启用

这个功能是将已结合的 CSS / JS 档案储存为静态档案(static files)。静态档案(static files)是就是里面的资料无需进行任何修改或处理,可以直接从服务器内传送给浏览者。因为服务器需要时常传送相同的档案,所以静态档案成为了最简单以及最方便的传送方式。但如果你的服务器无法正常的处理文件的压缩和到期规则,可能需要禁用这项功能。

Minify Excluded CSS and JS Files —— 建议启用

启用这项功能可以为在 CSS 和 JS 当中被排除的文件进行优化。当然如果启用的过程中面临类型压缩问题,就需要将此项功能关闭。

Enable 404 fallbacks? —— 建议启用

普遍 Autoptimize 会把已被优化的 CSS 或 JS 文件储存到 HTML 当中,也就是我们的页面快取(Page Cache),它可以是 WordPress 里的外挂,主机,第三方程序,Google 快取 或浏览器。当 Autoptimize 在清除快取时,将优化后的 CSS 和 JS 档案删除后,页面快取将无法寻找到对应的文件而导致 404 错误。为了解决这个问题,这个功能可以将 404 的损坏页面恢复到清除快取后的第一个备份文件。这也意味着页面不会 100 % 完整的恢复,但可以大幅度的减少 CSS 和 JS 文件的丢失。

Also Optimize for Logged In Editors/Administrators —— 建议启用

此项功能是为编辑员或管理者进行优化,所以网站是多过一个人管理或编辑的可以启用这项功能。

网站图像优化

Autoptimize-Image-Optimization

目前 Autoptimize 提供了两种图像优化功能,分别是 Optimzie Images(图像优化) 和 Lazy-Load Images (延迟加载位于网页底下的图像,先让上方的资源完成加载)。当然 Autoptimize 的图像优化功能非常的有限,我个人会更推荐使用 ShortPixel。它是一款能够自由控制并优化网站图像的 WordPress 外挂, 而且目前在免费配套中就能够在每个月里处理 150 张图像。

Critical CSS

这是 Autoptimize 额外推广的 CSS 优化软件,它主要功能就是可以对网站进行检测,将所有会减缓网站速度的 CSS 文件进行优化。

额外优化设定

Autoptimize Extra Settings

Google Fonts

Google Fonts 的主要功能是优化 Google 的字体,目前提供 5 种选项,分别是 :

  • Leave as is
  • Remove Google Fonts —— 建议启用
  • Combine and link in head (fonts load fast but are render-blocking), includes display:swap.
  • Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap.
  • Combine and load fonts asynchronously with webfont.js (deprecated)

如果网站目前是没有使用 Google 字体的话,可以选择第 2 个选项。如果不了解又不想搞坏网站的可以选择第 1 个选择。其余的选择可以根据网站的速度来选择哪个适合。

Remove Emojis —— 建议启用

这项功能能够将排除所有与 WordPress 核心相关的 CSS 和 JavaScript 表情符号,并酌量的减少网站的总大小。当然如果没有使用表情符号的可以直接把它启用。

Remove Query Strings From Static Resource —— 建议启用

这个功能主要删除网站了的 Query Strings ,但它不会提升网站的速度,只是在网站测试速度的平台性能分数会比较高而已。但如果不熟系这个功能的架构,可以不需要启用,因为可能会破坏网站的前端。

进阶用户设定

以下这个三个设定都是比较进阶的功能,如果不熟系可以无视这些功能。

  • Preconnect to 3rd Party Domain (For Advanced Users)
  • Preload Specific Requests
  • Async JavaScript Files

Optimize Yotube Videos

这个是 Autoptimize 的开发者所研发的另一个外挂 WP YouTube Lyte,需要另外下载并启用。它的功能是延迟加载网站所上载的 Youtube 视频。

网站速度数据对比

未使用 Autoptimize 外挂已使用 Autoptimize 外挂
PageSpeed Insights Speedtest Mobile
PageSpeed Insights Speedtest Desktop
Gtmetrix Speedtest
PageSpeed Insights Speedtest Mobile Autoptimize
PageSpeed Insights Speedtest Desktop Autoptimize
Gtmetrix Speedtest Autoptimize

结尾

如果你对网页开发比较熟系的, Autoptimize 可能非常适合你。当然如果你是新手的话,在这里我推荐启用的功能也足以能够大幅度提高网站前段的速度。如果想要测试网站的速度可以使用 GTmetrix PageSpeed Insights ,这两款测试工具都可以准确的查看网站需要改善的部分。

关于 NeedyApps.com

如果你对这篇文章有任何问题,欢迎你在下方留言让我知道 !如果你喜欢这篇文章也别忘了分享,让更多人看见我写的文章 !

本站与部分商家有合作的关系,所以正在阅读文章的你,如果透过我的连结购买产品,我将会获得少数的佣金,让我继续经营下去 !

感谢您支持 !Wishing You Good Health and Happiness !

Default image
Kendall
讨厌墨守成规的理念! 热爱天马行空的想法,热爱冒险,喜欢尝试生活上各种不一样的事!

订阅 NeedyApps

完成订阅即可在第一时间内获得文章的最新通知!

如有任何疑问,欢迎在评论区这里留言!