老榕树社区

标题: SEO性能优化之网站速度优化 t录 [打印本页]

作者: 小跑追幸福2016 时间: 2017-2-5 10:56
标题: SEO性能优化之网站速度优化 t录
网站速度不只影响用户体验，也影响G。gle r.b.t对网站的爬取，进而影响网站收录;所以网站速度关于SEO的重要性不可小觑。G。gle Page Speed 主要用于分析检测页面加载速度和元素，提出倡议。技术人员从而可以根据Page Speed的要点来修正和进步网页网站的质量。关于网页需求改进的中央，PageSpeed不只提供了优化倡议，致使还直接把优化的最终结果都给提供出来。

　　Page speed来自于G。gle，可以下载插件安装在Firef.x或Chr.me上。插件普通都是英文版，Firef.x也有中文版本，但缺乏细致解释。这里先把主要检测事项的中英文比照出来。然后针对细致的项中止解释并尽可能提供技术上操作阐明。也可以用另一种办法，直接用G。glehttps://devel.pers.g。gle.c.m/speed/pagespeed/insights 网站性能检测工具检测网站需求优化的细节。

　　今天我将引见JavaScript和CSS优化相关要点，一切的整理材料都是来自于falc.nhan。

　　一、紧缩JavaScript (Minify JavaScript)

　　紧缩JavaScript的办法跟紧缩HTML和紧缩CSS在本质上的好处是一样的。普通的方式就是3种：紧缩多余的空格和换行符;删除注释;把较长的变量称号和过程称号统一交换为很短的称号。

　　紧缩工具也有很多，之前提到的YUI C.mpress.r就可以执行。

　　G。gle/Gtmetrix有一句话看不懂，We rec.mmend minifying any JS files that are 4096 bytes .r larger in size. Y.u sh.uld see a benefit f.r any file that can be reduced by 25 bytes .r m.re。意义是尽可能紧缩4K意义的JS文件，所获好处是文件可以被缩减25个字节或以上。猜测缘由是缓存器的容量是4K，假如JS超越此大小将不会放入缓存中?

　　另外不肯定的是，可被缩减的25bytes的文件是JS本身还是指其它文件，why? 高手请指示一二……………。
　　二、兼并外部JavaScript (C.mbine 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 .rder .f styles and scripts)

　　正确地部署外部款式和不管内外的Scripts脚本，可以合理并行下载资源，从而缩减阅读器对页面中止渲染的时间。由于JavaScript可以改动网页的内容和款式规划等，阅读器在遇到js时就会延迟执行渲染任何内容，而让位于先下载、解析和执行Script脚本内容。但是，比恳求的时间更重要的是，阅读器在碰到Script时，其它资源没办法并行下载处置，会招致页面停顿，可能影响用户体验。

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

　　五、紧缩CSS (Minify CSS)

　　紧缩CSS和紧缩JS是一个道理，就是减少文件体积进步低载速度，阅读器在解析和执行CSS的时分也能进步速度。一个可用的工具是 YUI C.mpress.r。

　　CSS本人紧缩也可以，有一些办法，如运用CSS缩写块状间隔，

　　” padding-t.p:5px

　　padding-right:6px

　　padding-b.tt.m:7px

　　padding-left:8px”

　　可以缩写为 padding:5px 6px 7px 8px;

　　每两位的颜色值都一样可简写，#aabb11 可写为 #ab1

　　去掉没必要的空格、换行、注释，去掉没必要的字体选项等。

