设为首页加入收藏业务一览表公司历程公司介绍联系我们
当前位置网站运营 >> 十四条提高网页打开速度的建议

十四条提高网页打开速度的建议

  网站最基础的东西是什么?
  ——内容,SEO(搜索引擎优化)还是UE(用户体验)?都不对!是速度!
  内容再丰富的网站,假如慢到无法拜访也是毫无意义的; SEO做的再好的网站,假如搜索蜘蛛抓不到也是白搭; UE设计的再人性化的网站,假如用户连看都看不到也是空谈。
  所以网页的效率尽对是最值得关注的方面。如何才干提高一个网页的效率呢?

  第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request恳求数。
  80%的用户响应时间都是浪费在前端。而这些时间重要又是由于下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request恳求数将是提高网页显示效率的重点。
  这里似乎有个抵触,就是假如聆科网络减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多丢脸呢?实在这是一个曲解。聆科网络们只是说尽量的减少,并没有说完整不能应用。减少这些文件的Request恳求数,当然也有一些技巧和建议的:
  1、用一个大图片代替多个小图片。
  这的确有点颠覆传统的思维了。以前有些人一直认为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的成果表明事实并不是这样。
  一个100k的大图片总耗费时间尽对大于4个25k的小图片的总耗费时间。而且重要差别就是4个小图片的Blocked时间尽对大于1个大图片的Blocked时间。
  所以假如可能还是应用大图片来调换过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片调换实现的滑动门的原因。
  但是,请注意:也不能用太大的单张图片,由于那样会影响到用户体验。例如个几兆的背景图片的应用尽对不是一个好主意。

  2:合并你的css文件。
  根据“尽可能的减少HTTP的Request恳求数”准则你会知道,为了方便组织和计划样式表,将用于不同用处的样式表文件分别开来,形成不同的css文件,然后在页面中根据需要引用多个css文件。这样的确是不公平的,由于那样会产生更多的HTTP的Request恳求数。从而下降网页的效率。所以,从提高网页效率的角度上而言,聆科网络们还是应当将所有的css 写在同一个css文件中。但是标题又来了。那么怎么来很好的组织和计划样式表呢?这的确是个抵触。聆科网络现在的做法是采用两套版本。编纂版和宣布版。编纂版仍 然应用多个css文件以便于计划和组织。而等到宣布的时候,再将多个css文件合并到一个文件中往,从而达到减少HTTPRequest恳求数的目标。

  3:合并你的javascript文件。
  原因和处理方法同上,不再赘言。

  第二条:Use a Content Delivery Network 应用CDN
  这个看上往似乎很深奥的样子,但是只要联合中国的网络特点,这个便不难懂得了。“北方服务器”、“南方服务器”、“电佩服务器”、“网通服务器”……这些 词听起来是那么熟悉和压抑。假如,一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时,你就能很深进的懂得。
  鉴于这个不是聆科网络开发职员力所能及的准则,所以这里也就未几言了。

  第三条:Add an Expires Header 添加周期头
  这个也并非开发职员来节制,而是网站服务器治理员的职责。所以,假如作为开发职员的你不懂得和明白也没有关系。还是把这个准则告诉公司的网站服务器治理员。

  第四条:Gzip Components 启用Gzip压缩
  这个大家应当比拟熟悉。Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这对于体积较大的纯文字型的文件有殊效。鉴于这也并非开发职员,而是网站服务器治理员的工作范畴,这里就不具体讲解了。假如你对此感爱好,可以资讯贵公司的网站服务器治理职员。

  第五条:Put CSS at the Top 把CSS样式放在页面的上方。
  无论是HTML还是XHTML还是CSS都是说明型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。 这样就不会呈现,页面结构光秃秃的先出来,然后CSS渲染,页面又忽然华丽起来,这样太具有“戏剧性”的页面浏览体验了。

  第六条:Move Scripts to the Bottom 将脚本放在底部
  原因同第五条一样。只是脚本一般是用来于用户交互的。所以假如页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应当放在页面的底部。

  第七条:Avoid CSS Expressions 避免应用CSS中的Expressions
  CSS中的Expressions实在也是一种if判定首先有必要先阐明一下CSS Expressions是什么一个东西。实在它就像其它语言中的if……else……语句。这样在CSS中就可以进行简略的逻辑判定了,css就可以根结一些情况分辨应用不同的样式了。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判定来渲染后果的元素很多的时候,那么你的浏览器将长期处于假逝世状态,从而给用户带来极差的用户体验。

  第八条:Make JavaScript and CSS External 将javascript和css独立成外部文件
  这一条似乎和第一条有点抵触。的确,假如从HTTP的request恳求数来讲的话,这样做的确是下降了效率。但是之所以这么做,是由于另外一个重要的考 虑因素——缓存。由于外部的引用文件会被浏览器缓存,所以假如javascript和css体积较大的时候,聆科网络们将它们独立成外部文件。这样当用户只要浏 览一次以后,这些体积较大的js和css文件就能被缓存起来,从而极高地提高用户再次拜访时的效率。

  第九条:Reduce DNS Lookups  减少DNS查询
  DNS域名解析系统。大家都知道,我们之所以能记住那么多的网址,是由于我们记住的都是单词,而非那串具体的数学IP地址,而帮我们把那些单词和那样的ip地址接洽起来的就是DNS。那这一条对聆科网络们到底有什么真正意义上的领导意义呢?实在有两条:
  1:假如不是必需,请不要把网站放到两台服务器上。
  2:网页中的图片、css文件、js文件、flash文件等等,不要太多的疏散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片起源于不同网站的帖子显示要快得多的原因。

  第十条:Minify JavaScript and CSS  减少JavaScript和CSS文件的体积
  这点很好懂得。在你的终极宣布版本中把没有必要的空行、空格和注释全部往掉。显然手工往处理效率太低,好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见,聆科网络便不再列举了。

  第十一条:Avoid Redirects 避免跳转
  只从网页开发职员的角度来解读此条。那么聆科网络们可以解读到什么东西呢?2点——
  1:“此域名已过期,5秒钟以后,页面将跳转到http://www.某某.com/index.html页面”,这句话看起来的确很熟悉。但是,这就希奇了,为什么不直接链接到那个页面呢?
  2:一些链接地址请更明白的写出来。例如:将http://hi.tloo.cn/写成http://hi.tloo.cn (注意最后面一个“/”符号)。的确,这两个网址都能拜访到聆科网络的博客,但是,事实上,它们是有差别的。http://hi.tloo.cn的成果是个301响应,它会被重新指向http://hi.tloo.cn/ 。但是显然,中间多浪费了一些时间。

  第十二条 Remove Duplicate Scripts 移除重复的脚本
  对重复说“不!”
  这个准则的道理很浅易,但是真正在工作中,很多人却由于“项目时间紧”、“太累了”、“初期没有计划好”……这样的理由敷衍过往了。你,的确可以找很多的理由不往处理这些过剩重复的脚本代码,假如你的网站不需要更高的效率和后期保护的话。
