进行优化前，关头是分解当前的web机能，找到机能瓶颈，年夜而确定最需改良的处所；如不美观精神有限，首先将精神放在能较着晋升机能的改良点上；

《高机能网站培植指南》提出了一个机能黄金法例：

只有10%-20%的最终用户响应时刻花在了下载HTML文档上；其余的80%-90%的时刻花在了下载页面中的所有组件上。

因为本文将实施一个完整的优化流程，所以，我们仍是年夜后台起头；

案例声名：

优化之前的网站规模：

2个js、一个页头、一个页脚；3个css；

类型：博客类站点；后台逻辑简单；首页不到10个sql发芽；

首页html文档52kb;

第一步：后台优化，启用页面缓存；

尝试站点首页后台逻辑并不复杂，不跨越10个Sql发芽，经由过程查看时刻线，本站在获取HTML文灯瘫，破耗的时刻不到总响应时刻的20%，优化之前没有使用缓存，所有的数据都是年夜数据库篡夺，这里，我们使用静态页面缓存，将首页整个页面完全的存放在缓存中（关于YII静态页面缓存的使用，参考这里）；

经由过程查看html文档的生成时刻来检测优化效不美观；

首字节时刻为376ms；html生成的时刻年夜年夜缩短，后台时刻削减了一倍。

优化前：

优化后：

第二步，DNS域名解析加速：

DNS解析是用户访谒站点的第一步，在此之前，你的网站无法做任何工作；

站点的DNS解析时刻不应该跨越500ms，如不美观站点原始DNS解析时刻过长，就该考虑考虑使用第三方解析加速处事；

尝试站点的原始DNS解析较慢，平均耗时1017ms，算长短常长的；对于DNS加速，可以使用DNS域名解析加速处事，本站点采用的国内的一款免费DNS加速处事DNSPOD，效不美观还不错，使用后平均耗时降到370ms；

加速前测试：

使用DNS域名解析处事之后的测试：

第三步：使用CDN加速；

采用第三方CDN加速，时刻缩短到2.1s；年夜下图中看到首要低砟瓯在于并行下载的个数有些低，如不美观能够晋升并行下载量的个数，那么整体加载侍旧送会降低；

注：小我建议，启用CDN最好放在最后一步，等将站点自己的优化都做完了之后，再启用CDN可以较着的看到优化效不美观。（开启CDN后，因为有CDN缓存的原因，不美观测站点的自己的优化就不是很便利了）；

第四步，采用多台处事器提高并行加载量：

事理：一个浏览器对与统一域名的并行下载的个数默认是2个， HTTP.1.0中划定的是4个。这样，我们可以使用分歧的域名来晋升下载的速度；

不雅察看上图中的下载数目，第一次并行下载的个数是4个，初始认为是浏览器对于统一个域名来历的下载所限导致；于是考虑将部门静态文件分袂放在分歧的处事器上；经由过程把css和js放在分歧处事器上；结不美观并不理想，发现并未提高速度。

想到在哪曾看到过，浏览器必需得把放在页头的css和js下载完成了之后才会起头下载其它的静态组件；

关于并行下载这点上，后续将继续尝试是否还有优化的空间。

第五步，合并剧本和样式表；

本站首页使用了2个js和3个css。如不美观采用朴质复制的体例，将js和css都分袂整合到一个文件中，不单操作麻烦，而且未便利后期的打点。收集上有不少合并的工具，本站采用了CSS和JS合并优化工具-minify（下载地址：http://code.google.com/p/minify/）。如不美观使用的YII框架，更有YII整合版（minscript Extension），简单几步的设置装备摆设，就自动将页面所有的js和css文件合并；

关于minscript Extension的使用，请参考：https://bitbucket.org/TeamTPG/minscript/wiki/Usage

第六步，压缩css/js/html/xml；

分歧的web处事器设置体例有所分歧，本站使用的Linux/apache,

在web根目录下的.htaccess文件中添加以下代码即可：

#set compress

<ifmodule mod_deflate.c>

AddOutputFilter DEFLATE html xml php js css

</ifmodule>

经由过程firefox工具可看到，压缩前，html文档的巨细是25KB；合并后的js巨细为138KB；

压缩后，html文档巨细为6.2KB。js巨细为39.8KB；削减2/3的传输时刻；

第六步，最年夜化的削减HTTP请求；

添加Expires头, 启用静态内容缓存，将jpg、gif等文件缓存；

体例也是在.htaccess中添加：

# Image and Flash content Caching for One Month

<FilesMatch “.(flv|gif|jpg|jpeg|png|ico|swf)$”>

Header set Cache-Control “max-age=2592360″

</FilesMatch>

结论

查看最终的测试结不美观，整体实现了较年夜的机能晋升，最终页面揭示时刻为1.62s（测试使用的是一个第三方web测速工具，所有测试结不美观是在第三方当地无缓存的前提下进行）。细心不雅察看本站最后几个加载项：有一个第三方网站的广告（加载广告的时刻，页面已经全数呈现，对用户体验影响不年夜），以及cnzz的统计数据。这样看来，在第12项加载完后，整个页面就完整的呈此刻用户面前，优化最终结不美观是1.1s，较优化前加载速度晋升2s；因为物理前提（虚拟机、国外站点）所限，本次优化就到此为止（后续将在并行下载上做做文章，看是否有进一步晋升空间）。

本次优化首要使用的是前端优化，其中年夜部门轨则来自于这本书的指导《高机能网站培植指南》；如不美观你的web前端部门还没有充实优化，强烈建议读读这本书。