网站性能优化最佳实践 哪个网站跑的快？

　　近几年来，Web应用程序的性能变得越来越重要，甚至比业务还重要，因为搜索引擎(如Google)在排名时，会将网站的性能因素纳入考虑，最终形成了“性能==更好的可见性==更多的用户==更多的收入”这样的连环效应。

　　网站性能测试的最佳办法是看几个能告诉你网站快慢的KPI(Key Performance Indicators，关键性能指标)，这些指标由Web性能专家(如Steve Souders)和公司(如Google，Yahoo)推动的，其中页面载入时间，网络往返次数，传输内容的大小是衡量一个Web页面性能的重要指标。dynaTrace AJAX版本扩展了现有KPI列表，包括可测量首次显示时间，完全载入时间，JavaScript执行时间等。

　　载入时间方面的KPI

　　从最终用户性能的角度来看，访问一个网站会经历3个有趣的阶段，dynaTrace AJAX版本在TimeLine视图中可视化展示了页面载入的不同阶段，这里我突出显示了首次显示时间，onLoad时间和完全载入时间，如下图所示。

　　图1 访问一个网页的整个过程

　　1、首次显示时间

　　这个时间等于在浏览器地址栏输入URL按回车到用户看到网页的第一个视觉标志为止，第一个视觉标志是浏览器的第一个绘制活动，浏览器绘制内容的起始时间取决于原始的HTML文档，不同的策略有不同的最佳实践，例如Google会先下载一个极简的页面提供快速的第一视觉呈现，在onLoad后再延迟加载更多的内容，有时甚至是用户已经开始与网页交互了才加载剩下的内容。

　　2、onLoad事件时间

　　这个时间是直到浏览器触发onLoad事件的时间，当原始文档和所有引用的内容完全下载后才会触发这个事件，JavaScript onLoad处理程序使用这个事件操作页面的当前初始状态。

　　3、完全载入的时间

　　这个时间等于直到所有onLoad JavaScript处理程序执行完毕，所有动态的或延迟加载的内容都通过这些处理程序触发的时间，有时要精确确定一个页面的完全载入时间是很困难的，特别是当JavaScript处理程序使用了不断修改页面的操作时，如实时股票显示。

　　资源方面的KPI

　　一个网页是由原始的HTML文档，嵌入的资源，如图片，css，JavaScript脚本和通过VHR或JavaScript修改DOM动态下载的内容，网页上引用的资源越多，在浏览器和服务器之间因下载资源往返的次数就越多，资源尺寸越大，就需要更多的带宽传输，减少往返次数和资源尺寸很重要，dynaTrace AJAX版本提供了一个网络视图，可对每个独立的资源进行分析，如下图所示。

　　图2 网页引用的各个资源消耗的时间

　　从这个网络视图我们可以看到多个网络资源相关的KPI，有助于我们理解页面的结构和尺寸。

　　1、总请求数

　　这是从网站下载资源时所有网络请求的总数，终极目标是使这个数量尽可能的低，以便减少往返次数。

　　2、HTTP 300s/HTTP 400s/HTTP 500s的总数

　　它们分别是服务器用HTTP状态码300(重定向)/400(授权问题)和500(服务器错误)响应HTTP请求的总数，应该尽量避免这些请求，因为它们对页面载入时间有负面影响，这些问题的根本原因通常与服务器端的实现，配置和部署有关。

　　3、网页的总大小

　　这是组成你网页的所有资源总大小，跟踪总的页面大小非常重要，网页越大下载的时间就越长，向网页添加图片或JavaScript代码都会影响网页的下载时间，相反，尽可能做到每个网页包含的资源总大小较小会加快网页在浏览器中的显示。

　　4、图像/CSS/JS总大小

　　除了跟踪网页的总大小外，调查每个独立内容类型，如图像，CSS和JavaScript文件的大小也很重要，这样就可以很容易辨认页面中哪一个内容的尺寸最大，我们应该避免使用较大尺寸的文件，如图片文件应使用专业优化工具进行优化，JavaScript和css文件则可以通过Web服务器进行压缩后向客户端传输。

　　5、XHR请求总数

