CONTACT
US
2020-01-09 Viewed: 715 Tags: seo google  谷歌seo  数聚梨推荐  谷歌优化  

​谷歌SEO: 4个快速提升网页速度的方法

我们大多数人都进行了站点速度审核,或者看到其他人进行了审核。这些对于SEO效果及业务确实很有帮助,但是我经常发现它们的关注范围很狭窄。通常,我们使用众所周知的工具来抛出一堆东西,然后从那里深入研究。但是,如果我们进行更深入的研究,通常还有其他办法可以提高站点速度。 我经常看到很多机会,这些机会从未在站点速度审核中涵盖。 大多数网站速度的提高都是一系列微小变化的结果,今天我们将会介绍一些如何快速提升网页打开速度的办法。

 

图像优化的另一个角度

 

1. 考虑使用SVG优化PNG图片

 

我最近正想预订几张《冰雪奇缘2》的电影票陪家人观看,因此登陆了此页面。它使用三个SVG图像作为传输图标:


 


SVG图像是矢量图像,因此非常适合图标之类的东西。如果您的图像显示为PNG,则可能会要求设计师提供原始SVG,因为这样可以节省大量时间。尽管并非总是更好,但使用SVG可以节省60%的文件大小。在这种情况下,这些图标每个大约为1.2k,因此它们很小。他们可能会在站点速度审核的雷达范围内高速飞行(Page Speed Insights或GTMetrix都根本不会在此页面提及这些图像)。我们可以通过Jake Archibald的SVG压缩工具运行它们,这是一个很棒的免费工具,在较大的SVG上,它可以发挥很大的作用。该工具将它们压缩到1240字节到630字节之间,而没有任何质量损失,这是一个不错的比率。

 

2. 内联图像

 

GTMetrix提出了有关内联少量CSS或JS的建议,但未提及内联图像。图像也可以内联,有时这可能是正确的方法。如果您认为即使很小的图像文件也需要完整的往返行程(这可能会对速度产生非常实际的影响),即使对于小的文件也可能需要很长时间。该站点未使用HTTP2,因此等待时间很长,然后映像(1.2kb)需要近600ms的时间加载(没有HTTP2也意味着这会阻止其他请求)。这些图像共有三个,因此它们之间可能会对页面速度产生真正的影响。但是,我们现在将它们压缩到每个只有几百个字节,并且SVG图像实际上是由标记组成的,类似于HTML:

 

 

实际上,您可以将SVG标记直接放入HTML文档中!如果我们对所有三个传输图像都执行此操作,则从服务器发送到我们的浏览器的此页面的压缩HTML将从31,182字节增加到31,532字节,所有3个图像仅增加了350字节!

 

让一让,JavaScript!HTML可以处理此问题!

 

如今,时常如此,由于提供了一种现成解决方案的JavaScript库的盛行,我发现JavaScript被用于没有它就可以实现的功能。更多的JS库意味着更多的下载空间,可能需要更多往返服务器中其他文件的往返时间,进而增加JavaScript执行时间和成本。通常我们会给开发人员提供较差的摘要或说明,而这些摘要说明无法指定有关性能的任何内容,而只能指定功能。他们通常时间不多,因此很容易最终就丢掉一些东西。但是,就可以使用HTML或CSS实现的功能而言,已经取得了许多进步。让我们看一些例子。

 

1. 带有搜索的组合框

 

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

 

 

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

 

  • jQuery-101kb

  • Select2 JavaScript-24kb

  • Select2 CSS-3kb

 

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


  


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

 

2. 详细信息摘要


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

 

 

就像我看到的几乎所有此实现一样,他们都使用JavaScript库来实现此目的,这又带来了很多开销。但是,HTML有一对称为详细信息和摘要的内置标记,它们专门用于实现此功能。 免费且以HTML格式原生提供。 无需任何开销,需要屏幕阅读器的用户可以更方便地访问,同时还可以向Google传达语义。可以使用CSS以各种灵活的方式对这些标签进行样式设置,并重新创建我在那里看到的大多数JS版本。

 

