站点性能评測实验

Posted 2020-09-15 gavanwanggw

实验内容

本实验的目的是利用主流的站点分析工具对Alexatop100的前5名站点进行分析。评价其站点性能。

在本实验中。我将在Windows平台下进行实验，评測的站点是眼下Alexatop 100 的前5名的站点，包含google.com, Facebook.com, Youtube.com, Yahoo.com 和baidu.com。可是因为网络的问题，我们无法登陆到Facebook.com和Youtube.com的页面。所以我将对待评測的网页进行顺延，即对排在第6位wikipedia.org和排在第七位的Qq.com进行评測。对于google.com我们用google.com.hk来替代。为了完整的评估站点的性能。我将会对这些站点在多个主流的浏览器的表现进行分别评測。终于得到正确完整的实验结果。

图 1 Alexa top 500部分截图

实验工具

在实验中，我将採用两种性能分析工具对同一个站点进行分析，交叉检验获得的数据。从而获得更加准确、可信的数据。

YSlow

YSlow是广为人知的Web页面性能分析、測试和调试工具。是由Yahoo开发的基于网页性能分析的浏览器插件。YSlow最初仅仅支持安装在火狐浏览器的Firebug上，随着着Yahoo对YSlow的不断开发和维护，眼下YSlow已经有非常多版本号了。能够支持FireFox、Chrome、欧朋浏览器和欧朋移动版等众多浏览器。现现在，YSlow已经成为业界的评价标准之中的一个。YSlow须要的參数仅仅有待測的网页网址和对站点进行评測时应用的规则集这两部分。YSlow參数较少，用起来简单，不须要太多的专业背景知识。同一时候，YSlow为开发人员自己主动提供的优化建议，省去了很多开发人员自己分析的工作。

所以本实验中将利用YSlow对站点进行性能评測。

WebPageTest

WebPageTest是眼下功能最全面的开源监測工具。它是由google员工Patrick Meenan全职开发的性能监測工具。它能够通过截图来直观地看到页面载入的过程，并能进行视频对照，方便演示性能优化结果。它能够部署到本地机器，方便进行内部的性能測试。

它也能够直接在线使用，网址为：http://www.webpagetest.org/。

在线使用时能够看到最新的“可视化页面比較”功能，它能捕捉页面渲染过程中各个阶段的截屏。

像慢镜头回放似的比較和对手的细微区别。和其他測试工具相比WebPageTest最大的优点是能够生成非常全非常具体的站点性能測试报告。可是在线使用相当于用国外的server測试，载入具体数据会比較慢。

像YSlow一样，WebPageTest须要的參数仅仅有待測试的网址，使用非常方便。

实验參数

实验平台	Windows 7 Ultimate
实验环境	chrome、firefox、ie
分析工具	YSlow、WebPageTest

实验

1.     google.com.hk

在用YSlow评測时，google.com.hk总得分为93分。得分较低的有两项。各自是Use a Content DeliveryNetwork(CDN)和Add Expires Headers。

当中，Use a Content Delivery Network(CDN)这条规则的得分等级为F。是由于有8个静态components没有在CDN上，给出的建议是将这8个components增加到CDN。Add Expires Headers规则的得分等级为D。是由于有三个静态组件没有设置过期时间。事实上在首次检測CDN的时候，YSlow仅仅安Yahoo知道的hostname来进行检查。但非常多公司都购买了CDN服务。所以这一项的价值并不重要。

 

图 2 YSlow对google.com.hk的评分详情

同一时候google.com.hk还充分利用了cache。从图1能够看出。在增加cache之后。请求数由10个下降到了4个。须要传输的内容从283.9K下降到了仅仅须要传输html/Text的21.8K，传输内容降低了90%多。

从而能够缩短响应时间。

图 3 google.com.hk 分析统计图

在用WebPageTest评測时。First ByteTime和Cache static content 指标的得分都为F，分数比較低。First Byte Time指从后端传输过来的第一个字节的时间，从结果中看到传输详情为：557 ms First Byte Time。分析之后可能是因为WebPageTest是通过走国外的网络线路进行分析的，所以这一项可能都会比較低。

參考价值不大。

而Cache static content指将静态内容保存在cache中，当用户在此请求时。能够从cache中查找，加快了速度。

Cache的详情是：Leverage browser caching of static assets: 37/100。

静态缓存仅仅中了37%。

图 4 WebPageTest评測google页面

2.     Yahoo.com

在用YSlow评測时，Yahoo.com总得分为82分。得分较低的有6项。Make fewer HTTP requests得分为D，建议将一些JS脚本、CSS等分别合并，降低请求数；Add Expires headers得分为F。7个静态组件没有设置过期时间；Put javascript at bottom得分为D，有8个JS脚本在文档的头部，风格不好。Minify JavaScript andCSS得分为F。有11个components能够被精简掉。Reduce the number of DOM elements得分为E，有1674个DOM，应该降低DOM；Do not scale images in HTML，有12出图片在HTML中。应避免将图片写在HTML中。

此外，Yahoo.com利用了Cache技术。将很多CSS、JS等内容写到了缓存，提升了在此訪问Yahoo页面的速度。

 

图 5YSlow评測YaHoo.com

Yahoo.com的终于评分比google.com少了非常多，通过查看两个页面能够直观的发现，这有非常大部分原因是Yahoo的页面载入的内容太多造成的。

