简述减少HTTP提升网站收录量的方法

发表评论 0 条 条评论 发布:jiangwei 发表时间:2011-11-22 标签:
 

  优化网页加载速度简略说明

  1.网页加载时间 = html页面加载时间 + js加载时间 + css加载时间 + 图片加载时间

  当然有些部分会同步加载,这里只是个粗略的公式,但大体的方向是这样。

  很直接的你就会想到,减少http请求数不就能提高加载速度

  A.网站日志数据分析展示(这里的数据全部是出自我以前负责的B2C网站日志和网络测速,日志分析是网站优化的基础,所以学会网站日志分析很关键。)

  从网站日志的相关文件可以看出,搜索引擎抓取一个页面的时间耗费的太长,这个也是影响收录量的一个很关键也是很基础的问题。

  B.网站加载时间

  这个问题带来的问题和上面的一样,****单首页的加载时间在26~29秒,走秀网首页加载时间为12秒左右,新蛋的是9~11秒,京东的在21秒左右,经过几次测试可以看出影响易斯来福网站加载速度的原因主要有以下几点:

  1.首页文件有190多个,90%是图片而且目前是放在一个服务器,这就导致网站在打开的时候图片需要按照顺序下载,同时也增加了大量的HTTP请求,HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放,每一次调用都会产生 HTTP 请求,一定程度上增加了服务器的负担,

  解决方案:

  目前网站加载速度过慢的原因:减少HTTP请求数

  减少http请求数的方法:

  1.JS,CSS,HTML 做gzip压缩 1.不要对img进行Gzip压缩

  2.JS.CSS脚本文件优化 1.删除js,css文件的注释 2.Javascript放置底部:避免阻塞下载 3.CSS放到header中:避免白屏 4.合并JS和CSS 5.压缩JS和CSS

  3.精简HTML  去掉HTML注释,回车符,以及无效字节

  4.优化img文件

  4.1.IMG注明:width,height  在img标签中指定尺寸是为了提升浏览器渲染效率。

  4.2.写入img: 第一时间显示logo图和背景,避免空白和无背景{google代码:<h1><a title=”Go to Google Home” href=”http://www.google.com/webhp?hl=en” id=”logo”>Google<img width=”164″ height=”106″ alt=”" src=”/images/nav_logo.png” /></a></h1>}

  4.3.预处理{google代码:<body  onload=“if(document.images)new Image().src=’/images/nav_logo8.png”>}

  5.优化缓存:对没有变化的css,js,图片等网页元素,直接利用客户端的浏览器缓存读取来有效减少http请求数。

  6.通过增加expires header可以告诉浏览器,那些网页元素可以缓存和缓存多长时间 。

  7.合并网站图标采用CSS sprites技术来实现,而且css sprites有两个好处:

  7.1.CSS Sprites 能较少 HTTP 请求次数。 在没有采用CSS Sprites技术的网站,打开一个网站,网站上有多少图片就要像服务器发送多少次HTTP请求,而单个背景图的设计方法,只需请求一次即可取回背景图片。

  7.2.CSS Sprites 能防止背景图片延迟加载。在点击以图片作背景的按钮时会发现,鼠标悬停的时刻才会触发浏览器下载背景图片,这是非常差劲的用户体验。但如果将图片存放与单个文件,就能避免延迟加载。因为在打开网页的首次请求中,图片已经加载完毕。   很多大型网站,包括google,雅虎,新浪,淘宝,阿里巴巴等,都采用了 CSS Sprites 技术。 使用CSSSprites单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐,缺乏灵活性,同时也增加了图片的体积。但是在追求性能的前提下,CSS Sprites 是值得推广的网页设计方法。

  7.3.CSS Sprites技术文档和案例:

  技术文档:http://baike.baidu.com/view/2173476.htm

  http://paranimage.com/css-sprites-guidelines/

  参考网站:google的搜索页面。http://www.google.com.hk/webhp?hl=zh-CN#hl=zh-CN&source=hp&q=%E6%98%93%E6%96%AF%E6%9D%A5%E7%A6%8F&btnG=Google+%E6%90%9C%E7%B4%A2&oq=%E6%98%93%E6%96%AF%E6%9D%A5%E7%A6%8F&aq=f&aqi=&aql=&gs_sm=e&gs_upl=4140l6928l0l7116l10l7l0l0l0l0l0l0ll0l0&fp=6c1dad8fabbf8f6e&biw=1440&bih=726

  在这个首页面里面的LOGO图片(nav_logo83.png )另存为后发现它不光是一个LOGO,而是网站上所有的图标图片。

  查看搜索页面源代码,其 Logo 部分代码如下:

  <a id=logo href=”http://www.google.cn/webhp?hl=zh-CN” title=”Google 主页”>Google<img width=168 height=119 src=”/images/nav_logo4.png” alt=”"></a>

  其 CSS 部分代码如下:

  #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}

  #logo img{border:none;position:absolute;left:-0px;top:-26px}

  分析上述代码可知,CSS 中 id=logo 的样式父元素采用相对定位方式,定义了宽度和高度,使用 overflow:hidden 来隐藏溢出部分;而 img 元素则采取绝对定位方式,使用 left 和 top 进行图片定位,这与背景图片的定位是一致的。

  8.把脚本和图片放在不同的服务器和域名,做成并行下载。目前国内大型门户和电子商务网站都是采用的这样的技术。

  可以把图片(JS,CSS)文件分别放置在{img1.url.com,img2.url.com,img3.url.com}这样的多个二级域名多个服务器下,这样就可以让网站在加载的时候就可以并行下载图片和脚本文件了。这样也可以减少dns查询次数,一次域名解析通常需要20—120毫秒。减少域名使用数量可以减少dns解析所花的时间,每个域名有并行下载数的限制,yahoo建议使用2-4个域名以获取dns解析时间与并行下载数的平衡。

  案例:京东的并行下载

  http://img1.360buyimg.com

  ….

  http://img14.360buyimg.com

  一共14个图片域名(服务器),所有图片分布在14个域名(服务器)下,加载的时候就是14个域名(服务器)同时加载,也减轻了单台服务器的压力。

  淘宝:

  http://img01.taobaocdn.com

  …

  http://img04.taobaocdn.com

  http://img1.kbcdn.com

  ….

  http://img4.kbcdn.com

  淘宝基本每个频道都有独立的并行下载服务器,这主要原因是因为淘宝图片文件太多的缘故。

  9.在日志数据里面有大量的图片目录是被搜索引擎反复爬取和抓取征用大量的时间和抓取量,屏蔽到这些无用的目录是为了让搜索引擎蜘蛛去爬取其他的文章目录,增加收录量。(robots.txt+nofollow)

  原文:http://www.gnbase.com/thread-9180-1.html

文章作者:jiangwei
本文地址:http://www.fuzhouseoer.com/jianshao-http-shoulu/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

发表评论

*

* 绝不会泄露


Protected by WP Anti Spam