网络调整

 

每次浏览器必须从服务器收集资源时,它都必须通过Internet发送消息并返回。它的速度受光速的限制。这听起来像是一件荒谬的事情,但它意味着即使很小的请求也会增加页面加载时间。如果您没有找到上面的链接,我的解释HTTP2的帖子将更详细地讨论此问题。我们可以采取一些措施来帮助缩短这些请求的距离或减少所需的往返次数。这些稍微有点技术性,但是可以取得一些真正的胜利。

 

1. TLS 1.3

 

TLS(或SSL)是用于保护HTTPS连接的加密技术。从历史上看,在浏览器和服务器之间进行了两次往返来设置该加密-如果用户距服务器50毫秒,则每个连接200毫秒。请记住,Google历史上建议将传递HTML的目标时间定为200毫秒(在最近的更新中,这似乎有些放松),您在这里浪费了很多时间。最近定义的TLS 1.3标准将该过程从两次往返减少到一次,这可以节省用户最初连接到您的网站的宝贵时间。向您的技术团队咨询有关迁移到TLS 1.3的信息;不支持该功能的浏览器将毫无问题地回退到TLS 1.2。所有这些都在幕后,而不是任何形式的迁移。没有理由不这样做。如果您使用的是CDN,那么只需打开CDN即可简单。您可以使用此工具来检查已启用的TLS版本。

 

2. QUIC / HTTP 3

 

在过去的2-3年中,我们已经看到许多站点从HTTP 1.1迁移到HTTP 2,这是一个幕后升级,可以真正提高速度。紧随其后的是,出现了一对新兴的标准,称为QUIC + HTTP / 3,可进一步优化浏览器与服务器之间的连接,从而进一步减少所需的往返行程。对这些功能的支持才刚刚开始变得可行,但是如果您是CloudFlare的客户,则可以在今天和未来6个月内启用Chrome和Firefox,以实现对它们的支持,您的用户将获得更快的速度。

 

3. 超级路由

 

当用户连接到您的网站时,他们必须从任何位置打开到您的服务器(或CDN)的网络连接。如果您将互联网想象成一系列道路,那么您可以想象它们需要跨这些道路“开车”到您的服务器。但是,这意味着拥塞和交通堵塞。事实证明,一些大型云公司拥有自己的私家路,这些私家路的坑洼更少,流量减少并且速度限制得到改善。如果只有您的网站访问者可以访问这些道路,他们可以更快地开车!

 

对于CloudFlare,他们通过其Argo产品提供此访问权限,而如果您完全使用AWS,则可以使用其Global Accelerator。这样一来,对您网站的请求就可以利用其专用网络并提高速度。如果您已经是客户,两者都是非常便宜的。如果您使用CDN,则其中许多此类好处都非常容易获得。如果尚未使用CDN,则应该使用CDN。CloudFlare是一个不错的选择,如果您使用的是AWS,那么CloudFront也是如此。如果您更像是专业人士,那么它们是可配置性最高的。

 

让CSS做更多

 

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

 

1. 重用图像

 

通常,您会发现在整个页面中的多个位置使用相似图像的页面。例如,LOGO上不同颜色的变体,或指向两个方向的箭头。作为唯一资产(无论它们多么相似),每个都需要单独下载。尽管这些映像文件很小,但它们仍需要往返才能从服务器获取。我们很容易使用CSS的转换功能在两个方向上使用一个图像。

 

2. 互动(例如菜单和标签)

 

通常,导航元素(如菜单和选项卡)是用JavaScript实现的,但是这些也可以用纯CSS完成。

 

3. 动画制作

 

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

 

小结

 

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


数聚梨软件为您提供最专业的谷歌seo优化服务,1-3个月内网站权重以及关键词进入谷歌前10页数量显著增加


立即点击淘宝咨询


立即扫描二维码微信咨询




More blogs    


所有评论仅代表网友意见