gtmetrix.com在线检测网页速度与优化建议

一般我们会很直观的感受到网站打开的速度,响应的快慢,速度的快慢是非常影响到浏览者感知的。所以是非常有必要去提高速度,降低响应的时间,相应可以采用本地缓存、CDN等来提升,而效果怎么样,可以通过一些工具、在线网站来检测。例如GTmetrix | Website Speed and Performance Optimization  。

打开网站,首先就是大幅的介绍:

图1.首页的简单介绍与描述

本地测试默认的情况下,是使用加拿大温哥华的节点,使用chrome浏览器桌面版进行。如果注册登录后,则可以进行一定程度上的自定义选择。直接在输入框内输入对应的网址,点击Test your site即可进入测试环节。

图2.gtmetrix.com测试过程中

正常情况下,一般经过30-60s的时间,即可完成5步的检测,得到检查的结果,并提供了一个在线版的报告。如果是在登陆的状态下,还可以下载该份报告。

图3.检测完毕得到的报告

像这里测试的是上一篇使用Office.Tool.Plus来协助完成MS.Office的部署 的页面。网站检测后给出的结果是 PageSpeed 是得分为B(81%),Yslow 的得分是D(67%),完整的载入时间是5.2s,页面加载的资源大小是1.08MB,请求数是54个。因为检测的节点是默认的加拿大,而本站也没有部署海外的CDN,从而使得载入的时间相对是比较长的,而如果是国内的节点的话,载入的时间可以在500-1500ms之类的。例如使用站长工具来检测同一个页面,得到页面整体的载入速度非常快,但是并不能提供页面资源等的具体分析,所以在本网站上得到的报告,还是具有一定的参考价值:

图4.站长工具chinaz.com检测的结果页面

继续往下,可以看到相应的模块的得分及建议情况:

图5.PageSpeed模块的扣分严重项

首先是PageSpeed,一个是图片优化,可以优化图片的尺寸达到节省空间的效果;另外一个对相应的图片资源进行浏览器的缓存,加快载入的速度。

图6.Yslow模块拖后腿的项目

其次是YSlow模块,这里有三项的得分被判为0分,一是页面头加载的文件数量过多,另外一个是可以减少部分HTTP 的请求,可以尝试将21个JS文件合并成一个,将15个css文件合并成一个;再次就是需要使用CDN缓存,这部分主要也是JS及css文件,即可以挂到到公开库中,节省载入的时间。

检测到的情况基本上如上2种比较严重的问题,可以优化的地方。既然知道了哪些地方存在问题,那就可以有的放矢,针对性解决。不过鉴于WordPress的主题愈发的臃肿,以及插件的存在,要达到完美,还有很长的一段路要走。