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 评论:

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