前台页面优化全攻略(一)

标签: 页面 优化 攻略 | 发表时间:2014-09-04 07:45 | 作者:
出处:http://kb.cnblogs.com/

   英文原文: http://www.sitepoint.com/complete-guide-reducing-page-weight/

  据调查,网页大小在2013年平均增长了32%,平均达到了1.7M,单独的HTTP请求达到96个。这是令人震惊的数字,而且这只是个平均值,有一半的网站会大于这个值。网站也得了肥胖症,而我们这些开发者就是罪魁祸首。

  一个超重的网站会对你产生如下影响:

  1. 网站代码越多,用户下载的就越多,加载速度就会越慢。在这个地球上,并不是每个人都能享受20M的宽带,每一个开发者心里都很清楚,用户不愿意等。

  2. 众所周知,移动互联网发展迅速,对于2G网络来说,加载1.7M的页面甚至需要一分钟时间。

  3. 影响搜索引擎抓取速度将会对网站排名造成很大影响。

  4. 对于开发者来说,代码量越大,就越不容易更新和维护。

  我猜测今年页面平均代码量会减小,希望事实如我所愿。如今已经有很多人开始关注这个问题,并出现了很多优化的工具,而且这些技术都非常容易上手,不需要花太多时间,也不需要重新开发。

  在本文中,我会给大家一些建议。前三个建议实际上不能给网页减肥,但它们仍能有效的加快网页加载速度。

  1. 用GZIP格式压缩

  gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序。它是Jean-loupGailly和MarkAdler一起开发的。第一次公开发布版本是1992年10月31日发布的版本0.1,1993年2月发布了版本1.0。

我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

  HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

  根据W3C组织调查,大部分的网站都没有启用压缩功能。 

  2. 支持浏览器缓存

  如果浏览器支持缓存,我们就不用重复下载网页资源。最简单的设置缓存方法是在响应头中添加相应的内容,包括:Expires header,Last-Modified等。

  你可以可以通过配置服务器来自动添加这些属性。比如你在Apache服务器中配置缓存所有的照片一个月:

<IfModule mod_expires.c>
ExpiresActive On

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

  3. 使用内容分发网络 (CDN)

  CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比 喻:CDN=更智能的镜像+缓存+流量导流。因而,CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题,提高用户访问网站的响应速度。 

  为更好地理解CDN,让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时,首先通过DNS重定向技术确定最接近用户的最佳CDN节点,同时将用户的请求指向该节点。当用户的请求到达指定节点时,CDN的服务器(节点上的高速缓存)负责将用户请求的内容提供给用户。具体流程为: 用户在自己的浏览器中输入要访问的网站的域名,浏览器向本地DNS请求对该域名的解析,本地DNS将请求发到网站的主DNS,主DNS根据一系列的策略确定当时最适当的CDN节点,并将解析的结果(IP地址)发给用户,用户向给定的CDN节点请求相——应网站的内容。

  以上三个方法可以有效地加快页面的访问速度,现在我们将对你的代码进行诊断,帮助我们给页面减肥。

  4. 删除不需要的资源

  当你不再需要一个组件的时候,你应该删掉它的CSS和JavaScript代码,如果这些代码都单独放在一个文件中,那删掉它们也不是难事,但如果已经没有用的代码和其它代码在一个文件中,那你肯定要费不少精力去删掉它们。这个时候你就需要使用第三方的工具来帮你一键解决,比如 JSLintDust-Me SelectorsCSS Usageunused-css.com 或是像 grunt-uncss一样的构建工具。

  5. 通用和最小化CSS

  理想情况下,需要一个单独的CSS文件,让每个页面都调用这一个布局,当然,如果你想要支持老版本的IE,你就得多弄一个CSS文件。当你把它们构建到服务器上之前,你应该把代码间所有不必要的格式都删掉。

  有很多预处理工具都可以帮你解决这件麻烦事,比如 SassLESS 和 Stylus

  有一些方法可以帮助你直接合并多个CSS文件,在Windows上:

copy file1.css+file2.css file.css

  在 Mac或Linux上:

