茂石虎博客 探索发现 网站速度跟什么有关系吗,怎么测试和提高网站打开速度?

网站速度跟什么有关系吗,怎么测试和提高网站打开速度?

我们大多数人都进行了网站速度测试,或者看到其他人进行了提升。这些对于业务确实很有帮助,但是我经常发现它们的关注…

网站速度测试提升

我们大多数人都进行了网站速度测试,或者看到其他人进行了提升。这些对于业务确实很有帮助,但是我经常发现它们的关注范围很狭窄。通常,我们使用众所周知的工具来抛出一堆东西,然后从那里深入研究。

但是,如果我们进行更深入的研究测试,通常还有其他想法可以提高网站打开速度。我经常看到很多机会,这些机会从未在网站速度测试中涵盖。大多数网站打开速度的提高都是一系列微小变化的结果,因此在本文中,我将介绍一些我在任何网站速度测试中从未见过的想法,所有这些都会有所作为。

图像优化的另一个角度

考虑通过PNG优化的SVG

我最近正想预订一些票来观看《冰雪奇缘2》(因为erm,我的孩子们……),因此落在了此页面上。它使用三个SVG图像作为传输图标:

SVG

SVG图像是矢量图像,因此非常适合图标之类的东西。如果您将图像显示为PNG,则可能会要求设计师提供原始SVG,  因为这样可以节省大量资金。尽管并非总是更好,但使用SVG可以节省60%的文件大小。

在这种情况下,这些图标每个大约为1.2k,因此它们很小。他们可能会受到网站速度测试者的关注(Page Speed Insights或GTMetrix均未在此页面上提及这些图像)。

因此,您可能会想:“它们的总和少于5,000,您应该寻找更大的问题!”,但让我们来看一下。首先,我们可以通过Jake Archibald的SVG 压缩工具运行它们;这是一个很棒的免费工具,在较大的SVG上,它可以发挥很大的作用。

在这种情况下,文件很小,因此您可能仍在思考“为什么要打扰?”。该工具将它们压缩到1240字节到630字节之间,而没有任何质量损失,这是一个不错的比率,但是并没有节省多少。

但是,……既然我们已经压缩了它们,我们在交付它们时可以有不同的想法……

内联图像

GTMetrix提出了有关内联少量CSS或JS的建议,但未提及内联图像。图像也可以内联,有时这可能是正确的方法。

如果您认为即使很小的图像文件也需要完整的往返(这可能对speed产生非常实际的影响),即使对于小的文件,这也可能需要很长时间。对于上面的Cineworld传输图像,我模拟了“快速3G”连接并看到:

内联图像

该站点未使用HTTP2,因此等待时间很长,然后映像(1.2kb)需要近600ms的时间加载(没有HTTP2也意味着这会阻止其他请求)。这些图像共有三个,因此它们之间可能会对页面速度产生真正的影响。

但是,我们现在将它们压缩到每个只有几百个字节,并且SVG图像实际上是由标记组成的,类似于HTML:

SVG图像

实际上,您可以将SVG标记直接放入HTML文档中!

如果我们对所有三个传输图像都执行此操作,则从服务器发送到我们的浏览器的此页面的压缩HTML将从31,182字节增加到31,532字节-所有3个图像仅增加了350字节!

总结一下:

  • 我们的HTML请求增加了350个字节,几乎没有任何内容
  • 我们可以丢弃到服务器的三个往返行程,这可以看到我们花费了大量时间

你们中的有些人可能已经意识到,如果图像不是内联的,则可以将它们分别缓存,因此以后的页面请求将不需要重新提取它们。但是,如果我们考虑:

  • 每个图像最初在网络上大约为1.5kb(它们不会压缩SVG),顶部有大约350个字节的HTTP标头,总共传输了大约5.5kb。因此,总的来说,我们减少了网络上的内容量。
  • 这也意味着将需要20多个综合浏览量才能从中进行缓存。

要点:考虑在哪里有机会使用SVG而不是PNG。

要点:确保优化了SVG图像,请使用我链接到的免费工具。

要点:内联小图像很有意义,并且可以大大提高型能。

注意:您也可以内联PNG-  请参阅本指南。

注意:对于优化的PNG / JPG图像,请尝试Kraken。

退下,JauaScript!HTML可以处理此问题…

如今,时常如此,由于提供了一种现成解决方案的JauaScript库的盛行,我发现JauaScript被用于没有它就可以实现的功能。更多的JS库意味着更多的下载空间,可能需要更多往返服务器中其他文件的往返时间,进而增加JauaScript执行时间和成本。

