存档

文章标签 ‘SEO网站速度优化’

SEO性能优化之网站速度优化续(JavaScript和CSS优化相关要点)

2013年6月9日 没有评论

上一篇SEO性能优化之网站速度优化(JavaScript和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优化相关要点)所有内容。

转载注明出处《尉聊子的外贸网络营销博客》
原链接:http://www.hurencai.com/archives/144