　　六、去掉无用的CSS (Rem.ve 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文件，再中止外部调用。

　　G。gle Pagespeed光说小型CSS，但到底体积大小是几才算小　！＃一说是768bytes，另外从某人实验中(基于Apache)得出另一个结论：体积小于2K(2046 bytes)的CSS代码算是小型，可以俭省整体时间。以上2个说法都可作为参考，理论情况还需求中止测试，但小于768的就肯定合适去兼并外调或内联运用。

　　八、兼并外部的CSS (C.mbine external CSS)

　　兼并外部款式表文件，可以减少往复时间(RTT)及在下载其它资源时减少延迟。外部过多的JS和CSS文件会招致过度的HTTP开支，简单处置方式就是兼并，最好不要超越3个CSS文件的调用。

　　关于CSS的运用上，有一些倡议：

　　将CSS分割为2个文件，一个是包含必需的款式，就是在页面加载之初会影响视觉效果的。另一个就是可以等到其它HTML内容都加载完再调用的。

　　关于那些不常被大多数页面用到的CSS款式，思索放入到单独文件(比方有些表格款式CSS，只针对某些页面有效)。而关于那些只是对某个元素应用的CSS，则举荐运用内联款式。不要在CSS里运用 @imp.rt 来再调用其它的CSS，要么兼并到主CSS里，要么单独再外部调用一次。

　　九、运用高效的CSS选择符 (Use efficient CSS select.rs)

　　运用高效的CSS选择符可以加速页面展示，尽可能避免运用那些可以匹配很多元素的选择符。当阅读器在解析HTML时，先把CSS款式表中指定的元素，根据标准CSS堆叠和次第规则，建造为一切元素展示的构造文档树。在火狐阅读器里(其它类似)，款式渲染器将为每个元素，按照从右到左的规则中止匹配(最右边的选择符叫做”Key”)，为一切元素找到渲染的次序规则。

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

　　避免运用通配规则(*)，星号这种通配符就尽量少或不用，对页面的渲染影响比较大，直接用ID、类和标签选择符比较好。不要限定ID选择符，文档中ID就是独一的，没必要像这样：div#t.p{} ，直接就用#t.p{}就可以。不要限定类选择符，比方，将 li.cnt{} 更改为 .li-cnt{}。规则细致化，避免长串选择符，最好不要呈现 div ul li a{} 类似的选择符，倡议直接用 .li-anch.r{}，避免运用伪类选择符(Pseud.-Class)，其开支很高。避免运用子选择符，假如有像#t.c>li>a这样的基于标签的子选择符，那么应该运用一个类来关联标签元素，如.t.c-anch.r。用类选择符来替代子选择符。比方你需求给两个列表来运用不同的款式：

　　ul li {c.l.r: blue;}

　　.l li {c.l.r: red;}

　　可以将其改为2个类

　　.un.rdered-list-item {c.l.r: blue;}

　　。rdered-list-item {c.l.r: red;}

　　十、将CSS放在文档标头处 (Put CSS in the d.cument head)

　　关于外部CSS文件，阅读器会将其完好下载再对页面中止解析。内联CSS款式(在里)也会招致回溯和重解析。因此，倡议把一切款式都放到外部CSS文件里，再将其放在头部来确保页面翻开时就先下载，有助于加速页面展示。

　　HTML 4.01标准里也倡议把CSS都放到里，用Link来调用，而不要用@imp.rt来调用。百度统计工具中的“网站速度诊断”功用里也有相应的倡议：CSS阐明呈如今之后，会招致页面重新渲染，降低网站翻开速度。处理办法不难，查一遍可能存在的标签，挪到之前。

　　十一、避免在 CSS 中运用 @imp.rt (Av.id CSS @imp.rt)

　　在外部的CSS文件中运用@imp.rt会使得页面在加载时增加额外的延迟。固然规则允许在款式中调用@imp.rt来导入其它的CSS，但阅读器不能并行下载款式，就会招致页面添加了额外的往复耗时。比方，第一个CSS文件first.css包含了以下内容：@imp.rt url(“sec.nd.css”)。那么阅读器就必需先把first.css下载、解析和执行后，才发现及处置第二个文件sec.nd.css。

　　简单的处理办法是运用标志来替代@imp.rt，比方下面的写法就可以并行下载css文件，从而加快页面加载速度：

　　留意的是之前文章提到过一个页面中的CSS文件不宜过多，否则应该简化及兼并外部的CSS (C.mbine external CSS) 以俭省往复恳求时间(RTT)。

　　十二、将图片组合为 CSS 贴图定位 (C.mbine images using CSS sprites)

　　运用CSS贴图定位，也叫CSS精灵，能减少下载资源时的往复次数、缩减恳求的开支及Web页面所恳求的总字节数。

　　原理与减少JavaScript和CSS是一样的，就是假如网站内有多个图片，理想情况下是把众多的可拼合的图片组织成一个较大的图，从而减少HTTP恳求次数和时间。最常见的一种情况是网站的文本编辑框，里面大量的小图标，假如网速较慢可看得出一个一个加载显现，假如能拼合为一张图片，就能大幅俭省加载时间。那么如何运用CSS sprites，网上有特地的工具可借助，或者本人根据需求去找教程，应用到图片编辑工具和CSS，略微费事些。

淘宝客服电话 www.enqunsi.com：nasw01

作者: 娃娃美美哒 时间: 2017-2-5 10:56
参考参考，我认为很好，大家说说

欢迎光临老榕树社区 (http://club.lrswl.com/)