站点性能评測实验

时间 2019-11-09

原文原文链接

实验内容

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

在本实验中。我将在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来替代。为了完整的评估站点的性能。我将会对这些站点在多个主流的浏览器的表现进行分别评測。终于获得正确完整的实验结果。chrome

图 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/