cat file1.css file2.css > file.css

  你可以把得到的CSS文件再经过在线的CSS压缩工具删除格式化, cssminifier.comCSS Compressor & Minifier 和 CSS Compressor都是很不错的工具。

  最后,在head标签中加载所有的CSS,这样浏览器就知道你的页面样式不用多次重绘了。

  6. 通用和最小化的JavaScript

  平均每个页面加载了18个javascript文件,虽然把像jQuery这样的库文件单独分开非常实用,但是你自己的JavaScript代码应该保持通用和最小化。同样很多第三方的工具可以帮你解决这样事情,比如  YUI CompressorClosure Compiler 和我最喜欢用的  The JavaScript CompressorRater。简化的JavaScript代码会加快网页的访问速度,减少HTTP请求次数。

  最后,最好在HTML的body标签后放置JavaScript引用代码,这样能保证JavaScript代码不影响到其它内容的加载。

  7. 使用正确的图片路径

  加载错误的图片格式会对你的网页造成很大影响,一般来说选取图片我们应用遵循如下原则:

  1.照片使用JPG格式。

  2.其它所有的图片都使用PNG格式。

  8. 调整大图的大小

  目前智能机所拍出的照片越来越大,你不可能把原照片直接展示在页面中。普通的编辑器都会直接上传原图,这样会让页面的加载速度慢到另一个级别。在正常的照片处理中,一般都没有必要给用户高质量的图片展示。所以你需要一个自动调整图片大小的工具。

  需要注意的是,图片的尺寸是不能超过容量的大小的,这样一来页面加载了全图,却无法展示出来。现在照片的尺寸基本上都超过电脑显示屏的尺寸了。

  图片的大小在网页总大小中占很大的比重,图片减小50%会导致整体页面大小减少75%,所以你应该认真解决一下图片的加载。

  9. 进一步压缩图片

  仅仅调优图片的大小是不够的,你应该通过第三方工具对图片进行分析,进一步压缩图片。比较好用的工具有 OptiPNGPNGOUTjpegtran 和 jpegoptim。这些工具大都能安装成独立的工具或是整合到开发过程中,另外像 Smush这样的工具,还可以直接在云端处理。

  10. 删除不必要的字体

  Web fonts已经彻底改变了字体的设计,它减少了很多不必要的文本。然而,目前的字体仍然会给你的网页带来多余的字节。如果你使用超过两种字体,这就已经开始对性能造成影响了。

  结论

  我相信大部分网站都可以通过以上的优化减小大概30%-50%的重量,但是身为一个完美主义的开发者这是远远不够的,我们在接下来的系列文章中会继续对网站瘦身进行深入研究,感兴趣的可以关注一下极客头条的微博和微信,我们会将接下来的文章在各个社交平台上进行推送。

相关 [页面 优化 攻略] 推荐:

前台页面优化全攻略(一)

- - 博客园_知识库
   英文原文: http://www.sitepoint.com/complete-guide-reducing-page-weight/.   据调查,网页大小在2013年平均增长了32%,平均达到了1.7M,单独的HTTP请求达到96个. 这是令人震惊的数字,而且这只是个平均值,有一半的网站会大于这个值.

前台页面优化全攻略(二)

- - 博客园_知识库
  在 上一篇文章中,我们讨论了一些基本的页面优化和减肥方案,现在我们的页面已经被缩减了30%-50%,如果你还没有阅读上一篇文章,我建议你完成那些基础热身之后再继续进阶的训练.   如果你已经尝试了基础的热身,那我们就继续采取一些更极客的解决方案.   看到这个标题请不要惊讶,我并不是让你放弃第三方社交平台,而是希望你能放弃那些肥胖的官方组件.

前台页面优化全攻略(四)

- - 博客园_知识库
  通过前几篇文章,你应该已经掌握了很多优化网站的方法. 现在你的网站加载速度已经很快了,但是你必须持续的监控你的网站,了解它的大小变化,要不然一段时间过去之后,它可能又成为了一个胖子.   如今每个页面平均已经达到1.7M,每年增长大概32%. 你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的.

前台页面优化全攻略(三)

- - 博客园_知识库
  经过前 两篇文章的实践,你的网站加载速度一定有了非常明显的变化. 能把实践跟到这篇文章的人想必一定是极客中的极客. 如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案.   你可以对网站进行快速的优化,但网站日常的节食却很难. 也许你已经花了很大的力气去优化你的 CSS和 JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.

如何做页面优化

- - 互联网的那点事
改版是在原有基础上做较大的改变;而优化是做些小的调整,快速提升效果. 但不管是改版还是优化,都需要考虑以下的步骤:. 1.问题现状(数据、用户反馈等)/  用户调研(问卷、访谈等内容,尽量结合数据看)/  竞品分析. 2.结合上面三点,确定优化目标. 3.根据目标确定设计计划(如何达成目标). 4.结果检验(数据、用户反馈等指标).

网站页面优化策略

- - 月光博客
  网站的页面优化,也即网页优化是对网页的程序、内容、版块、布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关的关键词能有好的排位. 使网站更容易被搜索引擎收录,提高用户体验和转化率进而创造价值. 下面主要从网站代码、标签、正文等几个方面来讲述网站的页面优化.

【mysql的设计与优化专题】mysql的最佳索引攻略 - 菜问

- - 博客园_首页
所谓索引就是为特定的mysql字段进行一些特定的算法排序,比如二叉树的算法和哈希算法,哈希算法是通过建立特征值,然后根据特征值来快速查找,而用的最多,并且是mysql默认的就是二叉树算法 BTREE,通过BTREE算法建立索引的字段,比如扫描20行就能得到未使用BTREE前扫描了2^20行的结果,具体的实现方式后续本博客会出一个算法专题里面会有具体的分析讨论;.

管理好页面图片,减少页面加载时http连接,优化页面

- - ITeye博客
浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存. 而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片. 也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.

浏览器的加载与页面性能优化

- 彦强 - 百度泛用户体验
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.