导语:如果你想加快你的WordPress网站的速度,这里有一个你会喜欢的故事。前几天我建了一个非常炫的网站。我全力以赴地添加了WooCommerce,Google Tag Manager,OneSignal,Help Desk,Yoast,Live Radio(哦,是的,我做了),Cookie Notification,社交媒体,以及一堆其他插件。
就像你一样,我一心想给我的访客留下深刻印象,至少我是这么想的。但后来事情变得慢得让人难以忍受。在经历了许多痛苦之后,我启动了GTMetrix来解决这个问题。
我的网站完全加载完需要4.3秒………………
我印象深刻吗?让北国见鬼去吧!我想要得满分A,并将页面加载时间减少到2秒以下。
所以,我按了重新测试的按钮,但是你猜怎么着?仍然是同样令人作呕的结果。我感到震惊,甚至愤怒。但是我不会轻易放弃,因为那种事情是不能接受的。
你知道我接下来做了什么吗?我在Pingdom上测试了这个网站,因为GTMetrix很烂。但是,下面是再次出现的令人沮丧的结果:
加速速度没有任何改善。
我被激怒了。众所周知,我的肉中刺是错误的HTTP请求,因为我可以快速修复许多其他问题。
更糟糕的是,我使用了一个电子商务WordPress主题,该主题加载了10亿个元素来构建主页。在我的辩护中,它看起来不可思议。一些用户也同意这个设计是对的,所以耶,我不是一个人上了🙂的当。
但是伟大的视觉设计和缓慢的速度并不是齐头并进的。我需要一个快速的解决方案。
如何减少WordPress站点上的HTTP请求?
每次你访问WordPress网站,很多数据都会在你的浏览器和网站的服务器之间移动。换句话说,WordPress向各种服务器发出HTTP请求,以构建用户在加载您的站点时所看到的内容。
如果你的WordPress站点需要加载很多元素,你会有更多的HTTP请求,反之亦然。HTTP请求越多,网站速度越慢,用户体验(UX)越差,SEO得分越低,转化率也越低。
WordPress网站通常是动态的,这意味着在浏览器中呈现你的网站需要很多不同的部分。好消息是您可以减少HTTP请求并显著提高站点速度。
在今天的帖子中,你将确切地了解到如何做到这一点!
来自GTMetrix和Pingdom的报告通常会显示问题所在。因此,使用这两个工具测试您的站点,找出您需要改进的地方。准备好报告后,下面介绍如何减少HTTP/S请求并提高WordPress站点的速度。
第一步:整洁
伙计们,如果你的WordPress网站上有很多东西,你就会有太多的HTTP请求。这不需要动脑筋。减少HTTP请求的第一步是清理。
我的意思是去掉所有你不需要的插件。WordPress插件附带了大量的文件,可以是PHP、CSS或JavaScript(JS)。每个插件激发的每个文件都将创建一个HTTP请求。
如果你有大量的插件,你肯定会收到更多的HTTP请求。插件越少,请求就越少。很简单。
怎么办呢?
对您的插件进行审核。您必须安装哪些插件才能运行您的网站?是否有您不需要的插件?您有可以接入第三方服务器的插件吗?没有这些插件你能行吗?
要减少HTTP请求,请卸载所有不需要的插件。如果你偶尔需要一个插件,那么只在你需要的时候安装它。然后,卸载该插件。
同样的道理也适用于你不使用的WordPress主题和内容。把那些东西都清理干净。删除任何你不需要的东西;这对你的网站速度和安全性都有好处。
您可以走得更远,有选择地加载插件。例如,如果您只需要将联系人表单7加载到您的联系人页面上,则可以停止在该特定页面上加载其他插件。
那就太棒了,你不同意吗?想象一下,你只需要“Asset CleanUp” WordPress插件。
这个插件很容易使用,而且效率很高。或者用开发商的话说:
“Asset CleanUp”扫描您的页面并检测所有加载的资产。在编辑页面/帖子时,您所要做的就是选择不需要加载的CSS/JS,这样可以减少臃肿。
清理您已安装的内容;清除包含的垃圾评论垃圾信息。哦,是的,消除断开的链接,同时优化您的数据库。就提升站点速度而言,这些都是需要考虑的重要方面,但我离题了。
让我们回到减少HTTP请求的问题上来。
步骤2:优化图像
一个没有图片的网站是单调乏味的。他们说一张照片能说一千个字,这很酷。但是每个图像都有一个HTTP请求。雪上加霜的是,在需要很长时间加载的元素中,图像是最重要的。
不过,我们不能忽视这样一个事实,即大多数WordPress主题(阅读网站)都依赖于图片,还有很多图片。那么,考虑到这一点,您如何通过优化映像来减少HTTP请求呢?
首先,去掉所有你不用的图片。要冷酷无情,把所有的浮肿都去掉–你不需要它。之后,压缩和优化图像以删除不必要的文件数据。
虽然有很多插件可供选择,但我们真的很喜欢WP Compress。虽然这是一项高级服务,但强大的图像自动优化、无损压缩、降低服务器负载的云处理、WebP图像支持、自动调整大小等功能使投资物有所值(查看我们的评论了解更多信息)。另外,你可以免费获得100张图片–所以你至少可以试一试。
优化图像本身并不会减少您的HTTP请求,但它会减小图像文件的大小,这最终会带来更好的页面速度。
或者,为了减少HTTP请求,可以利用CSS图像精灵的强大功能。对于外行来说,精灵是放入单个图像文件中的图像集合。
然后使用CSS技巧,您可以选择要显示图像的哪一部分。但是这如何减少HTTP请求呢?这里有一个类比。
假设您的主页上需要五张图片。要加载您的站点,您的WordPress安装程序将五次访问服务器以获取图像。现在,如果您将所有五个图像都放在一个图像文件(Sprite)中,您的WordPress安装将只执行一次操作。
你明白我要说什么了吗?行程越少,HTTP请求就越少。最好的部分是创建和实现CSS图像精灵不需要汗水。您可以使用诸如CSS Sprite Generator之类的工具。只要您熟悉CSS,实现CSS图像精灵就很容易。
专业提示:如果您的网站使用支持异步加载图像和脚本的HTTP/2,那么您可以忘记所有关于CSS图像精灵的内容。GTMetrix在对性能进行评分时不会考虑HTTP/2,所以如果您的映像似乎正在创建大量的HTTP请求,请不要担心。
但我要说的是:如果CSS图像精灵可以显著减少您站点上的HTTP请求,并且您知道如何实现此功能,那么就去做吧,并将这些额外的时间从您的页面加载时间中去掉。无论您是否拥有HTTP/2。
毕竟,单个图像文件需要单个HTTP请求。10个单独的映像需要10个HTTP请求,以此类推。我知道你明白我的意思。
步骤3:合并和缩小HTML、CSS和JavaScript
我的WordPress网站上很多HTTP请求的主要原因是外部CSS和JavaScript文件。是的,我正在处理43个JS脚本和22个CSS文件。这是高达66个HTTP请求。
在大约130个HTTP请求中,外部CSS和JavaScript请求约占问题的51%!这太荒谬了。谢谢,GTMetrix,拍我的拳头。
如果我合并和缩小这44个JS和22个CSS文件,我可以显著减少HTTP请求、网站大小和加载时间。但是,这种“合并”和“缩小”业务究竟是怎么回事呢?
根据雷琳·莫雷的说法,缩写是“…”的过程。从HTML、CSS和JavaScript文件中删除执行代码不必要的任何不必要的字符,如注释、格式、空格和换行符。“。
缩小通过消除所有其他字符以仅保留代码来减小文件大小。但是,如果您有66个以上的外部脚本,缩减不会对最小化HTTP请求起到多大作用。为此,您需要组合CSS和JavaScript文件。
再一次,雷琳说:
同时,组合文件就像听起来一样。例如,如果您的网页加载了5个外部CSS文件和5个外部JavaScript文件,则将CSS和JavaScript分别合并到单个单独的文件中将只产生2个请求,而不是10个请求。
明白了吗?我当然希望如此。合并文件可以减少HTTP请求。另一方面,缩小会减小文件大小。把两者结合起来,你就是一举两得。
有插件吗?是的,当然!
有大量的WordPress插件可以组合和缩小您的文件。WP Rocket插件就是一个很好的例子。它基本上是最好的缓存插件之一,为您提供了只需点击几次即可合并和缩小文件的功能。
另一个流行的(免费的)选项是AutOptimize插件。
顺便说一下,同时减少外部CSS文件和JS脚本的数量?例如,我们在这里没有提到名字,你真的需要一个第三方评论平台吗?您需要现场广播插件吗?
不管我说什么,删除所有不需要的外部脚本和文件。
步骤4:调整呈现块CSS和JavaScript文件
在某些情况下,可能不能选择合并文件,特别是对于经常更改的第三方文件和脚本。在这种情况下,您可以推迟加载此类资源。HTTP/2支持异步加载文件,即所有文件同时加载。
如果您由于某种原因没有进行异步加载(可能您没有使用HTTP/2,或者脚本不是异步的),这些文件会显著降低您的网站速度。
请记住,您的网页是从上到下加载的。如果页面顶部有呈现块CSS和JS,浏览器将停止加载,直到文件完全加载。因此,在脚本加载之前,用户将看到一个空白页面,这需要时间。
多么?。将所有渲染分块脚本从网页顶部移动到底部。但这里要小心;您不需要将所有脚本都移到底部。我这么说是因为您的页面可能需要CSS和JS来提供完全吸引人的体验。
如果您延迟某些CSS或JavaScript文件,您的用户可能会看到您的网页的扭曲版本,直到页面完全加载,而这恰恰与您想要实现的目标相反。
因此,只延迟页面加载不需要的脚本。这样,您的用户就不会等很长时间才能加载您的页面。为什么?因为传递消息需要更少的HTTP请求。
它本身不会减少HTTP请求(因为所有脚本和文件最终都会加载),但它减少了呈现页面所需的HTTP请求数量。
这非常类似于图像的延迟加载;仅当图像位于视口中时才加载图像,而不是在加载页面的其余部分(也是最重要的部分)时加载图像。
顺便说一下,修复呈现阻塞的CSS&JS可能会显示您构建网页时不需要的文件和脚本。
例如,如果某个外部社交共享JS脚本加载时间较长,您可以推迟加载。最重要的是,你可以消除它,把社交分享融入到你的主题中。
您将消除HTTP请求,并在保留相同功能的同时提高站点速度。我知道编码到你的主题是一个很高的要求,大多数初学者,所以与高级WP用户或开发人员检查。
作为另一种选择,您可以使用WP Rocket插件来修复呈现阻塞脚本,但要小心。阅读他们的文档,因为如果你把事情搞砸了,你可以很容易地破坏你的网站。
有免费的选择吗?当然了!。我们是和WordPress合作的,记得吗?在其他插件中,您可以使用异步JavaScript。
第五步:使用缓存&CDN
您知道缓存和CDN可以减少您的HTTP请求吗?乍一看这似乎不是事实,但当您考虑到幕后发生的事情时,您可以使用缓存和CDN作为您的优势。
缓存涉及将静态文件存储在浏览器上,以便用户在以后的访问中不会下载这些文件。假设您有一个缓存插件,用户在第一次访问时就下载了您的缓存内容。
在以后的访问中,您的站点不会向服务器发出请求。相反,它将为来自浏览器的缓存资源提供服务,从而减少HTTP请求,并提高站点的速度。
CDN(或内容分发网络)是放置在世界各地的服务器网络。CDN也使用缓存,但为了更快的速度,CDN提供商从离访问者最近的服务器上提供缓存的内容。
更短的距离意味着更快的内容交付,而缓存意味着您的网站不需要从中央服务器重新下载相同的内容。你觉得这有意义吗?
最棒的是,有许多免费的CDN选项(或者至少是免费试用,这样你就可以从字面上看到它带来的不同)。在国外,我们使用并强烈推荐CloudFlare,但请选择您认为最适合您的CDN。
额外好处:确保支持HTTP/2
您可能正在尽一切努力减少HTTP请求,但您的Web主机可能是您问题的根源。不要感到惊讶;询问和思考,在这个时代和时代,谁使用HTTP/2以外的任何东西?
您可能甚至不知道HTTP/2是关于什么的。嗯,对于初学者来说,HTTP/2支持文件的异步加载等功能。与HTTP1.0相比,它还有其他优点,但这是另一天的教训。
如果您使用HTTP 1.0或更低版本,您会注意到相当数量的HTTP请求。
不要急着下结论,我见过仍在使用HTTP1.0和更早版本的PHP的虚拟主机提供商。是的,即使有HTTP/2和PHP7的明显好处,我也不是在虚张声势;当他们的一些插件不起作用时,他们的一些客户会来找我,这很令人恼火!
但是,说真的,为什么?一些虚拟主机提供商并没有因为PHP5.6被弃用和存在安全漏洞而烦恼,这只是另一回事。如果他们不支持HTTP/2,那对您的交易来说是个真正的破坏者。
联系您的主机或使用KeyCDN的工具检查您的服务器是否支持HTTP/2。最好的Web主机支持HTTP/2和最新版本的PHP。如果您的主机在这两种情况下都比较落后,请要求他们升级或选择更好的Web主机。
结语。
减少WordPress站点上的HTTP请求就是消除您不需要的东西。如果你的WordPress网站上有很多东西,你会有很多HTTP请求和相对较慢的页面速度。
要减少HTTP请求,请清理您的站点,优化图像,修复呈现阻塞脚本,使用缓存,并确保您的主机支持HTTP/2。除此之外,努力创建不需要加载大量资产的简单、干净的网站。
如果您有任何问题,请在下面的评论部分告诉我们。为更快的网站和更美好的未来干杯!