我很同情你如何做到这一点。通常会给开发人员提供较差的摘要说明,而这些摘要说明无法指定有关型能的任何内容,而只能指定功能。他们通常时间不多,因此很容易最终就丢掉一些东西。

但是,就可以使用HTML或CSS实现的功能而言,已经取得了许多进步。让我们看一些例子。

带有搜索的组合框

如今,具有文本搜索选项的下拉框是相当普遍的界面元素。我最近遇到的一篇文章介绍了如何使用Select2 JauaScript库制作这样的列表:

文本搜索

这是一个有用的UI元素,可以为您的用户提供帮助。但是,Select2库中有一个JauaScript库,而JauaScript库又依赖于某些CSS和JQuery库。这意味着要进行三次往返来收集一堆大小不一的文件:

  • jQuery-101kb
  • Select2 JauaScript-24kb
  • Select2 CSS-3kb

对于网站打开速度而言,这不是理想的选择,但是我们可以肯定值得这样做,以便为用户提供简化的界面。但是,实际上可以通过HTML数据列表元素立即使用此功能:

HTML数据列表元素

这允许用户搜索列表或自油键入他们自己的响应,从而提供相同的功能。此外,它在智能手机上具有本机界面!您可以在此Codepen中看到这一点。

详细信息/摘要

LonelyPlanet有一个漂亮的网站,我正在看有关西班牙的页面,该页面具有一个“阅读更多”链接,大多数网络用户都会熟悉:

LonelyPlanet

就像我看到的几乎所有此实现一样,他们都使用JauaScript库来实现此目的,这又带来了很多开销。但是,HTML有一对内置的标签,分别称为detailsummary,旨在完全实现此功能。免费且以HTML格式原生提供。无需任何开销,需要屏幕阅读器的用户可以更方便地访问,同时还可以向Google传达语义。

可以使用CSS以各种灵活的方式对这些标签进行样式设置,并重新创建我在那里看到的大多数JS版本。

在此处查看一个简单的演示:https : //codepen.io/TomAnthony/pen/GRRLrmm

…和更多

有关可以使用HTML而不是JS实现的功能的更多示例,请查看以下链接:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/html-can-do-that-c​​0n

总结:检查您网站的功能,看看有什么机会可以减少对本地Jaua / HTML选项的大型Jauascript库的依赖。

要点:请记住,不仅有问题的JS文件的大小,而且需要往返的次数。

注意:在某些情况下,您应该使用JS解决方案,但是权衡利弊很重要。

网络调整

每次浏览器必须从服务器收集资源时,它都必须通过Internet发送消息并返回。它的速度受光速的限制。这听起来像是一件荒谬的事情,但它意味着即使很小的请求也会增加页面加载时间。如果您没有找到上面的链接,那么我解释HTTP2的帖子将更详细地讨论此问题。

我们可以采取一些措施来帮助缩短这些请求的距离或减少所需的往返次数。这些稍微有点技术型,但是可以取得一些真正的胜利。

TLS 1.3

TLS(或SSL)是用于保护HTTPS连接的加密技术。从历史上看,在浏览器和服务器之间进行了两次往返来设置该加密-如果用户距服务器50毫秒,则每个连接200毫秒。请记住,Google历史上建议将传递HTML的目标时间定为200毫秒(在最近的更新中,这似乎有些放松);您在这里浪费了很多时间。

最近定义的TLS 1.3标准将该过程从两次往返减少到一次,这可以节省用户最初连接到您的网站的宝贵时间。

向您的技术团队咨询有关迁移到TLS 1.3的信息;不支持它的浏览器将毫无问题地回退到TLS 1.2。所有这些都在幕后,而不是任何形式的迁移。没有理由不这样做。

如果您使用的是CDN,那么只需打开CDN即可简单。您可以使用此工具来检查已启用的TLS版本。

QUIC / HTTP 3

在过去的2-3年中,我们已经看到许多站点从HTTP 1.1迁移到HTTP 2,这是一个幕后升级,可以真正提高速度。

紧随其后的是,出现了一对新兴的标准,称为QUIC + HTTP / 3,可进一步优化浏览器与服务器之间的连接,从而进一步减少所需的往返行程。

对这些功能的支持才刚刚开始变得可行,但是如果您是CloudFlare的客户,则可以在今天和未来6个月内启用Chrome和Firefox,以实现对它们的支持,您的用户将获得更快的速度。

