当前位置: 首页 > Web前端 > CSS

WEB站点性能优化实践

时间:2023-03-31 13:50:17 CSS

优化前,关键是要分析当前的网站性能,找出性能瓶颈,然后确定最需要改进的地方;如果精力有限,首先关注可以显着提高性能的改进点;《高性能网站建设指南》提出了一条性能黄金法则:只有10%-20%的最终用户响应时间花在下载HTML文档上;其余80%-90%的时间用于下载页面中的所有组件。案例描述:优化前的网站大小:2个js,一个header,一个footer;3CSS;类型:博客站点;后台逻辑简单;首页的sql查询少于10个;首页html文件为52kb;第一步:后台优化,启用页面缓存;实验站首页后台逻辑不复杂,不超过10条Sql查询,通过时间线查看,本站获取HTML文档的时间不到总响应时间的20%,优化前,不使用缓存,所有数据都从数据库中读取。这里,我们使用静态页面缓存,将整个首页完整的存放在缓存中(YII静态页面缓存的使用,参考这里);通过查看html文件的生成时间来检测优化效果;第一个字节时间为376ms;html生成时间大大缩短,后台时间翻倍。优化前:优化后:WEB站点性能优化实践(加载速度提升2s)性能优化建站教程Part2第二步,DNS域名解析加速:DNS解析是用户访问网站的第一步。在此之前,你的网站什么也做不了;站点DNS解析时间不超过500ms。如果站点原有DNS解析时间过长,应考虑使用第三方解析加速服务;实验站点原来的DNS解析比较慢,平均耗时1017ms。它很长;对于DNS加速,可以使用DNS域名解析加速服务。本站使用国内免费的DNS加速服务DNSPOD,效果还不错。解析时间:1017ms使用DNS域名解析服务后测试:370ms第三步:使用CDN加速;使用第三方CDN加速,时间缩短至2.1s;从下图我们可以看出,主要耗时在于并行下载的数量有点少,如果可以增加并行下载的数量,那么整体的加载时间就会减少;注:个人建议,CDN最好放在最后一步。站点本身优化完成后,再开启CDN。可以清楚地看到优化效果。(开启CDN后,由于CDN缓存,不太方便观察站点本身的优化);第四步,使用多台服务器增加并行加载量:原理:一个浏览器对同一个域名并行下载的个数默认为2个,HTTP.1.0中规定为4个。这样我们就可以使用不同的域名来提高下载速度;观察上图中的下载数,第一次并行下载数为4,初步认为是浏览器限制同域名源下载造成的;所以我考虑把一些静态文件放在不同的服务器上;通过将css和js放在不同的服务器上;结果并不理想,发现速度并没有提升。想起以前在哪里看到过,浏览器必须先下载放在header中的css和js,然后才开始下载其他静态组件;在并行下载这一点上,后续实验会继续测试是否还有优化空间。第五步,合并脚本和样式表;本站首页使用了2个js和3个css。如果采用简单复制的方式将js和css整合到一个文件中,不仅操作麻烦,而且后期管理也不方便。Internet上有许多合并工具。本站使用CSS和JS合并优化工具-minify(下载地址:http://code.google.com/p/mini...。如果你使用YII框架,还有更多YII集成版(minscript扩展),通过几个简单的配置步骤,它会自动合并页面上所有的js和css文件;minscript扩展的使用,请参考:https://bitbucket.org/TeamTPG...第六步,压缩css/js/html/xml;不同的web服务器有不同的设置,对于本站使用的linux/apache,只需在web根目录的.htaccess文件中添加如下代码:AddOutputFilterDEFLATEhtmlxmlphpjscss通过firefox工具可以看到,压缩前,html文档大小为25KB;合并后,js大小为138KB;压缩后,html文档大小为6.2KB。js大小为39.8KB;减少2/3的传输时间;第七步是尽量减少HTTP请求;添加Expires头,启用静态内容缓存,缓存jpg、gif等文件;在.htaccess中也加入了方法:AddOutputFilterDEFLATEhtmlxmlphpjscss结论查看最终测试结果,整体性能有了很大提升,最终页面显示时间为1.62s(测试使用第三方网速测试工具,所有测试结果均在第三方未在本地缓存的情况下进行)。仔细观察本站最后几个插件:有第三方网站的广告(加载广告时,页面已经完全渲染,对用户体验影响不大),统计cnz。从这个角度来看,item12加载完成后,整个页面就完整的呈现在了用户面前。最终优化结果为1.1s,比优化前快了2s;由于物理条件限制(虚拟机、国外站点),本次优化到此结束(后续会在并行下载上做文章,看是否还有进一步提升的空间)。