SEO性能优化之网站速度优化

网站速度不仅影响用户体验，也影响Google robot对网站的爬取，进而影响网站收录；所以网站速度对于SEO的重要性不可小觑。Google Page Speed 主要用于分析检测页面加载速度和元素，提出建议。技术人员从而可以依据Page Speed的要点来修正和提高网页网站的质量。对于网页需要改进的地方，PageSpeed不仅提供了优化建议，甚至还直接把优化的最终结果都给提供出来。

Page speed来自于Google，可以下载插件安装在Firefox或Chrome上。插件一般都是英文版，Firefox也有中文版本，但缺乏详细解释。这里先把主要检测事项的中英文对比出来。然后针对细致的项进行解释并尽可能提供技术上操作说明。也可以用另一种方法，直接用Googlehttps://developers.google.com/speed/pagespeed/insights 网站性能检测工具检测网站需要优化的细节。

今天我将介绍JavaScript和CSS优化相关要点，所有的整理资料都是来自于falconhan。

一、压缩JavaScript (Minify JavaScript)
压缩JavaScript的方法跟压缩HTML和压缩CSS在本质上的好处是一样的。一般的方式就是3种：压缩多余的空格和换行符；删除注释；把较长的变量名称和过程名称统一替换为很短的名称。

压缩工具也有很多，之前提到的YUI Compressor就可以执行。

Google/Gtmetrix有一句话看不懂，We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more。意思是尽可能压缩4K意思的JS文件，所获好处是文件可以被缩减25个字节或以上。猜测原因是缓存器的容量是4K，如果JS超过此大小将不会放入缓存中？

另外不确定的是，可被缩减的25bytes的文件是JS本身还是指其它文件，why? 高手请指示一二…………….

二、合并外部JavaScript (Combine external JavaScript)
合并外部的JavaScript文件，跟合并外部CSS是类似的原理，都能够有效减少往返时间(RTT)及在下载其它资源时减少延迟。过多的JS和CSS文件会导致过度的HTTP开销，简单有效的处理方式就是将外部的JS文件简化后再合并。

关于外部JavaScript的使用，有一些建议：
将页面的JavaScript分割为2个文件，一个包含那些必须的代码，这样在页面加载之初会率先调用。另一个就是可以等到其它HTML内容都加载完再调用的JS。在页面的之前使用的JavaScript，尽可能将其简化，这样能避免加载和解析时间过长而阻止其它内容能快速展现。将那些极少被大多数页面使用到的JavaScript代码，放置在独立的文件中，这样可避免多数页面不要调用它而浪费时间。对于那些不需要缓存的小段的JavaScript代码，考虑将其放在HTML页面代码当中。JS在页面中放置的位置也有讲究的，重要的内容优先展示是基本原则，还要考虑到JS或其它资源的并行下载以进一步节省时间。

三、内嵌小型 JavaScript (Inline small JavaScript)
内嵌小型JavaScript能够节省JS请求所导致的服务器请求/响应时间开销。就是对于小段的JS代码，直接嵌入在页面中会比单独的外部调用会好一些。但是更理想的解决方法是将小段JS整合起来再进行外部调用，参见合并外部的JavaScript。从节省时间的角度来考虑，JavaScript代码跟CSS用法类似，仅用于某个特效的小段代码可以写入在页面里，用于多个地方的JS可以合并来外部调用。

四、优化样式表和脚本的排列顺序 (Optimize the order of styles and scripts)
正确地部署外部样式和不管内外的Scripts脚本，能够合理并行下载资源，从而缩减浏览器对页面进行渲染的时间。由于JavaScript能够改变网页的内容和样式布局等，浏览器在遇到js时就会延迟执行渲染任何内容，而让位于先下载、解析和执行Script脚本内容。然而，比请求的时间更重要的是，浏览器在碰到Script时，其它资源没办法并行下载处理，会导致页面停顿，可能影响用户体验。

关于样式表和脚本之间的顺序关系，有几个推荐的处理顺序，一是尽可能把页面的重要内容在脚本和样式表前先加载，二是外部的脚本放在外部的样式之后，三是把内部的脚本放在所以其它内容之后。

五、压缩CSS (Minify CSS)
压缩CSS和压缩JS是一个道理，就是减少文件体积提高下载速度，浏览器在解析和执行CSS的时候也能提高速度。一个可用的工具是 YUI Compressor。

CSS自己压缩也可以，有一些方法，如使用CSS缩写块状间隔，
” padding-top:5px
padding-right:6px
padding-bottom:7px
padding-left:8px”
可以缩写为 padding:5px 6px 7px 8px;

每两位的颜色值都一样可简写，#aabb11 可写为 #ab1
去掉没必要的空格、换行、注释，去掉没必要的字体选项等。

六、去掉无用的CSS (Remove unused CSS)
PageSpeed告诉你，当前页面里面有多少CSS样式是没有被用到的，去掉它们可以进一步加快浏览器对CSS的解析量，提供整个页面的加载速度。

很多网站的做法都是大部分页面会沿用统一的CSS文件，这样在管理上比较容易些。但会导致了很多样式并不会被页面中的元素所使用，对单页面来讲造成一定的资源冗余。PageSpeed虽然把每个没有被当前页用到的CSS样式都列出来，但觉得这个实际的指导意义不够明显，因为，为每个页单独配一个CSS文件显得特二。

最好的处理办法是尽可能把CSS进行分类管理，比如针对不同频道页的（模板可能不同），针对图片形式的，针对表格的等，不同的页面会调用到不同的CSS。如果在建站时就规划好，这种方法就能兼顾CSS精简和管理上的便利。还有一点需要注意，就是在”合并外部的CSS”这个优化选项里提到的，多个较小的CSS应该合并到一个文件里以减少HTTP请求量，或者使用内联样式。

