您是否曾经浏览过效果不佳的网站?太恐怖了 到处都是代码。样式表几乎无法连接。一个回形针以某种方式将页眉固定在一起。带宽不足。谁知道最后一次审核重定向。还有HTTP请求!因此,HTTP请求如此之多。甚至不让我们开始使用HTTP请求。
实际上,经过深思熟虑后,我们便可以开始。HTTP请求在Web优化领域非常重要,尤其是在速度对于可见性变得如此重要的今天。确保您的请求运行顺利不再是一种选择。这是必须的。
因此,让我们仔细看一下,并通过调整请求将您的网站变成热点。因为如果您曾经浏览过一个维护良好,性能卓越的网站,那将是一件美事。更不用说,它像SEO冠军一样运行。
什么是HTTP请求?
HTTP请求是使用超文本文本传输协议(HTTP)从客户端发送到服务器以请求信息的消息。Web浏览器(客户端)通过这种方法接收显示网页所需的文件。这些文件包括图像,文本,CSS,JavaScript等。
每次您访问网页时,都会出现以下情况:
您的浏览器向页面的托管服务器打个招呼,并询问它是否将通过包含与页面相关的内容的文件(例如视频)进行发送
A. 服务器要么说“迷路”,要么慷慨地授予请求
B. 如果被授予,浏览器会说“谢谢”并开始呈现页面
C. 如果浏览器需要更多内容来呈现页面,它将发送另一个请求
为什么减少HTTP请求很重要?
从上面的示例中可以看到,HTTP请求是显示您的站点的关键组成部分,但是所有来回交谈都需要时间。实际上,雅虎声称网页的加载时间中有80%用于下载HTTP请求。
网页需要下载诸如图像,样式表和脚本之类的信息才能正确显示。该信息是通过浏览器发送到站点服务器的HTTP请求来检索的。HTTP请求越多,页面加载所需的时间就越长。页面加载时间越长,用户离开您的网站的可能性就越大,页面在SERP中显示的可能性就越小。这对周围的企业都是不利的。
实际上,研究表明,页面加载时间仅从2秒增加到5秒会导致跳出率从9%飙升到38%。
因此,减少HTTP请求对SEO和用户体验都有利。
网页应该有多少个HTTP请求?
您应该努力将HTTP请求的数量保持在50以下。如果您收到的请求数低于25,则说明您做得很棒。
从本质上讲,HTTP请求还不错。您的网站需要它们正常运行并看起来不错。但是您可能不需要的HTTP请求数量就很多。总体而言,您的目标应该是在不牺牲用户体验或页面功能的情况下尽可能少地添加。
当前,每页的平均请求数约为70。但是我们知道您可以做得更好。
关于最小化往返时间的注意事项
从此处开始减少HTTP请求的数量。从字面上看。
往返时间(RTT)是服务器响应某人访问您的站点时发送的单个文件请求所花费的时间。为了正确加载,需要单独请求文件。这样做会花费很多时间。减少他们的人数可以缩短时间。
一些速度改进指南认为将RTT减到最小是必不可少的任务。还有一些解决方案(例如CDN)可以降低RTT,而无需执行其他任何操作。但是,尽管这可能会在短期内提高速度,但并不是降低HTTP请求。
因此,如果您有兴趣提高网站的整体效率和性能(无创可贴),请继续阅读!下面我们将深入探讨通过CSS Sprite,串联和修剪重定向等任务来减少请求(从而最小化RTT)的细节。
所以,让我们动手吧。(不是字面上的意思。)
1.合并HTML,CSS,JavaScript文件
合并文件(如果您是一个书呆子,又称“串联”)听起来像是有效的。如果您的站点运行多个CSS和JavaScript文件,则此解决方案将它们合并为一个。因为请求一个文件比请求十个文件快得多。
一个站点可以具有多个CSS文件和多个JS文件。为您的网站运行CSS测试和JS测试,以查看您的网站数量。如果您有多个外部CSS或JS文件,则可以尝试将它们组合为一个CSS或JS文件。
2.优先放置文件
文件放置在请求速度中起着重要作用。最佳做法是,与设计和界面有关的CSS应该出现在页面的部分顶部。这些样式表是正确显示页面所不可或缺的,因此需要尽快加载。
另一方面,JavaScript应该位于页面底部标记的正上方。这是因为加载脚本严重延迟了页面的呈现。
但是在您随意整理文件之前,请不要忘记……。
3.延迟JavaScript解析
并非所有JavaScript都是一样的。加载网页需要一些JS,仅将其移动到页面底部是不够的。这就是延迟JavaScript的用武之地。
如果您延迟JS的解析(加载),它将确保任何渲染阻止,非关键JS仅在页面加载后才运行,而关键JS仍能正常执行。有很多插件可以自动为您执行此操作,例如W3 Total Cache。或者,您可以手动推迟JavaScript。
4.修复断开的链接
修复断开的链接(404错误)不仅可以缩短页面加载时间,而且还可以解决问题。到处都是聪明的SEO。对于存在的每个外部链接,都会发送一个HTTP请求。如果链接的页面存在,它将比不存在的页面响应更快。因此,拥有将访客定向到不存在的页面的链接会使您的网站等待更长的时间,浪费带宽并浪费资源。
5.减少重定向
具有301(永久)或302(临时)重定向绝对比404错误(链接断开)更可取,但是它们仍然不是理想的选择。在一个完美,快速的世界中,不会有重定向。但这并不实际。
另外,请务必检查.htaccess或其他服务器配置文件,以确保您没有任何旧的旧版重定向。如果未选中这些选项,则确实会增加您的网站并减慢其速度。.
6.使用CSS Sprites
CSS Sprite是一个大图像,代表您网站上的所有图像。有点像站点地图,但用于图片。它的作用就像一张地图,其中包含页面上使用的每个图像的坐标。它包括图标,徽标,照片,图形等。然后,使用CSS将这些图像放置在页面上所需的位置。
对于浏览器来说,加载一张大图像要比加载许多小图像更快。为什么?你猜到了!因为这样做需要的请求更少。
7.不要使用@Import
避免使用CSS @import连接到样式表。而是使用标记直接链接到它们。
CSS @import在客户端进行操作,因此每个@import请求都会向主文件请求中添加另一个请求。这个句子的要求太多了,更不用说您的网站了。标记允许浏览器并行下载样式表,这更加简单,快捷。此外,某些较旧的浏览器甚至不再支持@import,因此最好避免使用它们。
8.减少外部脚本
外部脚本是从其他第三方位置提取的代码,而不是托管在您的服务器上。它们包括注释模块,分析工具,外部字体(如Google Fonts),社交媒体框等内容。例如,当您允许百度蜘蛛或Google蜘蛛跟踪您的网站时,这会向其添加外部脚本,并带有一个额外的HTTP请求。
9.启用保持活动
当某人访问您的页面时,其浏览器会将消息发送到您的服务器,要求获得下载页面文件的权限。HTTP Keep-Alive在两者之间打开单个连接,该连接允许下载多个文件而无需反复征求许可。这样可以节省大量带宽。
要启用HTTP Keep-Alive复制并将以下代码粘贴到您的.htaccess文件中(请先进行备份)
10.添加过期标题
如果您曾经在Gtmetrix上进行过性能测试,那么很有可能会利用浏览器缓存获得一个“ F”。那是因为您没有设置文件的到期时间。(不用担心,我们已经做到了。)
Web服务器使用Expires标头来告诉浏览器,当某人访问您的某个页面时,其内容将其缓存版本存储在浏览器中。(除非他们已禁用缓存或正在使用私有窗口。)如果他们返回该页面而不是再次从服务器请求所有文件,则浏览器将从缓存中加载该文件。这快很多。添加Expire标头规定了此过程,从而减少了HTTP请求的数量。
11.减少插件
上面,我们尝试提供插件和手动解决方案来实现任务。这是因为尽管插件使生活更轻松,但它们并不总是使页面加载更快。
插件不仅会增加您网站的整体规模,而且还会生成HTTP请求。在某些情况下,单个插件会发送多个请求。例如,在网站的每个页面上都会调用Disqus,而无论页面上是否正在使用它,这都会产生许多不必要的请求。
您可以使用Gtmetrix和Pingdom之类的工具进行测试,以查看页面的HTTP请求总数(并确定减少工作的基准)。如果您成功实现了上述任务(甚至只有少数任务),您会发现立即有所不同。最重要的是,如果操作正确,用户体验将不会受到影响,并且您的访问者对于您在幕后所做的所有修补工作都不明智。他们将只欣赏您网站的加载速度。