• 欢迎访问黑科技娃娃的博客,傻瓜式的wordpress外贸建站教程,好玩的黑科技干货,有趣的生活小百科,快来加入黑科技娃娃 QQ群
  • 如果觉得这个BLOG有意思,那么赶紧使用Ctrl+D 收藏 黑科技娃娃 的博客 吧!

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

Wordpress外贸建站 黑科技娃娃 4个月前 (03-19) 260次浏览 0个评论
文章目录[隐藏]

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求博主以前非常纠结网站HTTP请求的多少,但又不知道从何着手。

HTTP请求:是指从客户端到服务器端的请求消息。包括对图片、文件内容等资源的加载请求等。)

后来才发现网站的速度快慢跟HTTP请求其实并没有太大的关系,主要还是图片和服务器配置问题,但如果你是个完美主义,并且暂时不打算装缓存插件的话,那可以用一些过渡的插件来优化下HTTP请求,减少些加载时间。

越是功能强大的主题,插件安装得越多,调用的CSS 文件和 JS 文件也越多,有的插件可能只需要用于某一个特定页面,但由于插件开发者的疏忽或者代码技术欠佳,这些插件通常会加载到每个页面上,即使它没有被使用。

这些无需加载的代码和文件(主要是CSS和JavaScript文件,以及其他内嵌的代码)都会累加到页面的总体积上,导致不必要的HTTP加载请求,从而减慢网站速度。

如果页面加载缓慢或失败,或者JS出现错误的代码,一般是插件之间互不兼容导致的。这些都会造成 Google 搜索排名不佳。所以我们就需要通过一定的手段来改进优化网站的代码,以达到减少HTTP请求的目的。

如何检查HTTP请求?

在谷歌浏览器里按F12 或右键检查,打开console,看看有什么错误提示,看提示是否加载了http的图片或其它资源。

你也可以按F12后切换到Network,然后F5 刷新页面,就可以看到每个文件的加载时间,最后在最下面的左下角看到总共有多少个请求。

下面的截图是我的网站,比如打开我的网站首页,浏览器总共向服务器发送了55 个请求(包括CSS 和 JS,占大头的是JS的代码,注意随着网站内容的增多,HTTP请求也会越来越多。)

有些无需加载的文件(主要是CSS和JavaScript代码)会导致生成额外不必要的请求,累加到页面的总体积上,从而减慢我们的网站速度。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

网站HTTP请求


那么如何减少HTTP请求呢?

主要依靠下面两种方式:

  • 尽量精简插件,把能不用的插件都删除了。处理方式是尽量精简插件,
  • 使用WordPress优化插件,来处理页面上无用的其他文件,将多个JS脚本合并为一个脚本,将多个CSS文件合并为一个样式表,以及使用CSS Sprite和图像映射。这样可以减少下载资源的时间,从而加快页面加载速度。
    建议 :Autoptimize和Asset CleanUp则一使用即可,小白推荐Autoptimize,愿意折腾的可以研究Asset CleanUp。

Autoptimize插件

这个Wordpress优化插件可以在网站后台插件那直接找到下载,对HTTP请求的优化是最明显的。

Autoptimize 主要是针对html、js、css等进行优化 ,也可以删除谷歌字体,插件的工作原理是通过创建php的缓存文件,再读取页面中的js、css等文件,将其写入php文件中,并压缩。然后在html页面中通过引用这个缓存PHP文件来实现页面的正常访问。

Autoptimize插件会自动在它插件目录下的Cache文件夹中储存经过优化的缓存数据,如果你页面使用的是不同的样式表,就可能会导致文件夹变大。

有些人会把它归类为缓存插件,但是我觉得它最多是局部缓存插件,功能比较少,跟那些大缓存插件来说有一定差距,注意不能和其他一些缓存插件共用!如果出现了页面或者某些插件不能正常工作,那么就请你禁用相关的优化选项。

Autoptimize 还包括动态图像优化 (支持WebP) ,集成了ShortPixel这个图像优化工具,ShortPixel的图像优化可提供3个级别的质量LOSSY, GLOSSY OR LOSSLESS,不要用这个功能,会造成CPU负载加剧。

如果你将 SiteGround 用作托管服务提供商, 则无法正确设置Cloudflare并将其与ShortPixel自适应映像一起用作CDN。

