2008年7月10日星期四

优化你博客载入速度的工具和技巧

一个网站的载入速度直接关系到读者是否愿意上该网站。例如google因为页面简单载入快,被我毫不犹豫的作为了浏览器的首页!

而像写写改改以前的博客模板,我用火狐,IE,开上十几分钟都打不开的,想给他文章发表个评论就像去磨房拉十几圈磨一样困难……我当时真连友链都不想跟他交换了。

如何优化博客的载入速度呢?这里要提到一个测试你的博客/网页 载入速度并提供优化建议的工具网站:Web Page Analyzer

是英文的,但是操作相对简单,所以大家应该都会用。

首先在如图的位置提交你的博客网址。

然后就得到你的博客网页诊断报告,现在都有英文翻译工具,我就不一一对应说这个报告都是什么意思了……

这个报告除了有宽带不同打开你的博客网页的载入时间外,最下面还有具体优化你的博客网页载入速度的建议。这里建议大家多用翻译工具看看,绿色的项目代表你的博客在该项目上很健康,红色表示非常危险。黄色表示要警惕了~大家可以适当根据建议优化自己的博客。

另外顺便提一下还有一款相对简单的博客载入速度测试工具网页:http://webwait.com/ 是应用ajax在你自己的浏览器上测试你的博客网页载入速度。

要达到上面提到的这个给出对你博客载入速度优化建议网站的要求,你要达到以下几点:


  • 你的每一个博客页面包括首页总体积都不要超过80kb的大小
  • 使用越少的JavaScripts脚本越好
  • 尽量减少你的博客页面上的图片
  • 尽量让你博客上的图片越小越好(在blogger上意味着设定你的图片为small小)
  • 尽可能的减少你的CSS样式设定代码
  • 减少HTTP请求的数量 (意思就是尽量把你的js脚本、图片等博客网页上要显示的元素都存储在一个服务器上。)

我对真正想要减少博客载入时间的朋友,提出以下几个技巧性建议来达到上面的要求:

第一,删除所有你博客上不真正需要的页面元素和JS脚本文件!
  
很多朋友的博客花里胡哨的有一堆功能或者加了一大堆页面元素,但是请想一下你的读 者有几个人真正会用会玩会欣赏你加的这么多东西?例如我博客以前的快速留言功能,点击打开就能直接在博客上留言了,但是有几个人用呢?何况博客本身就有留下评论的功能,何必还多此一举给博客加上多余的页面元素脚本呢?所以现在我的留言就是一个链接,调用博客本身的评论功能。

第二,减少你博客上的图片数量。

但是我真的不想再减我这个GG派博客的图片了,再减就影响读者使用其功能了……那么就减少存储这些图片的服务器吧!这里教大家一个小技巧,创建一篇新文章,然后把你原来分散存储的图片都存在这个文章页里,然后直接使用文章页里的这些图片的链接。最后把该文章页存为草稿即可~

第三,压缩你博客上的图片体积。

除了blogger本身的压缩,我们还可以借助一下其他的工具让你的博客图片更小,如这个在线图片压缩工具网站:http://tools.dynamicdrive.com/imageoptimizer/index.php可以把图片压缩为三种格式,gif,jpg,png。并且提供在线预览图片压缩后的效果。

第四,简化你的CSS代码!

说起来好像蛮简单的,怎么简化CSS代码撒?我其实也不熟,但是不熟不要紧撒,我这不又有好东西给大家用吗?在线简化CSS代码的网站!http://www.cssoptimiser.com/index.php
怎么用这个网站呢?
首先普及一下基础知识,切换到你博客布局项目的 修改HTML 项目,然后找到<b:skin> 和 </b:skin>之间的代码就是你的CSS代码了。
然后,把这里面的东西全部一剪贴然后粘贴到这个在线简化CSS代码的工具网站的最下面一个方框里,然后按如图红色按钮就可以了。
最后把处理完毕后的代码复制出来再粘贴回博客<b:skin> 和 </b:skin>之间即可。

这里再针对新手说明一下,处理代码前一定要备份原博客代码,万一不幸出错还能还原呢!如果你想保留原来blogger的默认CSS代码的直观,以便日后修改。就在处理代码的方框下红色按钮边的“Do not remove line breaks ”的方框那里打勾。这样代码的空格空行都还在,就是压缩体积也相应增大了一点。
另外如果你想保留在布局 字体和颜色项目上修改博客颜色和字体的功能,简化CSS代码时就要少剪贴Variable definitions下面的以<Variable开头的代码。只处理下面不以<Variable开头到结尾 </b:skin>之间的代码。

这样简化完成后再来看看你的博客的载入速度吧~~

8 评论:

禾草唐楷 说...

最近总是不能正常在blogspot上留言啊,博客速度最重要的可能是服务器的状态。blogspot的速度基本上没啥说的,就是一个快字,但用到其他外链是拖慢速度的原因。

GG 说...

恩,平均打开速度控制在10秒内我觉得就差不多了~~

Unknown 说...

还对之前我的那个模板念念不忘啊!
用Blogger做网站受很多制约的,比如图片存放空间,js存放空间,加上复杂的G-F-W作怪,不好把握。

不过舍得砍掉东西还是必要的,我重新制作模板后,砍掉好多东西,现在快多了

GG 说...

你现在的模板用那个工具测试比我还快咧……

Unknown 说...

纯属意外!

GG 说...

不过在火狐3.0里,我们博客都已打开过一次的情况下,用http://webwait.com 测试5次的平均成绩,我以3.31s领先你的 3.48s。

在IE7里,清空所有缓存,第一次打开的情况下,然后连开5次平均成绩是13.37s对16.70s。

不过为啥第一个测试工具,我比你慢很多咧……

Fly@虫子 说...

gg,记得你好像写过先加载正文再加载侧边栏的,杂做呀!

GG 说...

有这种方法吗?我完全不记得了咧……

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