如何在WordPress和GTmetrix YSlow中减少HTTP请求

需要在您的WordPress网站上减少HTTP请求?


这仅意味着您需要减少站点上负载的元素(请求)数量.

发出更少的HTTP请求

组合CSS和JavaScript文件可能会有所帮助,但是还有其他一些优化措施可以减少HTTP请求,例如有选择地禁用不需要在特定页面上加载的插件,在非电子商务页面上禁用WooCommerce脚本和样式,或者避免占用大量CPU产生大量请求并降低网站速度的插件.

减少HTTP请求 是GTmetrix,Pingdom和其他速度测试工具的推荐。以下建议将有助于减少请求并加快您的网站速度.

1.结合CSS样式表和JavaScript

组合CSS样式表+ JavaScript 意味着您需要将CSS文件中的所有内容复制/粘贴到一个文件中。这使浏览器可以对一个CSS文件发出一个请求,而不是多个请求。大多数缓存插件都可以选择组合您的CSS + JavaScript文件.

步骤1:在缓存插件设置中,找到合并和最小化CSS + JavaScript的选项.

第2步:一次启用一项设置,并在GTmetrix中测试结果.

缩小合并CSS文件

缩小合并JavaScript文件

第三步:检查您网站上的可见错误。如果看到错误,请查看源代码,找到有问题的文件,并将其从CSS或JavaScript缩小设置中排除。例如,如果启用某个设置时滑块消失了,请在源代码中检查滑块文件并排除有问题的文件。如果您没有看到错误,则无需这样做.

或者,您可以在外观下手动组合WordPress中的CSS文件 > 主题编辑器. 您只需将所有文件中的内容复制并粘贴到一个CSS文件中.

WordPress CSS文件

2.选择性禁用插件

许多插件会在您的整个网站上运行,即使在不需要它们的页面上也是如此.

联系人表单,社交共享,丰富代码段,滑块和其他一些插件仅需要加载到某些内容类型上。您可以在其他任何地方禁用它们 资产清理.

通过在不需要加载页面的页面上禁用插件,可以减少HTTP请求。这不仅限于插件;也可以在某些页面上禁用脚本和样式(例如,可以在非电子商务页面上禁用WooCommerce脚本,样式,购物车片段).

步骤1:安装资产清理或 香气 (都让您有选择地禁用插件).

第2步:编辑页面或帖子,向下滚动至“资产清理”部分,然后查看页面上正在加载哪些CSS + JavaScript文件。这些可以来自插件,主题或外部脚本.

禁用WordPress外部脚本

第三步:禁用该页面上所有不需要的插件和要求。您可以按帖子类型在整个网站的一页上禁用它们,也可以使用RegEx(正则表达式)对特定的URL模式禁用它们. 正则表达式 仅包含在Perfmatters或Asset CleanUp Pro中.

3.禁用WooCommerce脚本,样式,购物车片段

WooCommerce网站自然会生成更多HTTP请求.

它们通常不仅需要更多的插件,而且还加载了额外的WooCommerce脚本, 样式, 和 购物车碎片. 就像您可以在上一步中有选择地禁用插件一样,您也可以有选择地禁用在整个站点上加载WooCommerce请求.

使用Asset CleanUp或Perfmatters,在不需要加载的页面上禁用它们:

资产清理WooCommerce

另外,Perfmatters允许您一键禁用这些功能:

性能优化woocommerce优化

4.避免使用高CPU插件

高CPU插件可以生成大量HTTP请求.

这些通常是社交共享,统计(分析),滑块,投资组合,页面构建器,日历,聊天和联系表单插件。基本上,请避免使用任何插件从外部网站获取外部请求,运行正在进行的进程或仅花费较长时间进行加载.

步骤1:检查GTmetrix Waterfall中的慢插件或 查询监控器.

慢WordPress的插件

第2步:避免使用已知的高级CPU插件.

  1. 添加此
  2. AdSense点击欺诈监控
  3. 多合一活动日历
  4. 备用好友
  5. 海狸生成器
  6. 更好的WordPress Google XML Sitemaps
  7. 损坏的链接检查器(使用Dr. Link Check)
  8. WordPress的持续联系
  9. 联络表格7
  10. 查看全部65慢插件

第三步:将较慢的插件替换为更快,更轻巧的插件。需要研究和测试.

5.用代码替换插件

您可以通过将其替换为代码来避免使用许多插件.