其实你不用管其他乱七八杂的设置,只要按照我下面的精简设置就可以了。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

Autoptimize设置 激活插件后,在 设置Settings —— Autopitimize,设置时如图勾选“优化 HTML 代码“和”启用CSS优化”右上角的其他设置不需要去做修改。

酌情勾选“启用 JavaScript 优化”,因为有些同学喜欢跟缓存插件一起用,如果有设置过同样的优化可能会出问题,不要选重叠功能即可, 否则可能造成主题部分功能不可用,切记!

注意:如果个别WordPress主题本身带有JavaScript的特殊效果,比如一些动画功能,那么网站可能无法按预期加载。这个效果可能被延迟,导致不好的用户体验。这个时候就不要勾选JS优化这个选项了。

设置后网站的请求直接就减少到了40个,文件加载时间也减少了两秒多。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

Asset CleanUp优化插件

一个优化前端性能的插件,让你可以选择在网页上禁用不需要在网站上加载的文件,合并/缩小CSS / JS文件 ,去除GOOGLE字体,但它对减少HTTP请求效果不如Autoptimize。

如果你不确定是否需要在页面上加载某些 CSS 或 JavaScript 文件,并且担心某些内容可能会破坏网站的功能或布局,那么可以使用“Test Mode”,你可以在插件的设置页(Settings)下激活Test Mode。

在此模式下设置的所有规则仅对已登录后台的管理员生效,常规访问者看不到测试模式下的页面,看到的还是正常的网站页面。

当你在测试模式下,你可以开启设置页下的使用偏好(Plugin Usage Preferrences),然后启用 Manage in the Front-end(在前台页面管理)。

当你的登陆你的网站后,会发现每个 Page 或者 Post 编辑区下方,会显示出加载了哪些文件资源,可以让你选择CSS等代码需要删除还是保留在这个页面,因为有些代码不用全站加载。

你可以进行单独的设置,等一切设置好后,关闭“测试模式”,你所做的更改也将对未登录的网站访客生效可见。

这个针对清除多余代码加载的插件设置起来还是有难度的,有兴趣的可以研究下,千万不要忘记开TEST MODE模式,以免造成悲剧。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

一般来说我们只要设置好首页就可以了,比如禁止一些文件,就减少一些 Requests,这个文件一定要选对不要乱弄。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

 

这个插件有几个别的缓存插件所没有的功能:

Site-Wide 不加载文件设置

你可以在 Site-Wide Common Unloads 这里,按照截图中的设置去启用相应功能。禁用 Emojis表情文件、禁用新款的古藤堡 Block 编辑器的 CSS 库(一般我们都习惯用经典编辑器),如下图设置。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

 

Fonts 本地字体文件的预加载功能

在 Local Fonts 这里,可以在 Preload Google Font Files 文本区内填入需要加载的字体地址。

如何寻找需要加载的字体的地址呢?

可以用 F12 开发者工具,刷新网页,选择 Console,注意看哪些字体文件 Fall back,把 URL 记录下来,这个一般有时候没有。还是查看GTmetrix 测速结果里的 Waterfall 显示的加载慢的字体比较准。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

 

然后根据插件 Exmaples 的提示,跟你本地网站上调用的主题的字体有关,就粘贴到 Local Fonts 的 Preload Local Font Files 里。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

 

Google Fonts 字体的合并处理

如果网址是跟 fonts . gstatic. com 有关的谷歌字体就填写到 Google Fonts 那里,在 Google Fonts 那里,把 Combine Multiple Requests Into Fewer Ones 和 Preconnect? 这两个都开启。

如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求

基本上关掉TEST模式,更新所有功能后,你的请求都会减少几个,速度会得到一定范围内的提升,如果你的网站本来得分就很好,可能不会很明显。

等减少完后可以去测个速度,看看整体性能怎么样。如何测速可以参考下面这篇

三种测试WordPress网站速度最好的方法

文章目录[隐藏] 查看内置浏览器的网页加载速度 使用国外测速工具来测试网站速度 国内测速工具 新做的网站如果速 […]


本文标题:如何用WordPress优化插件Autoptimize和Asset CleanUp减少HTTP请求
转载请保留原文链接:https://www.cooltechdoll.com/autoptimize-and-asset-cleanup/
黑科技娃娃, 版权所有
喜欢 (1)
[九流黑客]
分享 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址