dudo博客

最近忙里偷闲不仅把dudo博客的Banner更换了一下,还对页面进行了简单优化,性能明显提升不少,主要借助了Yahoo! YSlowGoogle Page Speed两款工具。最大的改进就是使用了CSS Spirit技术,虽然不是复杂的技术但是对博客优化作用却十分明显。所有的优化原理都来自我以前翻译的文章Yahoo!网站性能最佳体验的34条黄金守则分为内容服务器JavaScript和CSS图片、Coockie与移动应用一系列文章,在这里我也推荐所有对博客网站优化感兴趣的朋友能够再读读,可能有些地方翻译的不准确,但是理解应该不成问题。

一、博客优化利器:YSlow和Page Speed

YSlow和Page Speed是两款最实用的网站性能分析工具,两者都系出名门,前者来自Yahoo!,后者来自Google,两家最大的搜索引擎自然对网站页面优化有更多的话语权。关于YSlow和Page Speed的详细使用方法请分别参看文章你的网站为什么会慢?——用YSlow为你的网站提速Google网站性能优化工具Page Speed试用报告。不过两款工具都只能在Firefox浏览器上运行,而且都必须要在安装了Firebug插件之后才能使用。Yslow 与Friebug搭配

通过运行YSlow和Page Speed可以获得相应的分析结果,并且两者都给出了相应的处理方法。仔细阅读,并根据优化建议逐条修改即可。当然也有很多可能是普通博客做不到的,比如CDN分发等,恐怕只有大型网站才能有这个实力做得到。一般来说,WordPress首页可以优化到YSlow为Grade A,Page Speed分数90分以上。

二、使用CSS Sprite提升页面性能

CSS Sprite是一项前端开发技术,旨在减少文件请示次数和文件大小,这同时实际上还带来另一个好处,那就是预加载。说得好懂一点就是把你博客里能用到的背景、小图标全部整合在一张图片里,通过CSS中的background-position显示背景中图片不同部位来实现背景的切换。

通过查看dudo博客的各个图标、banner等你可能看到所有的东西其实都在一张图片上,除了页面背景因为要重复显示无法实现外。那么这样做究竟有什么好处呢?

1、减少HTTP请求次数。每下载一个小图标浏览器都会向服务器发布一次HTTP请求,每次请求都会花费一定的时间,而CSS Sprite则只需要一次HTTP请求即可;

2、减少图片文件大小。dudo博客就是一个很好的例子,虽然Spirit Image比所有图片加起来的尺寸都长都宽,但是文件大小却要比他们的总和还要小。

3、预加载,节省时间。由于所有的图片都在一个文件里出现,当你请求任何一个页面时所有用到的图标会一次下载并缓存,当你再查看其他页面时,浏览器将不会再重复下载而直接显示,这将节省大量时间。

关于WordPress博客的CSS Spirit优化方法,稍后我会出一篇专门介绍教程,请关注。

三、减少不必要的外部引用

这个也是很重要的,也是很多博客存在的问题。比如你的网站计数器、Feed订阅统计、投放的广告等都会占用浏览器请求时间。前几天我抱怨FeedSky统计数经常抽风,决定放弃时也主要出于其对博客性能的拖累。针对这个问题我建议:只使用一个统计网站、Feed订阅尽量只使用文字链接。这两个都非常耗费时间,因此计数功能的JS是不能被缓存的(缓存后计数功能失效)也不会被压缩,而且运算量较大,任何一次页面显示都会被重复执行。

过多广告代码投放也会引起同类的问题。不过类似Google Adsense使用的是<iframe>标签在一定程度上会规避这个问题,但是会带来另外一个问题:违反Web标准

博客优化是一个技巧性很强的东西,不过有了YSlow和Page Speed之后我们省了很多麻烦,即使你不是很懂这方面的东西,只要按照标亮的提示进行优化就可以了。不过你要想做到100%无瑕疵,那是不可能的。速度控要不得。



共有(74)条评论

凡客礼品卡 发表于 2011-8-25 at 08:59 #1楼

不错不错!!!
很好的WEB页面优化方案

[回复]


汽车贴膜 发表于 2011-10-25 at 12:08 #2楼

css spirit ?第一次听说,有点小白了。哈哈,百度一下去。另外,期待博主的css spirit教程哦。

[回复]