例子:

  • Google字体:在本地托管字体
  • Google Analytics(分析)跟踪代码:手动插入
  • 目录:在HTML + CSS中手动设计
  • 嵌入式推文或Google地图:改为截屏
  • 嵌入式Facebook小部件:替换为实际的Facebook小部件

整合插件 也有帮助。一个经典的示例是使用WP Rocket,它带有本地托管字体,分析和Facebook Pixel,延迟加载图像和视频,数据库清理,预加载,心跳控制以及Cloudflare和多个CDN的集成。使用其他缓存插件(因为它们大多数都没有这些功能),当它们内置在WP Rocket中时,您需要安装6-7个额外的插件才能获得这些速度优化。.

6.消除外部脚本

外部脚本是可以拉动外部网站请求的任何东西.

Google字体可以合并为1个文件。可以延迟加载视频,并将iframe替换为预览图像。许多脚本可以优化,而其他则不能。以下是一些例子.

  • Google字体:组合字体并使用WP Rocket,Autoptimize,OMGF,自托管Google字体和Asset CleanUp等插件在本地托管它们.
  • 谷歌分析:在WP Rocket / CAOS Analytics中本地托管跟踪代码.
  • 谷歌的AdSense:异步加载并尝试Cloudflare Rocket Loader.
  • 谷歌地图:观看Google Map的画面,并包含一个链接,当人们单击图像时,该链接会指向行车路线(外观与地图一样好)!
  • Google跟踪代码管理器:尝试组合多个脚本时通常弊大于利。仅应用于未经优化的大型网站.
  • 嵌入式视频:使用WP Rocket或WP YouTube Lyte延迟加载视频并将iframe替换为预览图像(视频是非常重要的元素).
  • 嵌入式小部件+帖子:获取屏幕截图而不是将其嵌入.
  • Facebook像素:WP Rocket可以将浏览器缓存添加到Facebook Pixel.
  • 墓碑:除了禁用Gravatars(WP Rocket也不在其博客上使用它们)对我没有任何帮助。但是,您可以尝试使用Harrys,FV或Optimum Gravatar Cache,或者尝试破坏或隐藏可扩展的注释.
  • 社交分享插件:臭名昭著地从Facebook,Twitter和社交网络生成请求以刷新计数。尝试更快的插件,例如 帕格犬, Mashsharer, 社交快照加到任何, WP社交分享, 要么 轻松社交分享

7.合并Google字体

可以组合使用Google字体来生成1个请求,而不是多个请求.

谷歌字体GTmetrix

以下插件具有用于优化Google字体的选项:

  • WP火箭
  • 资产清理
  • 自动优化
  • 皮肤生长因子

但是,最好的方法是在本地托管Google字体。这涉及直接从Google字体网站下载字体,同时最小化字体数量和字体粗细。接下来,使用类似 Transfonter 或将字体转换为Web字体文件。然后,您将新的网络字体文件上传到wp-content / uploads文件夹,将自定义字体添加到CSS,然后测试该字体以确保其正常工作。同样,请参见该链接以获取完整教程.

Transfonter-Google-Font-Conversion

7.缩小HTML,CSS,JavaScript

缩小文件通常是由您的缓存插件完成的(请参见步骤1).

但是有时候,这可能会破坏您的网站。在这种情况下,您将必须逐一测试每个设置,检查源代码中有问题的文件,然后使用缓存插件将这些文件从缩小中排除。如果看不到可见错误,则无需执行此操作.

8.优化CSS交付

这应该修复 渲染阻止资源 PageSpeed Insights中的项目.

WP Rocket,Autoptimize和其他类似插件应具有优化CSS交付的选项。只需进入设置并确保已启用此功能,它就可以解决此问题.

优化CSS交付

9.异步推迟/加载合并的JavaScript文件

异步JavaScript意味着文件已加载 页面下载完毕.

可以使用WP Rocket或 异步JavaScript 并应修复 删除阻止渲染的Javascript项目. 异步JavaScript使您可以完全控制向哪些脚本添加“异步”或“延迟”属性,而WP Rocket只需单击一下即可自动延迟JavaScript.

JavaScript文件

10.延迟加载视频

嵌入式视频是生成HTTP请求的外部资源.

他们可能需要2秒钟以上的时间才能加载!虽然您无法完全消除这些缺陷,但可以 延迟影片的载入 直到用户向下滚动(延迟加载)并单击播放按钮(浅埋).

您在此处有几个选择:您可以使用WP Rocket启用延迟加载,并用预览图像替换YouTube iframe。但是,如果您没有WP Rocket,则可以尝试 WP YouTube Lyte插件 或按照这个 YouTube嵌入教程. 两者都很好.

