石家庄网站建设 > 博客教程 > 网站优化知识 >

优化网站排名之:如何更快的提高网站速度,4个马上就可以拿来用的好方法

发布时间:2020-07-22

优化网站排名之:更快的网站速度:4个开箱即用的想法
技术搜索引擎优化 | 高级搜索引擎优化
作者的观点完全是他或她自己的观点(不包括不太可能发生的催眠事件),可能并不总是反映Moz的观点。
我们大多数人都进行了站点速度审核,或者看到其他人进行了审核。这些对于业务确实很有帮助,但是我经常发现它们的关注范围很狭窄。通常,我们使用众所周知的工具来抛出一堆东西,然后从那里深入研究。
 
但是,如果我们进行更深入的研究,通常还会有关于如何提高站点速度的其他想法。我经常看到很多机会,这些速度从未在站点速度审核中涵盖。大多数网站速度的提高都是一系列微小变化的结果,因此在本文中,我将介绍一些我在任何网站速度审核中都从未见过的想法,所有这些都会有所作为。
 
图像优化的另一个角度
考虑通过PNG优化的SVG
最近,我正想预订一些票来观看《冰雪奇缘2》(因为erm,我的孩子们……),因此登陆了此页面。它使用三个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标记直接放入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。
 
退缩,JavaScript!HTML可以处理...
如今,如今经常有这样的情况,由于提供了现成解决方案的JavaScript库的盛行,我发现JavaScript被用于没有它就可以实现的功能。更多的JS库意味着更多的下载空间,可能需要更多往返服务器中其他文件的往返时间,进而增加JavaScript执行时间和成本。
 
对于您如何达到这一点,我深表同情。通常会给开发人员提供较差的摘要/说明,而这些摘要/说明无法指定有关性能的任何内容,而只能指定功能。他们通常时间不多,因此很容易最终就丢掉一些东西。
 
但是,就可以使用HTML和/或CSS实现的功能而言,已经取得了许多进步。让我们看一些例子。
 
带有搜索的组合框
如今,具有文本搜索选项的下拉框是相当普遍的界面元素。我最近遇到的一篇文章介绍了如何使用Select2 Javascript库制作这样的列表:
 
 
这是一个有用的UI元素,可以为您的用户提供帮助。但是,Select2库中有一个JavaScript库,而JavaScript库又依赖于某些CSS和JQuery库。这意味着要进行三次往返来收集一堆大小不一的文件:
 
 
对于网站速度而言,这不是理想的选择,但是我们可以肯定值得这样做,以便为用户提供简化的界面。
 
但是,实际上可以通过HTML数据列表元素立即使用此功能:
 
 
这允许用户搜索列表或自由键入他们自己的响应,从而提供相同的功能。此外,它在智能手机上具有本机界面!
 
您可以在此Codepen中看到这一点。
 
详细信息/摘要
LonelyPlanet有一个漂亮的网站,而我正在浏览有关西班牙的页面,该页面具有一个“阅读更多”链接,大多数网络用户都会熟悉该链接:
 
 
就像我看到的几乎所有此实现一样,他们都使用JavaScript库来实现此目的,这又带来了很多开销。
 
但是,HTML有一对内置的标签,分别称为detail和summary,旨在准确实现此功能。免费且以HTML格式原生提供。无需任何开销,需要屏幕阅读器的用户可以更方便地访问,同时还可以向Google传达语义。
 
可以使用CSS以各种灵活的方式对这些标签进行样式设置,并重新创建我在那里看到的大多数JS版本。
 
 
...和更多
有关可以使用HTML而不是JS实现的功能的更多示例,请查看以下链接:
 
总结:检查网站的功能,看看有什么机会可以减少对本地Java / HTML选项的大型Javascript库的依赖。
 
要点:请记住,不仅是有问题的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,那么它就像打开它一样简单。
 
您可以使用此工具来检查已启用的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的转换功能在两个方向上使用一个图像:
 
 
您可以查看该Codepen的示例。
 
另一个例子是,同一徽标在页面的不同部分以不同的样式出现;通常,它们会加载多个变体,这是不必要的。CSS可以通过多种方式为徽标重新着色:
 
 
这里有一个Codepen展示了这种技术的作用。如果您要计算达到任意颜色所需的CSS滤镜值,请查看此出色的颜色计算器。
 
互动(例如菜单和选项卡)
菜单和选项卡之类的导航元素通常是用JavaScript实现的,但是这些也可以用纯CSS完成。请查看此Codepen的示例:
 
 
动画制作
CSS3在CSS中引入了许多强大的动画功能。通常,它们不仅比JavaScript版本要快,而且还可以更加平滑,因为它们可以在操作系统的本机代码中运行,而不必执行相对较慢的Javascript。
 
看看“打Do鸟”作为一个例子:
 
 
您可以在本文中找到更多内容。CSS动画可以以相对较低的性能成本在页面上添加很多字符。
 
...和更多
有关使用纯CSS解决方案可以实现的功能的更多示例,请查看:
 
 
要点:使用CSS可以优化使用轮播或过滤器加载的文件数量。
 
要点: CSS动画可以在页面上添加字符,并且所需资源通常少于JavaScript。
 
总结: CSS完全能够实现许多交互式UI元素。
 
包起来
希望您发现这些示例本身很有用,但是我想说的更广泛的一点是,我们所有人都应该尝试更多地考虑站点速度。特别重要的是减少服务器所需的往返次数;即使是小型资产也需要一些时间来获取,并且会对性能(尤其是移动设备)产生显着影响。
 
除了我们这里讨论的内容之外,还有很多其他想法,因此,如果您遇到其他问题,请务必跳入评论。

网站建设
Website
客户案例
Customer case
关于展为
About ZHANWEI
展为致力于网站建设与网络营销,微信营销,专业领域包括网站建设、网站seo优化推广、移动互联网营销、三网合一网站建设,微信营销小程序开发,与其他网站建设及系统开发公司不同,我们的整合解决方案结合了展为网络建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

扫码咨询

Copyright © 石家庄展为网络有限公司. 冀ICP备14018173号-6 Copyright 2010-2020版权所有
展为网络
网站建设
客户案例