Web 前端性能优化相关内容解析

Web 前端性能优化相关内容，来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。你们能够对照着去优化本身的网站或者相关项目。本文由Jeff 整理。

0.提升服务器的响应速度

砸钱的东西，但却最根本；搞好这一项，甚比下面任何一项。

1.优化样式表和脚本的排列顺序

正确地排列外部样式表与外部和内嵌脚本的顺序，可增长下载时同时加载的数据量，并提升浏览器显示网页的速度。

将样式表放在顶部，将脚本放在底部

2.使用浏览器缓存

在 HTTP 标头中为静态资源设置有效期或最长存在时间（Google建议最短为一周，最好能达一年左右，⊙﹏⊙b汗），可指示浏览器从本地磁盘中加载之前下载的资源而不是从网络中加载。

3.使目标网页重定向可缓存

许多网页都会将用户重定向至不一样的网址，例如：从 www.example.com 重定向至 m.example.com。使这些重定向信息可缓存到用户的浏览器中，可加快访问者屡次访问同一网站时的网页加载速度。

4.内嵌小型 CSS

将小型样式表内嵌到主 HTML 网页中，可减小在下载其余资源时的往返时间 (RTT) 和延迟时间。

5.内嵌小型 JavaScript

将小型 JavaScript 文件内嵌到主 HTML 网页中，可减小在下载其余资源时的往返时间 (RTT) 和延迟时间。

6.压缩 CSS

压缩 CSS 代码能够节省大量的数据字节空间，并提升下载、解析和执行的速度。

7.压缩 HTML

压缩 HTML 代码（包括其中所含的任何内嵌 JavaScript 和 CSS）可节省大量的数据字节空间，并提升下载、解析和执行的速度。

8.压缩 JavaScript

压缩 JavaScript 代码能够节省大量的数据字节空间，并提升下载、解析和执行的速度。

9.启用 Keep-Alive

有效地下降TCP握手的次数，减小httpd进程数，下降内存的使用

10.启用压缩

使用 gzip 或 deflate 压缩资源，可减小经过网络发送的字节数。

11.将图片组合为 CSS 贴图定位

尽可能减小使用 CSS 贴图定位合并图片后的文件数量，可减小在下载其余资源时的往返时间和延迟时间、节省请求开销，并减小网页下载的总字节数。

12.将查询字符串从静态资源中删除

在 HTTP 标头中为静态资源启用公共缓存，可以让浏览器从附近的代理服务器中下载资源，而没必要从远程原始服务器中下载。

13.尽可能减小请求的数据量

尽可能减小 Cookie 和请求标头的大小，可确保将 HTTP 请求放入单个数据包中。

14.尽可能减小重定向

尽可能减小从一个网址到另外一个网址的 HTTP 重定向次数，以减小额外的往返时间 (RTT) 和用户等待的时间。

15.指定图片大小

为全部的图片指定宽度和高度，可消除进行没必要要重排与重绘的需求，从而加快图片的显示速度。

16.提供压缩后的图片

适当地调整图片的大小，可节省大量的数据字节空间。

17.由同一网址提供资源

经过惟一的网址发布资源，这样才能避免下载重复的字节以及产生额外的往返时间 。

18.请指定一个“Vary: Accept-Encoding”标头

指示代理服务器缓存资源的两个版本：压缩版与未压缩版。这样有助于避免公共代理没法正确检测 Content-Encoding 标头的问题。

19.请指定缓存验证工具

经过指定缓存验证工具（Last-Modified 或 ETag 标头），您能够确保系统可以有效地肯定缓存资源的有效性。

20.避免出现错误的请求

删除“已损坏的连接”或会致使 404/410 错误的请求，可避免发出无效的请求。

21.首选异步资源

错开资源的加载时间可减少网页加载时出现资源堵塞的几率。

22.避免在 CSS 中使用 @import

在外部样式表中使用 CSS @import 会增长网页加载时的延迟。

23.暂缓 JavaScript 解析

经过最大程度地减小显示网页所需的 JavaScript 数据量，并暂缓解析不须要的 JavaScript（等到须要执行时再进行解析），您能够提升网页的初始加载速度。

24.优化图片

适当地设置图片的格式并进行压缩，可节省大量的数据字节空间。

25.指定字符集

尽早为您的 HTML 文档指定字符集，可以让浏览器当即开始执行脚本。

26.避免在meta 标签中指定字符集

27.合并CSS、JavaScript文件

减小HTTP请求的数量

 

相关阅读：

http://developer.yahoo.com/performance/rules.html