　　通过JavaScript发送的XmlHttpRequests(XHR)请求总数，它从服务器异步检索数据，监视这个KPI可以找出通过XHR动态内容检索时发生的意外变化，根据配置，你可以终结那些不仅影响客户端性能，也会导致应用程序服务器负载过多的XHR请求。

　　网络连接方面的KPI

　　浏览器底层网络连接也是影响网站内容下载速度的主要因素，下载内容的过程分几个阶段，dynaTrace AJAX版本可以显示每个网络请求的所有阶段，如下图所示。

　　图3 网络连接的几个阶段

　　浏览器处理请求的过程分为几个阶段，下面就对这些阶段的影响加以解释。

　　1、DNS时间

　　托管网站资源的每个域名都会发生一次DNS查找，如果你在多个网页之间移动，当前一个页面已经请求过一次DNS查找后，浏览器不会再对同一个域名请求另一个DNS查找，但通过查看总体DNS时间，可以确定是否存在DNS查找时间问题，有可能牵出DNS配置不当的问题。

　　2、连接时间

　　根据浏览器和资源的大小不同，浏览器可能会在域名上建立一到多个连接，连接时间就是浏览器与Web服务器建立TCP/IP连接的时间，连接通常会保持打开状态，除非Web服务器命令浏览器关闭连接。当使用SSL建立安全通信时，连接时间也包括SSL握手的时间，连接时间过长有以下原因：到Web服务器的网络连接速度较慢，使用了SSL，不允许浏览器保持连接打开。

　　3、服务器时间

　　高服务器时间意味着Web/应用程序服务器需要很长的时间处理请求，监视服务器时间对于找出性能瓶颈和应用程序的扩展问题是至关重要的，通过增加Web服务器实现负载均衡，使静态内容的扩展是很容易的，当然也可以购买CDN加速服务来达到同样的目的，但以这种方法实现动态应用程序扩展就行不通了。

　　4、传输时间

　　这个时间与传输内容的大小，浏览器与服务器之间的连接速度紧密相关，保持低传输时间是确保页面快速载入的关键，可以通过减小总的页面大小，或者通过CDN将内容放在离最终用户较近的地方改善传输时间。

　　5、等待时间

　　等待时间与相同域名下资源的数量直接相关，受浏览器同一域名物理网络连接数的限制，访问某个资源时可能必须等待另一个连接的释放，减少资源的数量，或将资源分布在多个域名上，可以有效减少等待时间。

　　6、域名的数量

　　托管网站资源域名的数量也很重要，因为它会影响DNS，连接和等待时间，要下载的资源使用额外的域名将会直接减少等待时间，因为浏览器最终使用更多的物理连接，但如果需要非常多的DNS查找时，这又会产生负面影响，此外，应该尽量避开单一资源域名，但有时是无法避免的，如从外部内容提供商下载资源时(如广告服务)。

　　性能改善建议和排名计算

　　网站的终极目标是尽可能块地载入内容，实现这个目标的办法有很多，如减少网络往返次数，使用缓存，优化服务器端内容生成，优化JavaScript/Ajax等，在这四个领域进行优化，以及延迟载入JavaScript代码，js和css文件，都将会改善页面的载入时间。dynaTrace AJAX版本可以根据我们本文讨论的某些KPI计算页面排名，我们使用下面的阀值来定义优秀，可接受和糟糕的页面速度。

　　◆首次显示的时间如果<1s，则优秀，如果<2.5s则是可接受的，如果>2.5s则很慢;

　　◆onLoad时间如果<2s，则优秀，如果<4s则是可接受的，如果>4s则很慢;

　　◆完全载入时间如果<2s，则优秀，如果<5s则是可接受的，如果>5s则很慢。

　　最重要的因素是首次显示时间，其次是onLoad时间，然后是完全载入时间。我们也将HTTP请求的数量作为一个重要因素看待，因为往返的次数对总的下载时间影响甚大，优秀的网站请求数应小于40，可接受的网站请求数最大不能超过100，超过100的网站可认为是糟糕的。

　　dynaTrace AJAX也可以计算浏览器缓存，网络资源，JavaScript/Ajax和服务器端活动的排名，总的排名是每个子排名分别加权10%计算出来的，因此总排名等于KPI排名结果*60%加上缓存，网络，JavaScript和服务器端活动排名计算结果的10%得出的。

　　原文名：Best Practices on Web Site Performance Optimization