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

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

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

C++入门学习书籍推荐 GitHub是如何征服Google、微软和其它公司的 约见越狱大神!2015 MSS移动安全峰会议程披露 Spark 1.3更新概述:176个贡献者,1000+ patches 从游戏设计到星际探险,微软HoloLens全息技术将改变什么? 触摸屏技术未来?详解Apple新手段Force Touch 专访云适配CEO陈本峰:紧跟HTML5热潮,Web组件化知多少? QQ音乐5.0全新设计过程要点解析 GDC 2015感悟:从0到1,VR投入手游开发路漫漫 TestBird发布手游真人众测平台——附中国手游兼容性测试白皮书 与用户的再一次连接,微软的免费升级计划背后 颠覆App!LayaBox用Flash开发重度HTML5游戏 WinHEC:微软小娜与小冰正式登陆Windows 10平台 Coursera工程师董飞:典型硅谷公司大数据实战分析 微软开源Visual Studio构建工具MSBuild 死而复生!下架6月,Launcher重回App Store 虚拟投影、高保真耳机!新型可穿戴家庭影院Dashbon Mask 【程序员电子刊精选】躺枪的互联网思维 Algolia的分布式搜索网络架构 对抗苹果?豪雅联合Google、Intel开发智能奢表 VR产品技术解析之三星Gear VR 雅虎北研即将关闭 人才抢夺战迅速拉响 移动应用中的AR开发,5款最受欢迎工具推荐! 中国黑客Pwn2Own再创佳绩 Keen Team三年五夺魁 星环CTO孙元浩:技术解析Transwarp Inceptor是怎样炼成的 第七届中国云计算大会将于6月3-5日在北京召开 两大设计模式 塑造高可读性的网页布局 IP争夺战:任天堂与DeNA联手意味着什么? UNITE 2015干货不断,三天日程抢先看! iOS 8发布近一年,苹果HomeKit都带来了什么? Facebook开源移动网络测试工具Augmented Traffic Control 请问如何用程序控制使FORM最大化,最小化? 如何在datatable中再查找符合条件的数据? 为什么打印宽度最大为21厘米? 请问我在一个.js文件中怎样调用其它.js文件中的资源 这样做到不刷新,获取application的变化? 请教状态栏的问题 vfp问题?急~(关于控件的使用) 破解bios开机密码 如何自己编写代码结束所有的应用程序呢?请教! 请问如何在C#中对字符串或byte[]进行crc32校验。有现成的调用吗? 菜鸟的一个有关数据库的疑问?有谁知道吗? 神啊,救救我吧! 神啊,救救我吧! 神啊,救救我吧! 菜鸟提问,如何知道MDB数据库中是否存在一个指定表,谢谢!急…… 关于用DBGRID向数据库添加主细表的问题?高分奖赏! 关于窗体菜单的问题? 很急!!!!!!!! 欢迎大家推荐好的学习JSP的网站! 数据库 vfp->sql server? 问一个最好的查漏方法 ARM Develop Suite eval version的破解方法或者破解文件 一个word文件,怎么让用户一打开它时 出现保存对话框? ie6.0的快捷键问题 这里人气旺,借贵宝地一用。熟悉网站搜索引擎的朋友请进! 交换机和路由器有什么区别?? csdn怎么回事啊!!昨天登陆后竟然显示别人的用户名,今天竟然连我的注册信息也改了.TMD 关于SQL SERVERS2000 建数据库的问题--请进 请问哪有讲算法的好书啊! 关于单片机??? 向各位大侠请教:怎样在JAVE中调用文件 SYBASE 数据库设备删除后 Vitual Device Number 不能释放? 高分诱惑(痛苦莫过于分太多) RichEdit中的COM问题!!! 各位师兄师姐,帮帮我,好吗? 一个图形文件,如一个JPG图形文件,怎么才能通过流读进来,然后转化成一个字节数组。 关于Activeform中INF文件的问题。(解决问题者有分) 我不算是ASP的学习者,但想请教个问题,一小段ASP代码 请推荐国外(or 国内)优秀的编程网站,for delphi 或vc等等 请指教:关于管理软件权限制作方面的问题 求救:关于从XML文档中抽取文本的方法!!! 怎样读取系统时间,日期?急! 请推荐一两本shell编程方面的好书。UNIX,LINUX不论。 ~◎大虾们,在linux下怎么得到一个进程的cpu mem的使用情况,用从c/c++程序! 我想学JAVA,请问如何开始阿。 键盘有一power键,按下就会关机,怎样编程使按下该键时不执行关机动作? 请问如何控制SourceSafe的物理权限 ? 各位兄弟,有谁知道在网上哪有SQL SEVER2000的教材下载,谢谢! 图片上传到服务器的一个固定文件夹里的程序怎么写??? 两个小问题! 各位兄弟,有谁知道在网上哪有SQL SEVER2000的教材下载,谢谢! 母爱是一缕阳光,让我感到温暖,母爱是 ,母爱是 ,(补充完整 概括海底奇光就是主要内容, 变色龙为什么会变色,有什么作用 母爱是( )例:母爱是一缕阳光,让你的心灵即使在寒冷的冬天也能感到温暖 海底奇光以“校园的一角”为题300字左右要描写出具体的形象 初中必写的议论文 母爱是一缕阳光,让你即使在寒冷的冬天也感到温暖如春.仿写母爱是什么 1.海底奇光”奇“在————.2.海底奇光的收获和体会. 秦兵马俑的课文中的排比句再仿写两句 好听的分组名小学同学....前面要有相同字的..相同格式..最好没有符号 麦田的守望者的含义?麦田的守望者 出了又表示还有希望之外,还有其他的含义吗? 令我感动的一件事作文150字,我11岁,要符合实际的 小学同学和初中同学比起来,到底哪个最好?请高手帮我选一个,只选一个, 麦田的守望者是谁写的啊? 小学人教版第十册有多少篇课文? 汉字的谐音 麦田的守望者的好词好句.我要好词好句.关键的是好词.别给我乱发. 人生之道是什么? 关于"远离毒品,珍爱生命"的演讲稿1839年,林则徐领导了著名的虎门硝烟;20实世纪80年代,林则徐的后代成为联合国禁毒委员会的官员,请你结合有关史实,代林则徐的后代起草一篇在6月26日"国际 作文 我心中的雷锋 或着 我身边的雷锋 550字左右 我想对革命英雄说 求一篇“预防艾滋病”为主题的演讲稿 初一课文三峡.急SHI我了 1949年~1969年的中国革命英雄马宝玉、胡德林、胡福葛振林、宋学义 珍惜生命,远离毒品的发言稿怎样写 趣品人生的评价 革命英雄 十六年前的回忆阅读答案 初一课文三峡,急帮我出 加点字注音5个,解释加点字词20个,翻译句子10句,问答题一个, 有关革命英雄的电影 给汉字注音18.铁铉( ) 19.炮制( ) 20.硌牙( ) 21.内疚( )22.吓懵( ) 23.沏茶( ) 24.面颊( ) 趣品人生读后感 英语翻译《小松》:自小刺头深草里……帮我翻译成白话文! 求汉字注音 关于信念的叙事作文,写画画的为了心中的信念,写绘画的,可以不需要开头和结尾哦!如果觉得写得好的话还会加至100分哦! 关于尝试的议论文700~800字 历城二中35级今年寒假作业语文的 汉字 说让注音,但是注音在哪里? 以坚守心中的信念为题的记叙作文600字 一定要糸记叙文 文言文 学弈和两小儿辩日的重点句还有 悟道理、 汉字是如何注音的 用英文简介 《麦田的守望者》 的内容 , 不可尽信书中所言(议论文).600字,2篇 并解释这个词 请问谁知道〈麦田的守望者〉的英文名字是什么? 文言文《学弈》《两小儿辩日》分别选自哪里? 英语翻译喧嚣的都市,匆匆的人群,重重的压力……华灯初上,一切又归于平静.床头灯光柔柔的洒下,静静坐下来,让我们享受那久违的宁静.翻开智慧的篇章,徜徉在优美的文字中,品读一个个优美 英语翻译People never notice anything. 小练笔 1 文言文两则《学弈》《两小儿辩日》 150字左右联系生活实际,你能从这两个小故事中悟出什么道理?选择一个把你的感悟写下来.(150字左右) 求英语读后感和中文翻译最好是爱丽丝梦游仙境 和小王子的 雷锋的精神有关文章 对易中天 于丹热 这一现象的看法急... 十六年前的回忆朗读的基调应该是 关于缅怀革命先烈,弘扬民族精神与清明有关的中学作文 急用 于丹 易中天大家有没有对 最近在《百家讲坛》上的这些个 学者 有利的评价呢? 母爱是一缕阳光,让你时刻感受到温暖仿写两句.母爱是一泓清泉,( ).母爱是( )要对齐 关于雷峰精神的文章 说十句感悟人生的话 急求!六年级上册语文课文老人与海鸥读后感! 海底奇光 中心思想 变色龙变色有什么规律?18:00之前回答
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