七、内嵌小型CSS (Inline small CSS)
将CSS代码进行外部调用是有好处的（最主要是方便统一管理），但是不能盲目地把所有CSS都改为外部调用。把一些小型（片段或体积不大）的CSS代码嵌入在页面HTML里，让浏览器直接下载解析，可以减少服务器请求/应答的时间开销，从而加快页面的加载速度。另外也可以把小型CSS都聚合为较大的单个CSS文件，再进行外部调用。

Google Pagespeed光说小型CSS，但到底体积大小是多少才算小。。。一说是768bytes，另外从某人试验中（基于Apache）得出另一个结论：体积小于2K（2046 bytes）的CSS代码算是小型，可以节省整体时间。以上2个说法都可作为参考，实际情况还需要进行测试，但小于768的就肯定适合去合并外调或内联使用。

八、合并外部的CSS (Combine external CSS)
合并外部样式表文件，能够减少往返时间(RTT)及在下载其它资源时减少延迟。外部过多的JS和CSS文件会导致过度的HTTP开销，简单处理方式就是合并，最好不要超过3个CSS文件的调用。

关于CSS的使用上，有一些建议：
将CSS分割为2个文件，一个是包含必须的样式，就是在页面加载之初会影响视觉效果的。另一个就是可以等到其它HTML内容都加载完再调用的。
对于那些不常被大多数页面用到的CSS样式，考虑放入到单独文件（比如有些表格样式CSS，只针对某些页面有效）。而对于那些只是对某个元素应用的CSS，则推荐使用内联样式。不要在CSS里使用 @import 来再调用其它的CSS，要么合并到主CSS里，要么单独再外部调用一次。

九、使用高效的CSS选择符 (Use efficient CSS selectors)
使用高效的CSS选择符能够加速页面展现，尽可能避免使用那些能够匹配很多元素的选择符。当浏览器在解析HTML时，先把CSS样式表中指定的元素，根据标准CSS重叠和顺序规则，建造为所有元素展现的结构文档树。在火狐浏览器里（其它类似），样式渲染器将为每个元素，按照从右到左的规则进行匹配（最右边的选择符叫做”Key”），为所有元素找到渲染的次序规则。

越少的CSS规则将会使用更少的时间。因此，对于CSS样式来讲，最好就先删除没用的CSS，然后将应用了大量CSS规则的元素作优化。以下是一些来自David Hyatt的针对高效CSS的建议：

避免使用通配规则（*），星号这种通配符就尽量少或不用，对页面的渲染影响比较大，直接用ID、类和标签选择符比较好。不要限定ID选择符，文档中ID就是唯一的，没必要像这样：div#top{} ，直接就用#top{}就可以。不要限定类选择符，比如，将 li.cnt{} 更改为 .li-cnt{}。规则具体化，避免长串选择符，最好不要出现 div ul li a{} 类似的选择符，建议直接用 .li-anchor{}，避免使用伪类选择符（Pseudo-Class），其开销很高。避免使用子选择符，如果有像#toc>li>a这样的基于标签的子选择符，那么应该使用一个类来关联标签元素，如.toc-anchor。用类选择符来代替子选择符。比如你需要给两个列表来使用不同的样式：
ul li {color: blue;}
ol li {color: red;}

可以将其改为2个类
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

十、将CSS放在文档标头处 (Put CSS in the document head)
对于外部CSS文件，浏览器会将其完全下载再对页面进行解析。内联CSS样式（在< style >里）也会导致回溯和重解析。因此，建议把所有样式都放到外部CSS文件里，再将其放在头部来确保页面打开时就先下载，有助于加速页面展现。

HTML 4.01规范里也建议把CSS都放到里，用Link来调用，而不要用@import来调用。百度统计工具中的“网站速度诊断”功能里也有相应的建议：CSS说明出现在之后，会导致页面重新渲染，降低网站打开速度。解决方法不难，查一遍可能存在的< style >标签，挪到之前。

十一、避免在 CSS 中使用 @import (Avoid CSS @import)
在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS，但浏览器不能并行下载样式，就会导致页面增添了额外的往返耗时。比如，第一个CSS文件first.css包含了以下内容：@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后，才发现及处理第二个文件second.css。

简单的解决方法是使用标记来替代@import，比如下面的写法就能够并行下载css文件，从而加快页面加载速度：
” ”
注意的是之前文章提到过一个页面中的CSS文件不宜过多，否则应该简化及合并外部的CSS (Combine external CSS) 以节省往返请求时间(RTT)。

十二、将图片组合为 CSS 贴图定位 (Combine images using CSS sprites)
使用CSS贴图定位，也叫CSS精灵，能减少下载资源时的往返次数、缩减请求的开销及Web页面所请求的总字节数。

原理与减少JavaScript和CSS是一样的，就是如果网站内有多个图片，理想情况下是把众多的可拼合的图片组织成一个较大的图，从而减少HTTP请求次数和时间。最常见的一种情况是网站的文本编辑框，里面大量的小图标，如果网速较慢可看得出一个一个加载显示，如果能拼合为一张图片，就能大幅节省加载时间。那么如何使用CSS sprites，网上有专门的工具可借助，或者自己根据需要去找教程，利用到图片编辑工具和CSS，稍微麻烦些。

以上内容就是关于SEO性能优化之网站速度优化（JavaScript和CSS优化相关要点）所有内容。