在用WebPageTest评測时。Yahoo.com的评測结果居然比Goolge的结果好一些。First Byte Time的得分为F，返回第一字节用时1223 ms ；可是在上文中也已经提到了，此处的FirstByte Time指标參考性不大。而Keep-alive Enabled和Compress Transfer得分都为A。这两项做的非常不错。Effective use of CDN也表现出了不错的性能。ProgressiveJPEGs和Cache static content得分为C。有72% Progressive JPEGs被使用。有77%的静态组件增加到了Cache缓存。

图 6WebpageTest对Yahoo.com的评測结果

3.     Baidu.com

在用YSlow评測时。Baidu.com的总得分是95分，是一个很高的得分。

Use a Content DeliveryNetwork 得分为F。有8个静态conponents没有增加到CDN中。Add Expires headers得分为B。有1个静态组件没有设置超时设置。其他的评分均为A。

从YSlow对Baidu.com和google.com.hk的结果分析中我们能够发现，Baidu和Google页面的结果很的相近，都是Use a Content Delivery Network和Add Expires headers两条须要改动。

我们也能够从页面中直接观察，两个搜索引擎的首页都很的干净整洁，没有其它的杂乱的信息。

图 7 YSlow对baidu.com的评測结果

在用WebPageTest评測时，First ByteTime和Cache static content 指标的得分比較低。First Byte Time得分为D，接受到第一字节的内容用时1517 ms。Cache的命中率为75%，同一时候Baidu.com的页面差点儿没实用到CDN服务。

这些地方都有改进的空间。

 

图 8 WebPageTest对Baidu.com的评測结果

4.     Wikipedia

用YSlow进行评測时，wikipedia的得分为86分。得分较低的有两项。各自是Use a Content DeliveryNetwork(CDN)和Add Expires Headers。

当中，Use a Content Delivery Network(CDN)这条规则的得分等级为F，是由于有19个静态components没有在CDN上，给出的建议是将这19个components增加到CDN。

Add Expires Headers规则的得分等级为F，是由于有19个静态组件没有设置过期时间。

图 9 YSlow对wikipedia的评測结果

虽然Wikipedia对Use a ContentDelivery Network(CDN)和Add ExpiresHeaders两条指标做的并不十分好，可是他对缓存的利用达到了极致。从下图能够看出，Wikipedia在第二次訪问的时候差点儿不再须要下载不论什么内容，将全部内容增加缓存中。

这极大的降低了一些静态的内容再次反复下载的情况。提升了页面响应速度。

图 10 wikipedia的分析统计图

再用WebPageTest进行评測时，Wikipedia的结果比較差。如上文所说FirstByte Time參考价值不大，此后将不再讨论这一项。Compress Transfer的得分为D，假设使用gzip压缩能够将传输比例变为如今的61%；而Cache static content和Effective use of CDN则全然没实用到。这与我们用YSlow评測时的结论全然相悖。

图 11 WebPageTest对Wikipedia的评測结果

5.     Qq.com

用YSlow进行评測时,qq.com的得分仅仅有38分。有多达9项规则的评分都是F，其余都是A。

以下主要介绍这些评分为F的规则和详情。Make fewer HTTP requests将JS进行合并，而且将一些背景图片合并到CSS中。Use a Content Delivery Network (CDN)建议将多达190个静态组件增加到CDN中，提升用户訪问响应速度；发现一条空的链接，建议尽量避免空链接；有多达30个静态组件没有设置超时时间；7个纯文本组件没有进行压缩传递；有22个JS脚本没有放在文档底部。组件被分为多于4个领域，增大了DNS的查找时间。页面具有太多的DOM元素。在HTML中放入了图片。

Qq.com须要优化的内容还是比較多的。造成Qq.com得分低的还有一个原因是该网页中载入的内容太多。

图 12 YSlow对qq.com的评測结果

用WebPageTest进行评測时。Qq.com的结果依然比較差。Compress Transfer得分为C，假设使用gzip压缩能够将压缩比例变为如今的70%；图片的压缩比例为59%；进一步压缩传输内容能够降低传输开销。

浏览器cache命中率为63%；CDN利用率为28%；提高Cache和CDN的使用率能够避免某些内容的反复查找和传输，从而提升响应速度。没实用到ProgressiveJPEGs；从这些结果中能够看出。Qq.com须要改进的内容非常多。

图 13 WebPageTest对Qq.com评測结果

总结

总体来看，Google.com和Baidu.com的性能还是不错的，而Yahoo.com、Wikipedia.com和Qq.com则还须要进一步优化。尤其是Qq.com，总体性能还比較差，有非常大的优化空间。

然而这5个网页的内容差别也非常大，Baidu和Google是搜索页面，内容比較少，干净整洁。而Yahoo和Qq则是新闻页面，内容繁多，本身的优化难度也比較大。Wikipedia介于两者之间。

从对5个页面的结果分析能够看出。不同的工具对同一个网页的评測结果可能会差距非常大。

所以假设在现实中进行优化的时候，能够综合尝试多种性能优化工具，以求能够将全部潜在的问题发现并解决。

參考文献

[1]     http://www.webpagetest.org/

[2]     http://hikejun.com/blog/2010/01/09/%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85webpagetest/

[3]     http://blog.csdn.net/chenlei0630/article/details/22724539

[4]     http://vickynuli.blog.163.com/blog/static/18043849220128269564392/