网站维护WuTui TECHNOLOGY

当前位置:网站首页 > 网站维护 >

SEO培训之网站速度优化的策略

日期:2016-01-08 20:29 / 责任编辑:admin

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

  

 

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

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

  一、压缩Java (Minify Java)

  压缩Java的方法跟压缩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? 高手请指示一二…………….

  二、合并外部Java (Combine external Java)

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

  关于外部Java的使用,有一些建议:

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

  三、内嵌小型 Java (Inline small Java)

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

  四、优化样式表和脚本的排列顺序 (Optimize the order of styles and s)

  正确地部署外部样式和不管内外的s脚本,能够合理并行下载资源,从而缩减浏览器对页面进行渲染的时间。由于Java能够改变网页的内容和样式布局等,浏览器在遇到js时就会延迟执行渲染任何内容,而让位于先下载、解析和执行脚本内容。然而,比请求的时间更重要的是,浏览器在碰到时,其它资源没办法并行下载处理,会导致页面停顿,可能影响用户体验。

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

  五、压缩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页面所请求的总字节数。

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

  浅谈大型网站访问速度优化策略

  网站访问速度快慢直接影响公司和用户利益,其重要性不言而喻,本文中分享了近期在优化网站访问速度时积累的一些经验,希望给各位运维人员带来一些帮助。

  SEO学堂小编推荐:

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

  网站速度优化几点方法分享

  让网站访问速度更快的方法

  提高网站打开速度的7大秘籍

  

 

  背景:随着业务快速增长,面对每天上亿PV的访问量,网站整体加载服务/程序越来越多,导致网站整体访问性能下降。

  目标:优化网站访问速度,做到行业NO.1!

  在做网站访问速度优化之前,一定要对当前数据做一定分析,了解哪些元素、服务、业务影响当前网站整体速度,在后期优化过程中,可以一边优化一边与优化前数据做对比。在数据采集和分析方面,推荐使用基调、博睿这种第三方检测工具,这样可以保证数据真实可靠,还可以看到历史数据。具体的优化策略请看以下三个方面的介绍:

  一、CDN至上

  CDN原理在此不再累述。现在稍微有点规模的web站点,大多数都会使用CDN,有针对静态的,有针对动态的,还有针对视频流的;在CDN建设上也多种多样,有自建的,有第三方的(比如网宿、蓝讯)。优化过程中需要注意的问题如下:

  静态资源尽量全部放入CDN,如jpg/png、js/css、swf

  使用基调检测任务,检测是否有跨运营商访问情况

  自定义脚本,实时检测各CDN节点是否出现time_out、50X错误

  对比访问及源站access日志,提高缓存命中率

  增加max-age时间

  压缩静态资源

  二、域名拆分

  在域名使用上,也有很多值得注意的地方,我们针对自己的实际情况做了以下方面的改进:

  1、使用独立域名,如网站为bj.58.com,那图片服务将使用58cdn.com.cn,这么做的好处是隔离cookie,减少了通信流量,提升了网站访问速度;

  2、拆分域名,比如原download.58.com可以拆分成dl1.58cdn.com.cn-dl4.58cdn.com.cn四个域名。拆分多个域名的好处是突破IE低版本并发连接数限制。在域名拆分时并不是拆分的越多越好,因为随着域名增多,DNS请求时间和服务器建立连接时间都逐渐会增加,所以一定要紧密结合自身业务。

  三、优化第三方服务

  何为第三方服务呢?我是这么理解的,比如bj.58.com这个域名,它下面所有非bj.58.com开头的域名链接,都可以定义为第三方服务。如公司内部的其它系统、第三方公司的统计/广告系统等等。随着业务发展,接入的第三方服务越来越多,一个核心业务页面约100-200个元素中,有近五分之二的元素是第三方公司的,面对第三方服务,我们不能直接保障可用性,所以只能以监控、督促的手段来解决。所以我们把这一部分作为重点优化目标。下面举个真实发生过的例子给大家看看:

  有一次接到客服反馈,北京某地产中介访问bj.58.com发布租房信息时打开网站出现卡死情况。因当时该用户无法使用IM工具,再加上用于在北京,我便直接去用户那了,到用户那通过Chrome的开发者工具加载网站时发现该页面调用了一个第三方链接,这个链接经常会出现访问超时、加载缓慢现象。后来回公司经确认,该链接为刚上线的某第三方热点统计工具,用于统计用户行为,由于我们网站访问量较大,第三方公司扛不住这么大访问量,所以频繁超时,导致用户访问我们的网站时出现卡死现象。所以,第三方服务可用性不容忽视。另外,我们针对第三方服务也做了一些优化和改进:

  1、加强监测频率,在监测工具上,我们使用基调作为质量监测工具,数据真实可靠有保障。监测频率上由原两小时调整为每小时/每半小时监测一次;

  2、导出基调原始监测数据,自定义定时分析,该数据中包含网页所有元素错误信息。导出数据后做出筛选及排序,选取监测任务中所错误率最高的前30个URL,然后把这些错误URL定时发送到业务人员邮箱。

  总结

  其实,网站访问性能是一种意识,平时对网站上一切元素做变更的时候,多考虑一下这方面的问题能为网站性能带来直接的利益;如2010年团购、秒杀盛行时,某银行举办手机秒杀活动,更新时间时每秒都将整个页面刷新,这么做的后果不仅使网站访问速度变慢,最后该网站也因不堪重负导致无法访问。


相关文章