也正是这点,聆科网络提示大家一些,一些javascript框架、javascript包必定要慎用。至少要问一下:用了这个js kit 到底给聆科网络们多少方便,提高了多少工作效率。然后,再与它由于过剩的、重复的代码带来的负面后果比拟一下。

  第十三条:Configure ETags 配置你的实体标签
  首先来讲讲什么是Etag吧。Etag(Entity tags )实体标签。这个tag和你在网上经常看到的标签云那种tag有点差别。这个Etag不是给用户用的,而是给浏览器缓存用的。Etag是服务器告诉浏览器 缓存,缓存中的内容是否已经产生变更的一种机制。通过Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。这和 “Last-Modified”的概念有点类似。很遗憾作为网页开发职员对此无能为力。他依然是网站服务器职员的工作范畴。假如,你对此有爱好,可以咨询 贵公司的网站服务器治理员。

  第十四条:Make Ajax Cacheable 上面的准则也实用Ajax
  Ajax的应用要适当现在的Ajax似乎有点被神话了,似乎网页只要Ajax了,那么就不存在效率标题了。实在这是一种曲解。拙劣的应用Ajax不会让你的网页效率更高,反而会下降你的网页效率。Ajax的确是个好东西,但是请不要过火的神话它。应用Ajax的时候也要考虑上面的那些准则。

[来源:宁波网站建设公司] [作者:yukko] [日期:10-07-05] [阅读:]