说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

精简代码,为网站减负的十大建议

HTML文档下载 WORD文档下载 PDF文档下载
过于笨重的网站最终将影响用户体验。据统计,2013年每个网页文件的大小平均增加了32%。如何为网站减负,提高访问性能?本文列出了精简代码量的十大原则。

网站快速加载,是提供良好用户体验的前提。然而,网站功能的不断增多,程序包的不断臃肿,导致网站访问时较大的下载量,最终影响了响应速度。没有一个用户喜欢等待,如何减少代码量,为网站减去过多负担,Craig Buckler在sitepoint网站发表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》,分享为网站减负的十个建议。下面为该文的编译内容。

2013年,网站页面的重量增加了32%,竟然达到了1.7MB,包含96个独立HTTP请求。这只是一个平均数值,其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行,其中很大的责任在于Web开发者。

过于笨重的网站将严重影响网站的最终体验,主要表现在以下四个方面:

  • 更大的下载量,导致更慢的用户体验。并不是每个人都拥有20M的网络连接,尤其是对于那些不发达地区。不管你的网站多么优秀,用户永远不希望等待。
  • 移动Web访问正迅速发展,移动网民几乎占到所有网民的1/4。在典型的3G网络连接下,一个1.7Mb的网站加载需要近一分钟。如果你的网站无法高效工作于这些移动设备,那采用响应式Web设计技术又有什么用呢?
  • 网站加载速度已被谷歌加入排名算法中。加载缓慢会降低网站排名,同时也会影响搜索引擎优化。
  • 网站包含的代码越多,更新和维护它所花费的时间就会越长。

Craig Buckler预言,2014年网页的重量将会下降。那如何精简代码,为网站减负呢?Craig Buckler给出了十条建议。这些建议中涉及到的技术均是大家熟知的。

1.启用GZIP压缩

根据 W3Techs.com上的数据显示,近一半的网站都未进行过压缩。在Web主机上,通过简单的服务器设置即可开启GZIP压缩。

2.支持浏览器缓存

如果浏览器能容易地缓存一个文件,那它就无需反复下载该文件了。实现该功能的一个解决方案,就是在HTTP头中设置合适的 Expires Header、上一次修改时间或采用的 ETags。

你可通过配置服务器来自动完成以上工作。下面是Apache中的.htaccess文件,其中的代码实现了“将所有图片缓存一个月”的功能。


3.使用CDN

浏览器限制了每个域中可同时处理的并发HTTP请求数量:4至8个。如果你的网页需要从域中加载96个资源,那浏览器最多可设置12组并发请求。(因为文件大小并不同,这种情况实际上并不会发生,但该限制仍然适用。)

如若从另一个域中请求静态文件,则可使浏览器处理的HTTP请求数量加倍。此外,一个文件被调用后就会产生一个缓存文件,以供下一个调用它的网站使用。我们可选用JavaScript库(如jQuery)和字体库,同时你也可以考虑专用的图片托管。

前面提到的三条建议可以加快网站的加载速度,下面的建议将帮助我们检查网站代码,以高效地减少网站重量。

4.删掉没用的资源

网站一直在变革之中。如果你不再使用某组件,那就删掉与之关联的CSS和JavaScript。如果它们包含在一个单独文件中,处理起来就会很简单。否则,你需要借助一些工具,如Chrome的Audit开发工具、 JSLint、 Dust-Me Selectors、 CSS Usage、 unused-css.com,也可构建 grunt-uncss此类的工具。

5.合并和压缩CSS

理想的情况是只拥有一个CSS文件(如果你使用RWD以支持IE的老版本,那就需要两个CSS文件。)构建并维护几个单独的CSS文件也算合理,但在部署到产品服务器之前,你应该将它们集合在一起,并删掉那些不必要的空白区域。

Saas、LESS和Stylus等预处理器可帮你完成这些痛苦的工作。 Grunt.js、 Gulp等工具可自动化你的工作流。如果你更喜欢GUI,可借助Koala提供的免费跨平台应用。

如果你觉得这些比较麻烦,也可手动通过命令行工具将CSS文件集中在一起,如在Windows中,可使用如下代码:


在Mac/Linux中,可使用如下代码:


最终文件经过在线CSS压缩工具(如 cssminifier.com、 CSS Compressor & Minifieror等)压缩后即可运行。

最后,请记住在头部(Head)加载所有CSS,以便浏览器展示接下来的HTML元素,同时也可避免浏览器下次再重绘页面元素。

6.压缩并合并JavaScript

平均每个页面需加载18个JavaScript文件,所以我们要将自己编写的JavaScript代码进行合并和压缩。我们可以自己构建压缩工具,也可以使用在线工具,如 YUI Compressor、 Closure Compiler及 CompressorRater。

使用JavaScript压缩工具进行压缩,必须十分谨慎。你的代码有一点小问题,即便丢失了一个分号,压缩过程也可能会失败。无论如何,对JavaScript文件进行压缩,可减少HTTP请求数量,从而提高网站性能。

最好在</body>之前加载JavaScript,这样可确保该脚本不会阻碍其它内容的加载,同时在该脚本被下载和执行之前,页面的内容已加载完毕,并可阅读了。

7.使用正确的图片格式

错误地使用图片格式会增加网页的负载。图片格式通常有以下使用原则:

  • 照片使用JPG格式;
  • 其他的使用PNG格式。

当你有一些小图像,它们仅包含有限的几种色彩集,采用GIF格式,其压缩效果可能更好。本文暂不讨论向量图。

现在有大量免费的图形软件包,可用来转换图片的格式。其中像XnView允许你批处理这些文件。请记住下面两条原则:

JPG为一种有损压缩格式,其质量介于0(质量很差、更小的文件)至100(质量最好,更大的文件)之间。介于30至70之间的大部分图片显示效果比较好。

PNG支持256颜色表和24位的真彩色。如果你不需要透明,并能控制调色板,那256的PNG图像颜色模式可能压缩得更好。

8.重整大图片的尺寸

即便是最入门级的智能手机上的照片机(三百万像素),其拍出来的照片往往太大而不适合在网站上显示。但大部分内容编辑者往往将图片直接从相机中直接上传到网站上。因此,我们需要一个可以自动调整图片尺寸的系统。

图片的尺寸永远不能超过它所在容器的最大值。如果网站模板的宽度最大为800px,那图片的宽度就不能超过该值。一些高分辨率、Retina显示屏,可显示宽度为1600px的图片,但这仍比从相机中直接输出的图片要小。

在减轻网页重量方面,图片尺寸的调整起着重要的作用。将图片尺寸缩小50%,可节省75%的总空间,相当于减少了文件大小。

9.进一步压缩图片

即便已将图片调整为正确的格式和尺寸,你仍可使用一些分析和优化图像的工具进一步压缩图片。这些工具包括 OptiPNG、 PNGOUT、 jpegtran和 jpegoptim。大部分工具可独立安装,也可整合入你构建的过程中。另外,还有一些在线工具,如Smush,它可以工作于云上。

10.去掉不必要的字体

Web字体对设计进行了重大改革,减少了基于图像的字体的使用。但是,使用传统字体后,网页的代码量往往会增加数百KB。所以网站中这种字体的使用尽量控制在两、三种以内。

利用以上提到的方法,大部分网站可以将减去30~50%的重量。对于一般的网站,可以减掉800KB的代码量,访问速度可获明显提升。(编译:陈秋歌)

内容来自:10 Quick and Easy Fixes to Reduce Page Weight

