QQ代刷网站点功能优化实践(加载速度提高2s)

发布时间:2020年07月31日 阅读:6 次

进行优化前,关键是剖析当前的web功能,找到功能瓶颈,然后确认最需改善的当地;假如精力有限,首先将精力放在能显着进步功能的改善点上;


《高功能网站建设攻略》提出了一个功能黄金法则:


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


因为本文将施行一个完好的优化流程,所以,咱们还是从后台开始;


案例说明:


优化之前的网站规划:


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


类型:QQ代刷网博客类站点;后台逻辑简单;主页不到10个sql查询;


主页html文档52kb;


第一步:后台优化,启用页面缓存;


实验站点主页后台逻辑并不杂乱,不超越10个Sql查询,通过检查时刻线,本站在获取HTML文档时,花费的时刻不到总呼应时刻的20%,优化之前没有运用缓存,所有的数据都是从数据库读取,这里,咱们运用静态页面缓存,将主页整个页面完全的存放在缓存中(关于YII静态页面缓存的运用,参阅这里);


通过检查html文档的生成时刻来检测优化作用;


首字节时刻为376ms;html生成的时刻大大缩短,后台时刻削减了一倍。


优化前:



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第1张


优化后:



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第2张


第二步,DNS域名解析加快:


DNS解析是用户拜访站点的第一步,在此之前,你的QQ代刷网站无法做任何事情;


站点的DNS解析时刻不应该超越500ms,假如站点原始DNS解析时刻过长,就该考虑考虑运用第三方解析加快服务;


实验站点的原始DNS解析较慢,均匀耗时1017ms,算是非常长的;对于DNS加快,能够运用DNS域名解析加快服务,本站点选用的国内的一款免费DNS加快服务DNSPOD,作用还不错,运用后均匀耗时降到370ms;


加快前测验:均匀解析时刻:1017ms


运用DNS域名解析服务之后的测验:370ms


第三步:运用CDN加快;


选用第三方CDN加快,时刻缩短到2.1s;从下图中看到主要的耗时在于并行下载的个数有些低,假如能够进步并行下载量的个数,那么整体加载时刻就会降低;


注:个人主张,启用CDN最好放在最后一步,等将站点自身的优化都做完了之后,再启用CDN能够显着的看到优化作用。(敞开CDN后,因为有CDN缓存的原因,观测站点的自身的优化就不是很方便了);



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第3张


第四步,选用多台服务器进步并行加载量:


原理:一个浏览器对与同一域名的并行下载的个数默认是2个, HTTP.1.0中规矩的是4个。这样,咱们能够运用不同的域名来进步下载的速度;


观察上图中的下载数量,第一次并行下载的个数是4个,初始认为是浏览器对于同一个域名来历的下载所限导致;于是考虑将部分静态文件分别放在不同的服务器上;通过把css和js放在不同服务器上;结果并不抱负,发现并未进步速度。


想到在哪曾看到过,浏览器有必要得把放在页头的css和js下载完成了之后才会开始下载其它的静态组件;


关于并行下载这点上,后续将持续实验是否还有优化的空间。



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第4张


第五步,兼并脚本和样式表;


本站主页运用了2个js和3个css。假如QQ代刷网选用朴素仿制的方式,将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文件中添加以下代码即可:


AddOutputFilter DEFLATE html xml php js css


通过firefox东西可看到,压缩前,html文档的巨细是25KB;兼并后的js巨细为138KB;



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第5张


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



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第6张


第七步,最大化的削减HTTP请求;


添加Expires头, 启用静态内容缓存,将QQ代刷网的jpg、gif等文件缓存;


办法也是在.htaccess中添加:


Image and Flash content Caching for One Month


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


定论


检查最终的测验结果,整体实现了较大的功能进步,最终页面展现时刻为1.62s(测验运用的是一个第三方web测速东西,所有测验结果是在第三方本地无缓存的条件下进行)。仔细观察本站最后几个加载项:有一个第三方网站的广告(加载广告的时刻,页面已经悉数出现,对用户体会影响不大),以及cnzz的统计数据。这样看来,在第12项加载完后,整个页面就完好的出现在用户面前,优化最终结果是1.1s,较优化前加载速度进步2s;因为物理条件(虚拟机、国外站点)所限,本次优化就到此为止(后续将在并行下载上做做文章,看是否有进一步进步空间)。



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第7张


本次优化主要运用的是前端优化,其间大部分规矩来自于这本书的指导《高功能网站建设攻略》;假如你的web前端部分还没有充分优化,强烈主张读读这本书;


这是一本你只需画上三小时就能看完,但收获价值远远大于支付的一本书。



WEB站点功能优化实践(加载速度进步2s) 功能优化 建站教程 第8张


附上本书的目录:


绪言A:前端功能的重要性


第1章:规矩1——削减HTTP请求


第2章:规矩2——运用内容发布网络


第3章:规矩3——添加Expires头


第4章:规矩4——压缩组件


第5章:规矩5——将样式表放在顶部


第6章:规矩6——将脚本放在底部


第7章:规矩7——避免CSS表达式


第8章:规矩8——运用外部JavaScript和CSS


第9章:规矩9——削减DNS查找


第10章:规矩10——精简JavaScript


第11章:规矩11——避免重定向


第12章:规矩12——移除重复脚本


第13章:规矩13——装备ETag


第14章:规矩14——使AjaX可缓存


第15章:析构十大网站


页面巨细、呼应时刻、YSlow等级


如何进行测验

Tag:代刷网最新爆料
相关文章