为页面减负的十大建议

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

  • 更大的下载量,导致更慢的用户体验。并不是每个人都拥有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文件,其中的代码实现了“将所有图片缓存一个月”的功能。

<IfModule mod_expires.c>

ExpiresActive On

  

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">

ExpiresDefault "access plus 1 month"

</FilesMatch>

 

</IfModule>

  3.使用CDN

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

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

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

  4.删掉没用的资源

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

  5.合并和压缩CSS

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

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

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

copy file1.css+file2.css file.css

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

cat file1.css file2.css > file.css

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

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

  6.压缩并合并JavaScript

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

  使用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.进一步压缩图片

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

  10.去掉不必要的字体

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

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

时间: 2024-09-29 17:22:03

为页面减负的十大建议的相关文章

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

网站快速加载,是提供良好用户体验的前提.然而,网站功能的不断增多,程序包的不断臃肿,导致网站访问时较大的下载量,最终影响了响应速度.没有一个用户喜欢等待,如何减少代码量,为网站减去过多负担,Craig Buckler在sitepoint网站发表了一篇文章<10 Quick and Easy Fixes to Reduce Page Weight>,分享为网站减负的十个建议.下面为该文的编译内容. 2013年,网站页面的重量增加了32%,竟然达到了1.7MB,包含96个独立HTTP请求.这只是一

你知道吗?为网站减负的十大措施

网站快速加载,是提供良好用户体验的前提.然而,网站功能的不断增多,程序包的不断臃肿,导致网站访问时较大的下载量,最终影响了响应速度.没有一个用户喜欢等待,如何减少代码量,为网站减去过多负担,Craig Buckler在sitepoint网站发表了一篇文章<10 Quick and Easy Fixes to Reduce Page Weight>,分享为网站减负的十个建议.下面为该文的编译内容. 网站页面的重量增加了32%,竟然达到了1.7MB,包含96个独立HTTP请求.这只是一个平均数值,

Android APP高效开发的十大建议

在使用Android开发APP过程中,为什么确保最优化.运行流畅且不会使Android系统出现问题至关重要呢?因为影响APP产品效率的每一个问题,如:耗电或内存占用情况等,都是关乎APP成功与否关键因素.小编为大家总结了十条高效开发AndroidAPP的建议,希望对你有所帮助. 建议一:高效地利用线程 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误.为了加快响应速度,需要把费时的操作(比如网络请求

通过Hadoop安全部署经验总结,开发出以下十大建议,以确保大型和复杂多样环境下的数据信息安全。

1.先下手为强!在规划部署阶段就确定数据的隐私保护策略,最好是在将数据放入到Hadoop之前就确定好保护策略. 2.确定哪些数据属于企业的敏感数据.根据公司的隐私保护政策,以及相关的行业法规和政府规章来综合确定. 3.及时发现敏感数据是否暴露在外,或者是否导入到Hadoop中. 4.搜集信息并决定是否暴露出安全风险. 5.确定商业分析是否需要访问真实数据,或者确定是否可以使用这些敏感数据.然后,选择合适的加密技术.如果有任何疑问,对其进行加密隐藏处理,同时提供最安全的加密技术和灵活的应对策略,以

一个老电子工程师的建议--《给年轻工程师的十大忠告》

诸位,咱当工程师也是十余年了,不算有出息,环顾四周,也没有看见几个有出息的!回顾工程师生涯,感慨万千,愿意讲几句掏心窝子的话,也算给咱们师弟师妹们提个醒,希望他们比咱们强! [1]好好规划自己的路,不要跟着感觉走!根据个人的理想决策安排,绝大部分人并不指望成为什么院士或教授,而是希望活得滋润一些,爽一些.那么,就需要慎重安排自己的轨迹.从哪个行业入手,逐渐对该行业深入了解,不要频繁跳槽,特别是不要为了一点工资而转移阵地,从长远看,这点钱根本不算什么,当你对一个行业有那么几年的体会,以后钱根本不是

让数据库飞起来 十大DB2优化技巧

DB2是IBM出口的一系列关系型数据库管理系统,分别在不同的操作系统平台上服务.下文中将为大家讲解DB2十大优化技巧. 为了帮助DB2 DBA 避免性能灾难并获得高性能,我为我们的客户.用户和 DB2 专家同行总结了一套故障诊断流程.以下详细说明在 Unix.Windows 和 OS/2 环境下使用 DB2 UDB 的电子商务OLTP 应用程序的10 条最重要的性能改善技巧,希望下文中涉及到的内容对大家能够有所帮助. 一. 监视开关 确保已经打开监视开关.如果它们没有打开,您将无法获取您需要的性

对比深度学习十大框架:TensorFlow 并非最好?

http://www.oschina.net/news/80593/deep-learning-frameworks-a-review-before-finishing-2016 TensorFlow 链接:https://www.tensorflow.org/ 对于那些听说过深度学习但还没有太过专门深入的人来说,TensorFlow 是他们最喜欢的深度学习框架,但在这里我要澄清一些事实. 在 TensorFlow 的官网上,它被定义为「一个用于机器智能的开源软件库」,但我觉得应该这么定义:Te

Web 2.0应用客户端性能问题十大根源

原文 http://www.infoq.com/cn/news/2010/08/web-performance-root/ Web 2.0应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题.最近,资深Web性能诊断专家.知名工具dynatrace的创始人之一Andreas Grabner根据自己的工作经验,总结了Web 2.0应用客户端性能问题十大根源,InfoQ中文站将这十个问题做了概括整理,供Web开发人员借鉴和思考. 1. IE中的CSS选择器(selector)运行

电商干货!1000万烧出来的高点击率钻展创意图十大原则(营销&amp;人性)

梦想凯歌:创意图的钻展的灵魂,没有创意图你什么都不是.无论是日常推广还是做大促活动,创意图是测试的重中之重,一定要提前测试好每一个资源位的创意图.今天这篇好文是一个资深电商设计师在操作钻展烧了1000多万后总结的经验,不少技巧可以用在Banner设计上. 创意图是你获取流量的入口,由创意图延升到落地页,进而是整一个活动项目. 所以,这节课很关键,也是我这系列课程的重点.到目前操作钻展也至少烧了1000多万了. 很多朋友常常发图片给梦想凯歌,问如何优化?这十大原则是我梦想凯歌做创意图的总结! 虽然