Return to site

如何使用Google Page Speed Test Tool实现100/100

网站加载速度是整体用户体验的优先级,它也是数百个SEO排名因素之一。事实是,如今人们没有耐心等待超过五秒钟来加载页面。如果您的网站加载速度不够快,您将失去潜在客户。

超过50%的在线流量来自移动设备,每个人都希望网站几乎可以即时加载。考虑到这一点,在本文中,我将向您展示如何使用Google PageSpeed Insights Tool for Monitor Backlinks为桌面和移动设备获得100/100分数。

动机

我们的网站已经加载得非常快,但我们知道总有办法让它变得更好。

有一天,在使用PageSpeed Tool的时候,我注意到Google的网站在移动设备上得分很高,为59/100。桌面版本在95/100时做得更好。

也许他们应该使用他们的工具来改进他们的网站,对吗?

这就是促使我们加快网站加载速度并证明你可以获得100/100的原因。这不是一种痴迷; 它的目标是完美。

我们从87/100开始。

这是我在实施一些我即将与您分享的技术后得到的结果。

如何使页面加载速度更快

在我开始展示我们遵循的确切步骤之前,让我告诉您,PageSpeed工具只是最佳网络演示实践的指南。它提供了针对页面加载速度优化网站的建议,并且取得有利结果取决于您的服务器环境的设置方式。

虽然其中一些步骤需要技术专长,但其他步骤则不需要。请注意,几乎可以使用任何内容管理系统(CMS)来跟踪它们。

第1步:优化图像

PageSpeed Insights Tool建议我们通过减小文件大小来优化图像以加快加载速度。为了解决这个问题,我们做了两件重要的事情:

  1. 使用Compressor.io和TinyPNG等工具压缩所有图像。这些工具是免费的,在某些情况下可以将图像文件大小减少80%以上,而不会降低图像质量。
  2. 在不降低图像质量的情况下将图像尺寸缩小到最小尺寸。例如,如果我们想在我们的网站上获得150x150px的图片,那就是图片应该在我们的服务器上的大小。您永远不应该拥有比您希望它们渲染的图像更大的图像,也不应该使用CSS或HTML标记减小它们的大小。

我们下载了每个图像,然后手动压缩并调整它们的大小。优化这些图像后,最好养成优化上传到服务器的所有新图像的习惯。应压缩每个新图像并调整其大小。

Google还提供下载已优化图片的选项,您只需将其上传到您的服务器即可。您可以使用JavaScript和CSS执行相同的操作。

第二步:缩小CSS和JavaScript

谷歌现在告诉我们,我们必须缩小我们的JavaScript和CSS文件。

缩小过程通过从CSS和JavaScript文件中删除不必要的空格,字符和注释来减少文件的大小。编程时,程序员经常会留下许多空格和注释。这些甚至可以使CSS和JavaScript文件的大小翻倍。

为了解决这个问题,我们在服务器上安装了Gulpjs。该工具会自动创建一个新的CSS文件并删除所有空格。它还会为您正在进行的所有新更改自动创建新的CSS文件。在我们的例子中,它帮助我们将主CSS文件的大小从大约300kb减少到150kb。区别在于不必要的字符。有关如何删除空格的更多说明,请查看Google指南。

如果您使用的是Wordpress,我建议您安装插件Autoptimize。

您还可以从PageSpeed Tool下载优化文件。这是一个例子:

下面是我们在缩小CSS和JavaScript后得到的结果。

第3步:利用浏览器缓存

对于许多网站运营商而言,利用浏览器缓存是最具挑战性的部分。

为了解决这个问题,我们将每个静态文件从我们的网站移动到CDN(内容传送网络)。

CDN是位于世界各地的服务器网络。它们能够缓存静态版本的网站,例如图像,CSS和JavaScript文件。CDN将您网站内容的副本存储在其服务器上,当有人登陆您的网站时,静态内容将从最靠近他们的服务器加载。

例如,如果您的网站的主服务器来自德克萨斯州,没有CDN,阿姆斯特丹的访客将不得不等待服务器从美国一直加载该网站使用CDN,您的网站将从更近的位置加载给用户。在这种情况下,这是一个离阿姆斯特丹更近的地方。因此,网站加载速度会更快。

以下是GTmetrix对CDN如何工作的直观表示。

我们将所有图像,JavaScript和CSS文件移动到CDN上,并仅将HTML文件保存在主服务器上。在CDN上托管您的图像会对网页访问者加载网页的速度产生很大影响。

在我们这样做之后,PageSpeed工具仍然恼人地建议我们利用浏览器缓存来获取某些第三方资源。这是一个截图:

我们通过用CDN上托管的一些静态图像替换它们提供的计数器来修复社交媒体脚本问题。我们不是让试图从Twitter,Facebook或Google Plus访问数据的第三方脚本来获取关注者数量,而是自己托管这些并修复了问题。

比社交媒体脚本问题更令人沮丧的是谷歌的分析代码正在减慢我们的网站。

要解决Google Analytics脚本问题,我们做了一些相当困难的事情。由于我们不想从我们的网站上删除Google Analytics,因此我们必须找到不同的解决方案。

Google每年很少会对Google Analytics代码进行一次或两次修改。因此,Razvan创建了一个每八小时运行一次的脚本,以验证上次修改Google Analytics代码的时间。只有在找到新的更改时,脚本才会再次下载Google Analytics代码。这样,我们就可以在我们的服务器上托管Analytics JavaScript代码,而无需在每次访问时从Google的服务器加载它。

如果未发生任何更改,则Google Analytics代码将从我们的CDN上的缓存版本加载。

当Google再次修改其JavaScript代码时,我们的服务器将自动下载新版本并将其上传到CDN。我们将此脚本用于所有外部第三方脚本。

以下是Pingdom Tools的屏幕截图,显示了从CDN加载的所有内容,包括Google Analytics代码。从我们的服务器加载的唯一文件是主页文件,它只有15.5 KB。消除所有第三方脚本极大地提高了整体加载速度。

步骤#4:消除渲染阻塞资源

消除渲染阻塞是提高页面加载速度最复杂的部分之一,因为它需要更多的技术知识。我们必须处理的主要问题是将所有JavaScript代码从标题和正文移动到整个网站页面底部的页脚。

如果您使用的是Wordpress,我上面建议的Autopmize插件可以帮助您完成此任务。检查其设置,然后取消选中“在<head>中强制JavaScript并选中”内联所有CSS。“

步骤#5:启用压缩

实现启用压缩建议可以在服务器的设置中完成。如果您不是非常技术性,可以请求技术支持团队为您的服务器启用GZIP压缩。

第6步:优化移动体验

移动体验的目的是为所有不同类型的分辨率显示响应式移动版本,使用正确的字体,并拥有良好的导航系统。

您可以使用Google Chrome测试您的网站在不同移动版本中的外观。点击右上角的汉堡菜单,然后点击“更多工具 - 开发人员工具”。在左侧,您可以选择查看您的网站在不同移动设备分辨率下的外观。

结论

这些是我们通过Google的速度工具使Monitor Backlinks获得100/100得分的最重要步骤。我们没有仅优化主页。我们还优化了内部页面,即免费反向链接检查器。

您可以采取的三个最重要的措施来改善您的网站:

  1. 使用CDN(内容分发网络)。
  2. 修复渲染阻塞问题。(避免在编码体中使用JavaScript。您的JavaScript代码应放在文件的底部。)
  3. 优化图像的大小并压缩它们。
All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly