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

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

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

Espresso实战:快速的Android UI自动化测试 《Java并发编程的艺术》作者方腾飞:感谢Java,带我一路前行! Crystal:一个类似于Ruby语法的编程语言 谁将是传统密码的终结者 专访民生银行:CPOS平台如何从线下布局移动支付 MathWorks程邺:机器人时代未来已来 Swift编程规范:保持代码优美的10个方法 中国第二届CSS开发者大会视频&amp;amp;PPT全部免费观看 如何基于Vert.x实现远程调用? Go 1.5如期发布,完全告别C代码 Rust一周集锦(三):关闭3个RFC并为1.4版本做准备 【CTO讲堂】多备份创始人陈元强:在线灾备革命背后的事 探索React:组件间通信过程解析 机智云完成2亿元B轮融资 将围绕信息安全与机器学习创建“机智云联合实验室” 【CTO讲堂】深度?广度?浅析技术人员的职业发展之路 详解React Flux架构工作方式 专访Tiny框架创始人悠然:好的软件设计是“品”出来的 开发移动应用的7大设计要点 历时一年半 现代Web框架Phoenix 1.0正式发布 【七问七答】对话Erlang核心成员Eric Merritt 分布式文档数据库MongoDB开发版本3.1.7发布 年末巨献!SDCC 2015中国软件开发者嘉年华全面开启 Qualcomm中国2015高峰论坛:新品牌与5G技术展望 福利!MDCC 2015 免费展位等你来申请! 《近匠》Gamegou:多些坚持,瞄准海外的小团队也有春天 细说JavaScript异步函数发展历程 YoMail创始人Albert Yang:我与Email交织的程序人生 TIOBE 2015年9月编程语言排行榜:时髦语言Rust进前50 50张999元限量特惠票!SDCC2015软件开发嘉年华 首批讲师名单公布 百度安全:XcodeGhost大爆发可能只是冰山一角 北京市计算中心云计算转型:缘定OpenStack 如何在VS.net 下编译.cpp文件(非Windows应用) 请问像comp.lang.c++这样的新闻组,我要怎么设置才能上呢? 如何知道mfc程序需要哪些dll文件阿?vc有没有这个功能? 各位好,小弟有一事要问, 错在哪里了? 又快到毕业就业的季节,看看这两道题(c),就当热身如何? 这些是不是b/s模式??为什么?? 决心重新捡起丢下多年的数学,大家祝我好运吧! lj8101(笨笨)请进 !!!可用分不再增加的对策!!! 急,关于SQL查询 请问怎样new一个多维数组? 简单的application高手赐教!小妹急啊,谢谢! net 关于程序接口问题,请高手指教!!! 高手帮忙 我在SQL2000中有个字段类型是SMALLDATE,与CEDIT控件联结后,类型是CTIME,但显示不出? 我该怎么学? 怎样让我的程序运行时,始终在最前面 散分!!!回到CSDN!! 经常在运行屏幕保护时VC6.0 就出现了运行错误 嘻嘻~`问同学借了一台数码相机回家,自已拍了几张房间里的照片.大家有兴趣的就去吧!小A房间大暴光 请众位大侠,能不能强烈的推荐一本关于Delphi入门级的经典著作!谢谢了!推荐者必有分 请教! 关于Win32下的字符串操作 菜鸟提问,估计大家都会,指点一下 为什么我用ie的时候,新打开一个页面,他的还原形式的大小总是最小化的? var oXL = new ActiveXObject("Excel.Application")这句话有什么问题? 高分求算法 如何根据IP来得的到对方的操作系统类型 怎么这么老套,大家想想办法啊! 我要学DirectX了,请大家帮忙找一些这方面的资料。 关于出错信息的问题,多谢指教! Csdn,为什么你现在不忙了! asp.net的优点到底在哪里 大家能否推荐几本无线应用方面的书(如:短信编程、WAP编程), 谢了! 最基本问题 哪位写过控制摄像头的例子, 如何使用XP的远程桌面管理?远程控制. float 5.29 显示出来会是什么? 要不要学c++ 不能保存文件了,怎么回事? CString的一个问 在vs,net中创建用户控件和组件有什么区别? Lotus Notes and Domino与LOTUS 1-2-3有什么差别? 问路 JBuilder中类找不到 Montaque,看到后请进,问题有点菜,但希望你尽快回答! 大家帮帮我啊谢谢 private的意义是什么呢? 这是怎么回事啊,经常遇到的问题 请你给远方的亲人写一封信写出你这学期(4年级)的收获或学习上……限2010年1月16日17∶40之前NO,18点之前 If make you feel second best ,I am sorry Iwas bifond you brealay on my mind.... 我用儿童狡猾的目光察觉,她爱我们.(狡猾的意思)还有:还写了一封信劝我,说我是“心清如水的学生”.(心清如水的意思)可是回想起来,那时候我却觉得是给了我莫大的支持!(莫大的意思) 考研政治马哲部分如何理解? 初中不等式题,求具体过程某电脑用户计划使用不超过530元的资金购买单价为70元的单片软件和80元的盒装磁盘,根据需要,软件至少买3片,磁盘至少买2盒,不相同的选购方式共有(  )种 作文《一次难忘的谈话? 如何用马哲的有关理论解释这个故事 (考研政治理论 马克思主义哲学)军队行军,一士兵报告队长,敌方哨所有个弓箭手,但他的箭术很烂,从没射到过我们的人.队长说,发现敌人为什么不把他 邵老师拟将1,2,3,…,n这n个数据输入电脑,求它们的平均数,但不慎漏输了1个数据记作x,得平均数为35又七分之五,即七分之250(250/7).求x的值. 儿童狡猾的眼光察觉,狡猾的含义和表达作用 英语翻译,不要翻译软件的,谢谢!外贸英语:CO和发票需要做大使馆认证加签吗? 阿拉伯半岛与我国南部地区都位于北纬20°~30°的亚热带,北回归线都穿过其中,为何阿拉伯半岛气候干旱,降水稀少,而我国南部却气候湿润,降水丰沛 我用儿童的狡猾的目光察觉,她爱我们,并没有要打我们的意思.这句话中的狡猾是什么意思. 英语作文 中译英她与同学们的关系都很好 I argued___my best friend____that yesterday.I feel very sorry now.A.to; about B.with; about C.with; for D.to; for 第一次会说话 作文不是,是作文 请问在马哲的理论中:意识到底是不是物质?如题. 请问狡兔三窟是什么意思? 浅谈如何建立一个良好的班集体 关于马哲的问题---物质决定意识!世界的发展是物质的,不以人类的意志为转移的.举例:如果第二次世界大战法西斯胜利了.那么世界史将要改写.也就是说因为几个人发动了战争而是历史改写. 我想起个英文名?给点意见吧名字是李小璐 第6题谢谢了 信息 在马哲上讲是属于物质还是意识? I a_____ my best friends.I am very angry with her.填什么 如何建立良好的班集体 有一石灰石样品,经分析,其中含钙元素的质量分数为36%(杂质中的其他物质不含钙元素),则样品中CaCO3的质量分数为 狡兔三窟有什么教育意义 四字怎样词语接龙 马哲辨析,真正只有感觉到的才能理解 Stranger think I was quiet,my friends think I am very cheerful,my best friend know 怎样建立良好的班集体 知道一种不纯物质中的元素的质量分数后怎么求混入这种物质的杂质 狡兔三窟是什么含义 和竹子相近的动物是什么 某不纯氧化镁(MgO)粉末中,测知其氧元素质量分数为45%,且其中只含一种杂质,那么该物质可能是怎样算的,步骤是怎样的. 狡猾是什么意思? 我要造句,是关于星星的作文,其中我需要的是;找到了属于他们自己的那颗***的星.是给予地震中的灾民希望找到了属于他们自己的那颗( )的星 袋鼠英文名 口是心非的意思是啥!请问 大家帮我想下,与“期待和您合作”相配的词语.-- 名片用的,需要找个词语搭配,正面是“期待与您合作”的落款,反面也需要5个自的落款,最好押韵,符合公司对客户的意愿 马哲辨析题:万事万物都在运动中,但只是在概念中运动 十五题, 狡猾的意思 除了运动着的物质以外,世界上什么都没有.在哲学上这句话属于什么观点? 十五题求大神指点! 狡兔三窟的意思 求英文翻译 I have a large collection of 大神求15题 汤姆很爱他的电脑英文翻译 wig collection 什么意思啊,collection 该怎么翻译? 15题,大神们 Wishes you to be happy 好重要的! 响遏成云的意思 物体运动的方式是各种各样的,同一个物体在运动时可能具备()的运动方式 我用儿童的狡猾的眼光察觉她爱我们中狡猾是什么意思 为什么“联袂成云”的“联”是“联”而不是“连” 如果说,科学领域的发现有什么偶然的机遇的话,那么这种“偶然的机遇只能给那些有准备的人,给那些善于独立思考的人,给那些具有锲而不舍精神的人.这句话运用()关系的关联词语,强调了 英语翻译请问 1》 不一定快乐 除了翻译成 not necessarily happy ,可以翻译成not certainly happy么 为什么?是不是CERTAINLY后面只能接 动词?2》动词“规定”怎么翻译?是STIPULTE么?REGULATE也可表示“规定” 朱门太史仆成云是什么意思 如果说,科学领域的发现有什么偶然的机遇的话,那么这种“偶然的机遇”只能给那些有准备的人,给那些善于独立思考的人,给那些具有锲而不舍精神的人.结合文中的事例或课外了解的例子.谈 一次难忘的谈话(作文)要400字左右 每天主动与大人聊天不少于10分钟.谈话内容不限,可以谈自己对一部电视剧、一本书的看法,也可以向父母了解他们的工作,可以谈遇到的趣事,也可以提出
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