谷歌有麻烦了!联邦贸易委员会正调查其搜索业务 当数据中心遭遇污水 微软新能源数据中心的诞生 2012vForum:更加注重开发者 腾讯赵伟:Hive在腾讯分布式数据仓库的实践 Apple将在2013年启动香港数据中心的建设 顶级域名扩张受阻:ICANN透露部分域名存争议 硅谷创业教父Paul Graham:如何获得创业好点子? GDC2012特别报道:中西方游戏开发思想在这里融合 应用示例和对象是编程的未来吗? 为什么2012年HTML5发展远未达预期 当程序不再工作时,程序员说 独立游戏开发者易犯的9大致命错误 “Do Not Track”的前世今生 《Warcraft是怎样炼成的(三)》:从Demo到游戏 无限强大的超级马里奥AI 以Google第二代数据库产品MegaStore为理论模式 探索HBase系统 传Google明年推Chrome OS触摸屏上网本 下载自己过去的Tweets?用户准备好了吗? 微软任命研究部门新副总裁 负责北京等实验室 欧朋首席标准官:HTML5将在2014年成熟 开发利器:对游戏开发者最具价值的5类iOS应用 专访前IE浏览器内核研发工程师,带你深入了解IE10 Windows 8市场接纳速度慢于Windows 7 别只看下载量!“用户留存率”才是关键! 预计2020年出现百亿亿次级超级计算机 Google数据中心PUE的秘密 一个传奇:有个人不断赢得世界算法冠军 音乐能力开放平台合作探索之旅 社交网络海外营销技巧及工具实战 大数据谬误 —— 为什么我们需要收集更多的数据 传苹果地图负责人Rich Williamson遭解雇? Jdk 1.4 怎么删除一个string内所有的中文字? 哪位有输入法的源程序(vc6.0可以编译的)可否给俺发一份? 初学者问题,php、mysql如何安装? 一台新路由器怎么来配置啊,谢谢了!! 急聘二名程序员 今天发现以前上不去的网站可以上了,是否中央对网上舆论放松了? 文件的操作问题 强烈建议斑竹删除魔鬼先生的ID,因为它不配和我们在一起讨论问题 南方的服务器都访问不了了!! 包括tencent, etang 还有我放在上海的服务器 C++标准? DDE技术请教高手 大家帮忙估个价吧(本人 成都),谢谢! 关于在php 中使用 script 的问题 怎样在每天的规定时间触发一个事件?(100分) struts多行提交怎么做!!!!!!!!!!! 在16M的flash中做了一个linux系统后,如何给它加一个rsh的服务器?(现在只有1M空间了) 请问各位作过水晶报表的,我是用报表专家的提示连SQLSERVER2000数据库,但为何运行时提示:无法登陆!!有那位有过解决的经验??很急, 有人知道这是为什么吗? 用ASP可不可以显示数据库的表的结构啊? 2000个线程同时填数据库的测试结果 如何用VC来画座标图,望众高手献艺 怎么编译pro*c? (unix下)———在线等!!!! 今天升到5个裤衩,高兴,散分 有谁知道《斯托克代尔悖论》的内容? 使用VB6.0编程设置IIS5.0服务器 谁有InstallShield,包括汉化界面,中文语言包和注册码,200分回报 freedorm格式数据窗口打印问题,字太长如何自动换行, 一个头痛问题。 做过政府审计软件的请帮帮忙,怎么从十来套不同表结构的数据库导数据到一个固定表结构的数据库呢? 如何让菜单可用或不可用?急啊~~ Lotus中的js问题 哪有Oracle中文最新版下载呀, 请问各地delphi认证培训的费用是多少? re:下雨了 怎么样加提示框 借一个问题!XP里面网卡怎么工作不正常 请问有什么办法破VBA的密码 CEdit 背景色的问题 100 分 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 了解jpeg的请进 高分急求数据库解决方案! 请问vb中浏览器控件是在哪个文件中,另外我想在vb程序中加入介绍性网页,应该怎么办! 存储类 在MainFrame里怎么得到一个指向MyDoc类的指针? 上海的弟兄前来领分!!!! 能ping通代理服务器,但不能上网(ftp等都不能用)。有那些原因! 谁有api做的串口通讯例子 很简单的Temporary used 问题,就是搞不清,请哪位详细点拨一下,铭谢 DataGrid中使用HyerLinkColumn,请怎样动态传递多个参数或改变DataNavigateUrlFormatString的值(在线等待答复) 在winsock1.1下怎样监听网络事件。(请给个API 的 sample ) 高分急求数据库解决方案! What's the type of Hisense company? The sentence structure of “ They painted the walls white.” is _____. A. S+V+P B. S+V+DO+OC C. S+VThe sentence structure of “ They painted the walls white.” is _____. A. S+V+P B. S+V+DO+OC C. S+V+IO+DO D. S+V+ DO 儒家十三经包括哪些? 新儒家美学与儒家美学之间的异同及其特点 若集合P={1,2,4,m},Q={2,m^2},满足PUQ={1,2,4,m},求实数m的值组成的集合. what is one's job like是什麽意思?what is teacher's job like.是说老师的工作是做什麽的吗? 已知函数y=asinx+b﹙a>0﹚的最大值为6,最小值为﹣2,求 a、b的值;若sinx=3/5且x∈﹙π/2,π﹚,求sin﹙aπ/3﹢bx﹚的值 “鼎”组3个成语 儒家十三经典都有什么 本质决定一切,这句话怎么来解释的 已知2xa+3ya+1=0,2xb+3yb+1=0,则图象经过(xa,ya),(xb,yb)两点的一次函数的表达式是----?题中a,b是为了区分 鼎能组哪些成语? 十个,谢谢 在线等哦 已知a的模=根号2,b的模=3,a与b的夹角为45°求使a+xb与xa+b的夹角为钝角时,x的取值范围 CAD中 “拉伸”(stretch)和“移动”(move)有什么区别?怎么好像都只是在移动图形? 关于鼎的成语有哪些? 27^2/3-(1/2)^-2+(√2/2)^0+lg4+2lg5-7log7^8= CAD zoom A(全部)和E(范围)到底有什么区别?我知道A是显示图形界限区域和整个图形范围,E是显示整个图形范围,但是我还是分不清两者到底存在什么区别,请高手们赐教、 谁能用鼎组上10个成语 -1-(0.5-2/3)除1/3*[-2-(-27)|1/8-0.25|= move-rotate-scale interactions 以知㎡属于集合{1.0 m},求实数m的值,请祥解, 这是物业管理实物的案例题1、某高档商品住宅小区环境优美,绿化覆盖率超过30%物业管理公司以给业主生活提供方便为由,单方面做出决定,在中心花园草地边设了几个售货亭,出租给小商贩经 什么会造成世界人口增加 哪里有可以一边看书一边有机器读出来的声音 物业管理人员需要那些知识 已知抛物线y1=x平方和双曲线y2=8/x(x分之8)交于A,当x在什么范围内取值时,函数值y1>y2要过程 起重机轨道能弯曲吗特指标准轨道,不是H型钢和工字钢类型的,指的是P系列轨道 物业管理知识物业服务合同是由 业主委员会 还是 业主大会 与物业管理企业签订的? 已知抛物线y1=x^2和双曲线y2=8/x交于A点,那么当x在什么范围内取值时,函数值y1>y2 安装吊车轨道需什么资质 物业管理知识问题..非常急!..案例:一天早晨,某大厦一台正在运行中的电梯突然发生故障,将在大厦办公的某公司一员工困在空中,管理处领导马上赶到现场,组织有关人员进行抢修,经过一个小 已知函数y1等于ax的平方和y2等于2分之1x的平方加c,若把函数y1的图像向上平移2个单位,就得到函数y2的图像,求a和c的值. 起重机轨道安装预算定额编号是多少就是新厂房的轨道安装,需要报一下价, 成语举什么人才 THE STRUCTURE OF SCIENTIFIC REVOLUTIONS怎么样 有没有advice sb doing sth和advice sb sth (25/4)^1/2-(27/8)^-2/3+(1-√3)^0= 要写过程 英语翻译l amour est un soleil helen to be doing sth 怎么用,何时用?A user can be any person which can be detected by the sensor 130 to be interacting with the sensor 130 and/or the computing machine 100.以下两种方式哪种更严谨达意呢?1.用户可以是能被传感器130 才可以组成成语吗 法国香颂:l'amour est bleu(爱是蓝色的)的歌词及翻译. 回避名词解释 填成语:( )才( )举 A、B是双曲线 y=k/x的同一个分支上的两点,且点B(a,b)在点A的右侧,求b的取值范围? 钢结构中 吊车梁轨道QU120 每米多重? 举和羊能组成什么四字成语? 已知A、B是双曲线y=x分之k的一个分支上的两点,且B(a,b)在点A的右侧,求b的取值范围.图略从图可以看出此反比例函数的关系是y=x分之2,A点坐标为(1,2),在第一象限里. 公平(消费者权益保护法). what is the company ownship structure是什么意思 A、B是双曲线y=x分之k的一分支上的两点,且点B(a,b)在点A的右侧,则B的取值范围是? 什么是客观不公平感?自考 组织行为学 已知双曲线y1=x分之6与y2=x分之k在第一象限.作一条平行于x轴的直线交y1 y2于B已知双曲线y1=x分之6与y2=x分之k在第一象限.作一条平行于x轴的直线交y1 y2于B A .连接oA.过B作BC平行于OA .交x轴 亚洲人口约为300个千万,世界人口大约比亚洲人口的两倍还多10亿,请问世界人口约有多少人?由多少个十亿组成? 电动单梁起重机起重力距怎么算 如图,直线y1=x+2与y2=x分之k相交于点A,B,1,求该双曲线的解析式,2,求不等式y2≥y1时,x的取值范围是多少 Millie is sleeping.The sentence structure is ____ A S+V B S+V+P C S+V+IO+DO D S+V+DO+OC 去年产量A车占总产量10%今年计划将B车产量减10%要保持总产量与去年相等今年A车要的百分数为?设未知数然后列方程就行 已知双曲线y=x分之3k-6在每个象限内,y随x的减小而减小,则k的取值范围是() 2011年10月31日世界人口达到多少亿 儒家典籍除了十三经还有什么?不一定是先秦的,秦以后,清以前,应该有不少儒学大师啊. 美国得州一男子五地疯狂射杀 致其母在北京“最牛违建”拆除进度缓慢 房主称中央巡视组年底前对军队巡查 在武警设民警枪击米粉店主 传因“不卖奶茶”越南网络活跃人士因散播不利于政府消息美媒称美无人机炸死索马里青年党高官福建莆田仙游县与福州永泰县交界发生4民建提议京籍准入实行积分制 取代户籍女大学生进企业终极面试:因吃饭未喝白福建仙游县永泰县交界发4.3级地震 北京一村主任拉选票 广播号召村民挖断福建启III级地震应急响应 已派驻工英窃听丑闻案开庭被告否认指控 最高或美国主持人就“杀光中国人”节目道歉党报谈英国“窃听门”丑闻:严格监管不联大连续22年通过决议 要求美国结束美国会将彻查全部监视项目 白宫修改部英窃听丑闻案开庭被告否认指控 最高或英窃听丑闻案开庭被告否认指控 最高或“世纪审判”撞上美窃听门中央军委成立巡视组寻虎找蝇 重点监督暖气不热求解决 谁料竟是这样的结果火苗呼呼往上爬葡萄牙宠物展:喜感羊驼领风骚新疆16个城市发布PM2.5数据 公新疆昌吉近千名环卫工免费吃上热乎早餐广东纪委原副书记毛荣楷调任江门市委书我国对电池、涂料征收4%消费税三大社:爱国者队绝地反击 布雷迪比肩水果姐凯蒂-佩里献唱超级碗 火焰装被获\"最佳男运动员\"奖 小鲜肉离体1月假新闻盘点:强东奶茶分手费300罗马尼亚:地铁站“凝固” 行人变“雕通讯:阿根廷学生暑假畅享“家庭之美”叶诗文:很失望400混泳不理想 回去最高法第一巡回法庭开始受理案件书画家姚治华题字赠新华社记者汤计阿嬷打瞌睡摔伤 孙子发明防打瞌睡装置NASA卫星升空:火箭划过夜空 光芒我国首家规模性B2F电子商务平台上线张学友到学校接女儿 帮女儿搬东西一脸民政部为抗战殉国国军师长颁发烈士证书
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