超级路由

当用户连接到您的网站时,他们必须从任何位置打开到您的服务器(或CDN)的网络连接。如果您将互联网想象成一系列道路,那么您可以想象它们需要跨这些道路“驱动”到您的服务器。但是,这意味着拥塞和交通堵塞。

事实证明,一些大型云公司拥有自己的私家路,这些私家路的坑洼更少,流量减少并且速度限制得到改善。如果只有您的网站访问者可以访问这些道路,他们可以更快地向您“开车”!

好吧,你猜怎么着?他们能!

对于CloudFlare,他们通过其Argo产品提供此访问权限,而如果您完全在AWS上,则可以使用其Global Accelerator。这样一来,对您网站的请求就可以利用其专用网络并提高速度。如果您已经是客户,两者都是非常便宜的。

要点:如果您使用CDN,则其中许多此类好处都非常容易获得。如果尚未使用CDN,则应该使用CDN。CloudFlare是一个不错的选择,如果您使用的是AWS,那么CloudFront也是如此。如果您更像是专业人士,那么它们是可配置型最高的。

要点: TLS 1.3现在得到了广泛的支持,并为新连接提供了显著的速度改进。

要点: QUIC / HTTP3才刚刚开始获得支持,但是在接下来的几个月中,它将广泛推广。QUIC包含TLS 1.3的优点以及更多优点。如今,典型的HTTP2连接需要3次往返才能打开。QUIC只需要一个!

要点:如果您使用的是CloudFlare或AWS,则有可能仅通过翻转开关即可打开智能路由功能来提高速度。

让CSS做更多

上面我谈到了HTML如何具有内置功能,您可以利用这些功能来节省对“本地化”解决方案的依赖,从而需要更多的代码(和浏览器方面的处理)来实现。在这里,我将讨论一些CSS可以为您做同样的例子。

重用图像

通常,您会发现在整个页面中的多个位置使用相似图像的页面。例如,徽标上不同颜色的变体,或指向两个方向的箭头。作为唯一资产(无论它们多么相似),每个都需要单独下载。回到我的追捕电影票上面,我在那里看着这个页面,我们可以看到,有左右箭头旋转目马:

重用图像

与上面使用的逻辑类似,尽管这些映像文件很小,但它们仍需要往返才能从服务器获取。

但是,箭头是相同的-只是指向相反的方向!我们很容易使用CSS的转换功能在两个方向上使用一个图像:

CSS

您可以查看该Codepen的示例。

另一个例子是,同一徽标在页面的不同部分以不同的样式出现;通常它们会加载多个变体,这是不必要的。CSS可以通过多种方式为徽标重新着色:

CSS滤镜值

这里有一个Codepen展示了这种技术的作用。如果您想计算达到任意颜色所需的CSS滤镜值,请查看此出色的颜色计算器。

互动(例如菜单和选项卡)

通常,导行元素(如菜单和选项卡)是用JauaScript实现的,但是这些也可以用纯CSS完成。请查看此Codepen的示例:

互动

动画制作

CSS3在CSS中引入了许多强大的动画功能。通常,它们不仅比JauaScript版本快,而且还可以更加平滑,因为它们可以在操作系统的本机代码中运行,而不必执行相对较慢的Jauascript。

看看“打Do鸟 ”为例:

动画制作

您可以在本文中找到更多内容。CSS动画可以以相对较低的型能成本为页面添加很多字符。

…和更多

有关使用纯CSS解决方案可以实现的功能的更多示例,请查看:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/css-can-do-that-18g7m

要点:使用CSS优化必须使用旋转或过滤器加载的文件数。

要点: CSS动画可以在页面上添加字符,并且所需资源通常少于JauaScript。

要点: CSS完全能够实现许多交互式UI元素。

结论

希望您发现这些示例本身很有用,但是我想说的更广泛的一点是,我们所有人都应该尝试更多地测试网站打开速度。特别重要的是减少服务器所需的往返次数;即使是小型资产也要花费一些时间,并且会对型能(尤其是移动设备)产生显著影响。

本文来自网络,不代表茂石虎博客立场,转载请注明出处:/1940.html

作者: 茂石虎

茂石虎(www.maoshihu.com)互联网从业20年,行业领导者,擅长SEO、网络营销、视频营销、内容营销等。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

0898-88888888

在线咨询: QQ交谈

邮箱: redyelove@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部