要做就要做一个有排名的网站

承揽网站建设、网站制作、网站推广优化、企业网站外包 联系电话:13401617635

网站维护 您当前所在的位置是:主页 > 网站维护 > >

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

  • 发布时间:2016-01-08
  • 责任编辑:吾推网

  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年团购、秒杀盛行时,某银行举办手机秒杀活动,更新时间时每秒都将整个页面刷新,这么做的后果不仅使网站访问速度变慢,最后该网站也因不堪重负导致无法访问。

成功案例 更多>>

  • 1
  • 2
  • 3
关于吾推
常州SEO
常州网站优化
全国分站
网站建设
网站优化
网站外包
网站建设套餐
特惠型
实用型
商务型
豪华型
网站托管服务
管家A计划
管家B计划
管家C计划
管家E计划
管家白金计划
管家豪华套餐
管家增值套餐
SEM托管
网络营销
软文营销
问答发布
论坛营销
邮件营销
QQ群营销
SEO优化
整合营销
微博营销
微博A计划
微博B计划
微博C计划
红人营销
营销型网站案例
企业案例
品牌案例
医疗行业案例
增值服务
网站空间
网站域名
53客服系统
商务通
企业邮箱
企业QQ
百度竞价及工具
400电话申请
联系我们
付款方式
人才招聘

 版权所有吾推网络(常州)科技有限公司  备案号 苏ICP备13061086号-1
联系人:朱先生(13401617635) 邮箱:1150476981@qq.com 网址:www.znyseo.com