这是一个示例(以及有关WordPress Speed的精彩视频):

11.添加一个CDN

CDN可以帮助减少HTTP请求.

CDN的数据中心不会让您的原始服务器响应请求,而是将卸载带宽,同时减轻原始服务器的负载。 Cloudflare是免费的,因此无需理会.

多个CDN =更多的数据中心=更快的内容交付和更多的资源卸载。许多人从Cloudflare开始,然后最终在使用多个CDN时研究StackPath(我目前同时使用两者)。 KeyCDN也不错。这被称为CDN的“链”.

设置多个CDN
使用Cloudflare,他们会为您分配2个名称,您可以在域名注册中进行更改。与其他CDN(例如StackPath和KeyCDN)一起,它们会为您分配CDN URL,您将其粘贴到缓存插件的CDN URL字段中(大多数都有)或使用CDN启动器.

多个CDN

12.最小化重定向

不必要的重定向可能导致额外的HTTP请求.

您需要查看您的GTmetrix报告,以了解导致此错误的原因。它是由您网站上的外部脚本或插件生成的吗?您是否尝试过优化该脚本或寻找更轻巧的插件?是因为您将域版本更改为非WWW或HTTPS,但尚未更新网站上的所有链接/图像以反映新版本?

最大限度地减少重定向错误

常见原因

  • 错误的插件
  • 外部脚本
  • 更改为WWW vs非WWW,但尚未更新链接
  • 更改为HTTPS与非HTTPS,但尚未更新链接

13.优化图像

为了减少由图像引起的HTTP请求,有3种主要方法可以优化图像:

服务缩放图像:将大图像调整为较小尺寸。 GTmetrix会告诉您哪些图像太大,以及应该对其进行裁剪/调整大小的正确尺寸。尝试通过测量滑块,全角博客图像,窗口小部件和网站其他区域的尺寸来创建图像尺寸备忘单。然后确保在上传之前将图像调整为正确的尺寸。如果这样做,就永远不会出现缩放后的图片错误.

优化图像(无损压缩):请使用ShortPixel(推荐),Smush或Imagify之类的插件来压缩图像。尽管这些插件说的是无损的,但有时您可能会注意到质量上的少量损失。这就是为什么最好在批量优化网站上的所有图像之前备份您的图像并测试其中的几个图像,以确保您对质量满意.

指定图像尺寸:在图片的HTML或CSS中添加宽度+高度。这是在Visual Editor中自动完成的,但不是自定义HTML,某些页面生成器以及WordPress网站其他区域的自动完成。 GTmetrix将向您显示哪些图像具有这些错误,并为您提供正确的尺寸。要纠正该错误,您需要在WordPress仪表板中找到图像,编辑HTML或CSS,然后添加width + height.

仍然需要发出更少的HTTP请求?

如果您仍然需要帮助,请给我留言。的 WordPress加速Facebook小组 还是有帮助的,或者您可以在GTmetrix报告之前+之后雇用我们为WordPress提速服务.

WordPress加速Facebook小组

经常问的问题

🚀是什么导致HTTP请求?

HTTP请求是创建对服务器的请求的任何内容(例如,单个映像创建1个请求)。 GTmetrix的“瀑布”选项卡告诉您所有请求都加载到页面上.

🚀减少HTTP请求的5件事是什么?

您可以做的5件简单的事情是组合CSS + JavaScript文件,延迟加载图像和视频,避免使用我们的CPU插件过多列表,使用Perfmatters或Asset CleanUp有选择地禁用某些页面/帖子中的插件以及优化字体.

🚀缓存插件是否有助于减少HTTP请求?

是的,一个好的缓存插件应该有助于缩小和合并文件,并在正确配置后减少HTTP请求。我为几乎所有缓存插件提供了教程.

🚀修复其他GTmetrix项目会减少HTTP请求?

是的,在很多情况下,它尤其可以减少文件和合并文件,消除重定向错误,并且使用CDN也可以帮助您.

🚀哪个缓存插件最多可以减少HTTP请求以及如何配置它?

我推荐WP Rocket,它在大多数Facebook民意测验中均排名第一,并且比大多数缓存插件具有更多的速度优化功能,这就是为什么它通常在GTmetrix中产生更好的得分和加载时间的原因。查看我的有关配置WP Rocket设置的教程.

谢谢阅读 :)

干杯,
汤姆

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map