CSS是现在网站网页布局必不可少的手段之一,而要用好CSS,不让CSS成为网页载入速度的瓶颈,需要掌握下面的原则。
1)避免CSS表达式;
2)把CSS放在页面的head里面,最靠前的地方;
3)CSS中,要指出图像的高宽;
4)尽量不要使用@import,来导入css文件。用link的方式为好;
CSS是现在网站网页布局必不可少的手段之一,而要用好CSS,不让CSS成为网页载入速度的瓶颈,需要掌握下面的原则。
1)避免CSS表达式;
2)把CSS放在页面的head里面,最靠前的地方;
3)CSS中,要指出图像的高宽;
4)尽量不要使用@import,来导入css文件。用link的方式为好;
Gzip是一种压缩格式,对于文本的压缩比率是很高的。
要利用Gzip压缩,需要服务器和客户端都支持gzip压缩才行。客户端浏览器先通知服务器,它可以接受gzip压缩格式的内容,然后服务器在返回内容的时候,会指出是压缩格式的内容,然后浏览器就会在接受到内容后做解压缩的动作,然后渲染。
比如本站的某个页面,html文件本身大小是35.4K,gzip压缩后的大小是9.7K。压缩比率很大,对于下载的时间大大缩短。
在Apache服务上,如果用的是Apache1.3,那么就要用到mod_gzip模块,如果用的是Apache2.x,那么就是用的mod_deflate模块。前者几乎已经没有什么人在用了,那么就说说后者。
今天要谈的是Expires数据头。现在的网页不再是十年前只有html文本,或者加上少量的图片的网页了。大量的装饰性图片,css文件,以及js的广泛应用,使每次打开一个页面,下载的文件都在几十个以上。
而其中有大量的文件是重复使用的,这时利用缓存就可以起到一个重要的提速作用。
首先出场的就是Expires数据头。
通常的写法是:
Expires: Thu,16 May 2013 12:00:00 GMT
记得最长不要超过1年。
这个用法指明了页面组件内容的过期日期,只要还在日期范围内,就直接使用缓存中的文件。这依赖于时钟同步以及不断的比较时间。
另一种替换做法是Max-Age
通常的写法是:
Cache-Control:max-age=31536000
同样也是一年的有效期。
当两种数据头都存在时,Max-Age有较大的优先权。
具体的实现方法,一般都是利用Apache的mod-expires模块,在.htaccess里面定义的。
通常用户在打开网站,访问页面的时候,10%到20%的时间是花在下载html文件,剩下的80%到90%的时间却是花在了下载该页面相关的内容组件上。
这里说的内容组件就是图片,JS文件,CSS文件,flash文件。
如果应用服务器(也就是放置网站程序或者html文件的web服务器)距离用户的距离近,那么对访问速度有益。
如果内容服务器,就是存放内容组件的web服务器距离用户近的话,对访问速度的改善更大。这个就是要用到CDN内容分发网络。
CDN是一组web服务器的集合,这些服务器放在全球的不同的位置,用来分发内容组件给用户。
当某用户访问某个内容组件时,CDN系统会检测用户的位置,然后从众多的服务器中,选择那个距离用户最少hops,或者反应最快的那个服务器来提供内容给该用户。
这样的结果就是,用户可以从最近,最快的CDN服务器获取内容,等待下载的时间大大缩短。
这是最常见的优化手段之一,页面优化(前端优化)同后台优化,数据库优化相比,改动少,效果大。而减少页面的http请求数,可以改善反应时间,快速显示页面。
一般改善的方向是,图像,图标的优化,以及js的优化。
图像,图标,按钮之类的装饰性,功能性的图像文件,可以使用下面这几种方法:
1)Image Maps
使用不方便,只适用于连续的图标。
2)CSS Sprites
这是现在最为常见的做法,把全站的图标都放在一个图像文件中,然后用css定位来显示其中的一小部分。这个灵活性大,容易设置。
3)Inline Images
这个是把单个图标文件,以base64编码方式直接嵌入到css文件中,或者直接在html里。现在很少网站使用了。
js文件和css文件,原则上,一个页面各只有一个。当然很多时候,有用到外站资源的时候,也不得不使用多个js文件,或者css文件。但尽量减少,合并,是对网站的速度是有益的。
这是问题也许不能简单的说否。
目前看来Google没有这个打算,而长远看来这不是不可能。
根据Google新的用户协议,TOS和隐私协议,Google有权把一个服务中的内容共享给另外一个服务,当然这不意味着会共享给第三方。
这样看来,以后,也许不要很久,Google Search就会添加你Google Drive上的内容到搜索结果中。
其实这是非常有用的服务。目前,David Yin在自己的工作电脑上,就安装了Google Desktop,这个服务已经于2011年9月停止下载,并不再更新了。虽然这样,我还是继续使用,因为它可以帮助我搜索我电脑上的文档,无论是doc文件,还是html,还是pdf,都可以迅速的定位。
两年来一直在用Dropbox,初始的免费空间是2G,随着推荐人数的增加,现在已经有13G的空间。
最近两个互联网巨头也分别推出了云端存储空间服务。
微软的skydrive,其实这次是重新推出,免费空间是7G,而作为老用户,我可以直接免费升级到25G的免费空间(原来的skydrive就是25G免费)。一般升级是,增加20GB for $10/month,50GB for $25/month或者100GB for $50/month。
Google出品的Google Drive,则是全新推出,5G免费,也可以升级到25GB for $2.49/month, 100GB for $4.99/month甚至于1TB for $49.99/month。
回头说说Dropbox的升级途径。
一个是推荐,免费用户每推荐一个新用户,可以增加500MB空间,最多可以到18GB。
付费用户每推荐一个新用户,可以增加1GB空间,最多32GB。
另一个就是付费,增加50GB for $9.99/month,100GB for $19.99/month。
速度上来说,估计还是Dropbox快。看看有没有评测的文章,比较下上传速度,下载速度和更新的速度。
昨天微软的Bing搜索站长中心的一篇文章Things you should avoid,提到了很多站长们可能会犯的错。
这也是DavidYin想在2012年第一篇Blog中要写的。新的一年,继续出发之前,先把网站清理,摘干净了,以清爽的面目出现在大家的面前。
好吧,那就以Duane Forrester的文章中段落标题为顺序,来谈谈这些SEO禁忌。
Cloaking
Cloaking是很常见的一种黑帽手段,也就是给真实用户和搜索引擎的蜘蛛返回不同的内容。
Link buying
购买链接也是要避免的,这里Duane提到如果发现购买链接的现象,简单的处理就是忽略它,不传递任何价值,(这个给我的感觉是就pagerank的意思了麽)如果严重的话,可能会对购买链接的网站做出处理。
Link farms
链接农场,在Duane看来,链接农场是比购买链接更为严重的问题。一群网站都链接向指定的网页,而没有实际价值。
Three-way linking
三向链接, 站A链接到站B,站B链接到站C,站C链接到站A。
Duplicating content
复制内容的问题,谈过很多次了。抄袭的,采用统稿的,来自第三方内容的都会有这个问题。
本站的重复内容页面,可以用rel=canonical属性来指定页面。
Like farms
这个算是社会化网站Facebook兴起后的新手段,但同链接农场相似,这可以称为like农场。通过操纵like来获得较高的排名。
使用Google Analytics都知道,它有一个Site Speed可以查看网站的速度。
现在Site Speed又添加许多新的技术指标。
在Site Speed报告中,增加了一个Technical选项,这个选项在Site Speed的三个标签(Explorer, Performance, Map Overlay)中都可以看到.
这些指标很有用,可以观察用户端对于你的网站的相应,因网络,浏览器等等不同而实际上该用户的页面下载情况。
包括:
Avg. Redirection Time - 在下载页面前花在重定向的时间,如果没有重定向,那么就是0
Avg. Domain Lookup Time - 用于DNS查询的时间
Avg. Server Connection Time - 连接你的网站服务器的时间
Avg. Server Response Time - 用户发出要求到服务器响应的时间
Avg. Page Download Time - 下载页面的时间
知道了这些情况,就可以有针对性的优化,以改善用户体验。
Yahoo Site Explorer已经关闭,而另一个Yahoo站长工具则继续提供服务,这就是Yahoo奇摩站长工具。
这个工具所提供的服务就是一个统计工具,类似于Google Analytics.
首先需要一个Yahoo帐号,然后就是启用该工具,接着添加网站,取得该网站的统计代码,把该统计代码添加到网站的所有页面的底部。
它的代码有两种,一种是js,另一种是给那些不能使用js的网站,纯html代码,是一个图片来着。
在添加网站时,可以选择显示统计,也可以选择不显示。当然DavidYin选的是不显示。
统计更新的速度较快,添加统计代码后,不到20分钟,就出现统计数据了。
截图中看到的搜寻分析管理tab就是指的Site Explorer,已经关闭了。而统计工具就是我们今天的主角。