网站页面精简的10个优化技巧

据查询，页面巨细在2013年均匀增长了32%，均匀抵达了1.7M，独自的HTTP恳求抵达96个，说实话，这是一个令人震惊的数字，而且这只是个均匀值，有一半的网站会大于这个值。

　　那么，一个“页面超重”的网站有啥影响呢?详细来说，有以下4点：

　　①、网站代码越多，用户下载的就越多，加载速度就会越慢。在国内，并不是每个人都能享用20M的宽带，每一个开发者心里都很明白，用户不愿意等。

　　②、尽人皆知，移动互联网发展迅速，关于2G网络来说，加载1.7M的页面乃至需求一分钟时刻。

　　③、影响搜索引擎抓取速度将会对网站排行形成很大影响。

　　④、关于开发者来说，代码量越大，就越不简单更新和维护。

　　如今现已有许多人开端关注这个疑问，并呈现了许多优化的东西，而且这些技能都十分简单上手，不需求花太多时刻，也不需求重新开发。 

　　在本文中，马海祥会给咱们一些主张，尽管前三个主张实际上不能给“页面减肥”，但它们仍能有用的加速页面加载速度。

　　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效劳器中装备缓存一切的相片一个月:

　　ExpiresActive On

　　ExpiresDefault "access plus 1 month"

　　3、运用内容分发网络 (CDN)

　　CDN的全称是Content Delivery Network，即内容分发网络。其意图是经过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边际”，运用户可以就近获得所需的内容，进步用户拜访网站的呼应速度。

　　CDN有别于镜像，因为它比镜像更智能，或许可以做这么一个比方：CDN=更智能的镜像+缓存+流量导流。

　　因而，CDN可以明显进步Internet网络中信息活动的功率，从技能上全面处理因为网络带宽小、用户拜访量大、网点散布不平等疑问，进步用户拜访网站的呼应速度。

　　为更好地了解CDN，让咱们看一下CDN的工作流程，当用户拜访现已参加CDN效劳的网站时，首要经过DNS重定向技能确定最接近用户的最好CDN节点，一起将用户的恳求指向该节点。

　　当用户的恳求抵达指定节点时，CDN的效劳器(节点上的高速缓存)担任将用户恳求的内容提供给用户。

　　详细流程为: 用户在自个的浏览器中输入要拜访的网站的域名，浏览器向本地DNS恳求对该域名的解析，本地DNS将恳求发到网站的主DNS，主DNS依据一系列的战略确定其时最恰当的CDN节点，并将解析的结果(IP地址)发给用户，用户向给定的CDN节点恳求相——应网站的内容。

　　以上三个办法可以有用地加速页面的拜访速度(更多的办法可检查马海祥博客《提高网站页面翻开速度的12个主张》有关介绍)，如今咱们将对你的代码进行确诊，协助咱们给页面减肥。

　　4、删去不需求的资本

　　当你不再需求一个组件的时分，你应当删掉它的CSS和JavaScript代码，假如这些代码都独自放在一个文件中，那删掉它们也不是难事，但假如现已没有用的代码和其它代码在一个文件中，那你肯定要费不少精力去删掉它们。

　　这个时分你就需求运用第三方的东西来帮你一键处理，比方JSLint，Dust-Me Selectors，CSS Usage或是像grunt-uncss相同的构建东西。

　　5、style和font重复界说的沉余代码

　　要充分运用好CSS代码界说自个的色彩巨细等，有些网站既用了CSS代码界说了以后又去运用style或许是font这么的代码进行界说，这么就无形中增加了无用代码，简单形成代码冗余，因而咱们要对这么的代码进行紧缩，完成代码精简。

　　6、通用和最小化CSS

　　抱负情况下，需求一个独自的CSS文件，让每个页面都调用这一个规划，当然，假如你想要支撑老版别的IE，你就得多弄一个CSS文件。

　　别的，马海祥还要提示咱们一点：当你把它们构建到效劳器上之前，你应当把代码间一切不必要的格局都删掉。

　　有许多预处理东西都可以帮你处理这件麻烦事，比方Sass，LESS和Stylus。

