Optimization Grades:
结果页的头部是一些关键性能优化的分数,如果等级低于B的话,说明有比较严重的问题在;如图1
1. Keep-alive Enabled:保持连接的可用性:
每一个内容的每一个请求(图片,js,css,flash等)都需要和web服务器建立一个连接。
由于建立新的连接会消耗许多时间,所以最好是对之前建立起来的连接进行复用。在许多的配置文件或者HTTP1.1标准中,这些连接是默认被复用的,只是很多时候被无意识的断开了。保持这些连接可复用通常只是改变服务器上的配置文件,并不需要对页面自己做什么改变,就可以减少页面加载时间的40-50%;
2. Compress Text:
压缩文本
这是针对那些文本形式的,如html,js,css,而不是图片或视频。HTTP提供一种方法来传输这些压缩的文本。
压缩文本资源可以通过改变服务器端的配置文件,而不用对页面本省做任何的改变,就可以提高性能,降低传输的代价(传输的数据量变小了);由于js,css是在页面刚开始的时候下载的,因此提高它们的下载速度将增加用户体验;
3. Compress Images:
压缩图片:可以在photoshop上通过将图片保存为“save for web”就可以压缩50%;
4. Cache Static Content:
将静态内容保存在cache中
如图片,js,css都是不经常变动的东西。将这些静态的内容保存在cache中,当用户再次访问这个页面或者是引用这个文件的页面时,就可以直接读取cache中的内容,可以提供80%以上,降低web服务器的负载。
5. Combine JS/CSS Files:
组合js/css文件
提高性能通常就是一位着降低请求数,其中一个最简单的方法就是降低单个js和css文件的个数(这个在<head>中的单个文件阻碍了页面向用户展示);所以可以将所有js放在一个单个文件中,所有css放在一个文件中,使得css在js之前加载完;
6. Use of CDN:
使用CDN
每个内容的每一个请求都是从用户的浏览器发送到服务器并且返回。在服务器和客户端来来回回的时间变的很多。并且传输速度受到限制,所以你不得不将服务器移的离客户端近一些;
High-level Metrics:
结果页给出的那个表格:如图2
1.First View:cache和cookie都为空时,用户第一次登陆
2.Repeat View::
在第一次访问完之后,关闭浏览器,再访问一次,这时候的性能。Cache和cookie都没有清空的;
3.Document Complete:
这一栏收集的数据是包括直到浏览器加载完页面。这部分通常是发生在当图片都加载完了,但是由js触发加载的内容还没开始的时候
4.Fully Loaded:
这部分的数据是当Document Complet加载完之后,没有活动的网络了,2秒中之后的收集到的数据。这些数据通常是包括了当主要页面加载完之后由js触发的一些活动。
5.Load Time:
从用户访问页面到Document Complete的时间;
3,4,5这三个的区别是:如图3
fully loaded的时间=document complete的时间+JS触发加载的时间而load time与document complete一般来说是相等的
6.First Byte:
这个时间是指当用户开始访问页面到服务器返回第一个字节,这中间经过的时间。即web服务器响应一个请求,到所请求的数据的第一个字节被客户端接收,这中间的时间。
这个时间和后端时间(back-end time)有关,它是服务器为用户搭建页面的时间总和。
7.Start Render:
这个时间是指从用户开始访问页面到屏幕上展示了第一点内容经过的时间,在这个时间之前,用户看到的都是空白页
8.Requests:
浏览器为了加载内容必须发送得请求数
9.Bytes In:
这个等于页面的大小,即浏览器为了展示页面,必须下载的比特数。
DNS Lookup:域名解析花费的时间,包括开始时间和结束时间
Connection Time:通过网络连接上web服务器的时间
Content Download:指下载html的时间和下载其他支持页面内容的组件的时间
Redirect Time:重定向