长春辽源专线 发表于 2011-11-15 at 08:25 #3楼

css 我们单位人好像就在用,回去问一下!

[回复]


李华 发表于 2011-11-16 at 22:48 #4楼

是吗 我也想要问问去

[回复]


血小板减少性紫癜 发表于 2011-11-17 at 15:54 #5楼

博客的速度优化对博客有很大的好处

[回复]


白城网站公司 发表于 2011-11-17 at 16:21 #6楼

文章中间的绿色条是怎么实现的

[回复]


淘宝丰胸产品排行榜 发表于 2011-11-20 at 15:34 #7楼

是两款最实用的网站性能分析工具,两者都系出名门,前者来自Yahoo!,后者来自Google,两家最大的搜索引擎自然对网站页面

[回复]


石家庄硬度计 发表于 2011-11-26 at 19:16 #8楼

三种方法都不错

[回复]


血小板减少的原因 发表于 2011-11-30 at 15:53 #9楼

使用了CSS Spirit技术,这个方法也很不错

[回复]


吉林百度推广 发表于 2011-12-07 at 16:10 #10楼

看了博主的文章真是受益匪浅,支持了!

[回复]


科士威 发表于 2011-12-09 at 14:13 #11楼

我喜欢那个利器www.tehuiwu.org

[回复]


宅客网 发表于 2011-12-12 at 00:05 #12楼

对这个好陌生啊!呵呵 学习一下

[回复]


长春甲醛 发表于 2011-12-12 at 18:19 #13楼

博主文章写的很精彩,支持一下!

[回复]


长春回收家具 发表于 2011-12-15 at 18:33 #14楼

博主的文章非常不错 进来支持一下!

[回复]


定制各种商务礼品 发表于 2011-12-21 at 22:18 #15楼

一米精品工艺厂,专业定制各种商务礼品,如各种精美U盘,本厂网址:www.gok100.com,联系QQ:1064046868,欢迎广大顾客朋友前来批发零售。

[回复]


顺德网站推广 发表于 2011-12-26 at 09:41 #16楼

我装了page speed,但是显示红色的三角怎么处理呢

[回复]


长春演艺策划 发表于 2011-12-29 at 19:22 #17楼

支持一下! 读了博主的文章 觉得非常不错

[回复]


老鹰主机 发表于 2012-1-01 at 08:26 #18楼

这个要收藏啊。

[回复]


哐哐哐论坛 发表于 2012-1-04 at 16:45 #19楼

还没到细化精简那一步,但早晚得做,收藏了,谢谢

[回复]


长春酒店式公寓 发表于 2012-1-08 at 10:08 #20楼

文章真不哦错,博主真有才!

[回复]


ewrwt 发表于 2012-2-08 at 22:24 #21楼

东莞市导胜自动化设备有限公司http://www.138auto.com于2007年创建,是一家集科研、开发、制造、销售于一体的自动化高新设备企业,公司主要生产全自动尼龙扎带机,自动扎带机,电缆剥线机,同轴电缆剥线机,同轴线剥线机,同轴线剥皮机,电脑剥线机,剥线机,自动剥线机,端子机,电脑切带机,全自动电脑切带机,切管机,全自动点胶机,拥有多台先进的数控钻、铣、冲、及其它光机电一体化数控成套加工设备,旨在快速跟踪国际新设备,不断创新;用自动化设备改造传统产业,大力开发自动一体化的数控成套加工设备并成长为一家专业生产各种点胶设备,电脑切带机设备和剥线机设备的公司。公司从业人员具备了丰富的行业经验,立足于自主创新,并通过吸取国外先进设备,根据市场需求不断提升产品结构性能,形成了自已特色的产品和服务。 我公司经多年的经验设备积累,已成长为点胶机方案解决商,全自动尼龙扎带机,自动扎带机,剥线机,自动裁切机供应商等。

[回复]


波浪理论 发表于 2012-2-14 at 21:44 #22楼

优化博客的速度非常非常重要,只要是用别人的服务器,就不敢保证速度很快,但有谁能保证你用户的网速就一定很快

[回复]


地方小吃 发表于 2012-3-15 at 11:30 #23楼

博主说的很好,很有道理

[回复]


24影视 发表于 2012-10-27 at 16:00 #24楼

@dudo, 原来是要在请求与域名查询之间作个取舍

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量