　　有一些办法可以协助你直接合并多个CSS文件，在Windows上：

　　copy file1.css+file2.css file.css

　　在Mac或Linux上：

　　cat file1.css file2.css > file.css

　　你可以把得到的CSS文件再经过在线的CSS紧缩东西删去格局化。

　　最终，在head标签中加载一切的CSS，这么浏览器就知道你的页面款式不必屡次重绘了。

　　7、通用和最小化的JavaScript

　　运用外部文件，咱们可以用Javascript代码和CSS代码放在外部文件里边，在咱们的HTML代码里边加上调用代码进行调用即可，假如翻开一个网站去检查它的源文件，前面假如有许多的Javascript代码和CSS代码就简单使得网站有用的内容文字有些推到后边去了，是不利于搜索引擎抓取的。

　　据马海祥博客搜集的数据显现：均匀每个页面加载了18个javascript文件，尽管把像jQuery这么的库文件独自分隔十分有用，可是你自个的JavaScript代码应当坚持通用和最小化。

　　同样许多第三方的东西可以帮你处理这么事情，比方YUI Compressor，Closure Compiler和我最喜欢用的The JavaScript CompressorRater，简化的JavaScript代码会加速页面的拜访速度，削减HTTP恳求次数。

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

　　8、削减页面嵌套的表格

　　关于表格要尽量少运用，尤其是嵌套的表格有些，尽管CSS排版使得咱们编写代码愈加的精简简单，但往往也是少不了表格的运用的，咱们可以不去避免，但一定要削减运用多层嵌套的表格，不要发生没有用的代码。

　　9、网站图像的优化

　　关于一些图像站来说，加载过错的图像格局会对你的页面形成很大影响，所以，马海祥主张图像站的站长一定要多对图像做些优化。

　　(1)、图像优化准则

　　通常来说选择图像咱们运用遵循如下准则：

　　①、相片运用JPG格局。

　　②、其它一切的图像都运用PNG格局(详细可检查马海祥博客《JPG、PNG和GIF图像的基本原理及优化办法》的有关介绍)。

　　(2)、调整大图的巨细

　　如今智能机所拍出的相片越来越大，你不行能把原相片直接展如今页面中，普通的编辑器都会直接上传原图，这么会让页面的加载速度慢到另一个等级，在正常的相片处理中，通常都没有必要给用户高质量的图像展现，所以，你需求一个主动调整图像巨细的东西。

　　需求注意的是，图像的尺度是不能超越容量的巨细的，这么一来页面加载了全图，却无法展现出来，如今相片的尺度基本上都超越电脑显现屏的尺度了。

　　图像的巨细在页面总巨细中占很大的比重，图像减小50%会导致全体页面巨细削减75%，所以你应当认真处理一下图像的加载(详细可检查马海祥博客《交互规划的三大隐形机制：加载、改写和缓存》的有关介绍)。

　　(3)、进一步紧缩图像

　　只是调优图像的巨细是不行的，你应当经过第三方东西对图像进行剖析，进一步紧缩图像。

　　对比好用的东西有OptiPNG，PNGOUT，jpegtran和jpegoptim，这些东西大都能装置成独立的东西或是整合到开发过程中，别的像Smush这么的东西，还可以直接在云端处理。

　　10、删去不必要的字体和注释

　　Web fonts现已彻底改变了字体的规划，它削减了许多不必要的文本，可是，如今的字体仍然会给你的页面带来剩余的字节。

　　假如你运用超越两种字体，这就现已开端对功用形成影响了。

　　页面代码尽量少用注释，咱们知道一段程序里边加上注释可以便于咱们迅速找到和了解详细代码对应的功用，关于编程人员修改页面是有协助的，可是这么的代码关于搜索引擎来说是没有任何的含义的，只能说是噪声，因而咱们要削减页面代码里边呈现的注释有些。

　　我信任大多数网站都可以经过以上的优化减小大约30%-50%的分量，可是身为一个完美主义的开发者这是远远不行的，咱们在接下来的系列文章中会继续对网站减肥进行深入研究。