2010-03
7

要并行还是要cookieless

By xrspook @ 19:23:51 归类于: 扮IT

优化wp,一个困扰我一个多星期的话题。

其中有一个方法就是用cookieless的域名来放置静态的内容。于是就有了个叫“图床”的词语出现,图床啥意思?请看Kangzj解释。图床是建立在一个cookieless域名下的东西,顾名思义是用来放“图”的,但也用来放.css,.js等静态文件,由于域名是cookieless的,所以在传递过程中无需做无谓的小饼干来往,因此加快速度。如何为网站(尤指wp搭建的窝)建立cookieless的图床呢?详见:

cookieless真能提速,尤其是反应速度。但blog里全部图都放到某个cookieless的地方就是最快?不才的xrspook在折腾cookieless的时候经常借助http://www.webpagetest.org/测试X领地,不经意发现了个天知地知但xrspook不曾知道的东西——浏览器的并行下载!减少DNS查询是网站提速的又一重点,多个hostname就要求进行多次DNS查询,但如果不多,就2个呢?呵呵,这就是我要说的重点。

话说在建立了cookieless域名后,xrspook把所有静态图片都搬到了那里,毕竟那只是ftp的无聊操作而已。但接下来要把所有的图片都重新更改链接可不是开玩笑的,很懒的xrspook就只把一些图片的网址改了过来,先看看效果,惊讶地让xrspook首次看到了不同hostname的并行下载!很是厉害,普通的测速图里进度条都是成阶梯式分布的,上一个要进行到一定程度下一个才开始,所以,如果你的页面有很多很多的图片等非单纯文字的东西,那就杯具了,鉴于X领地模板的“美观性”,这里有不少的图片(简称CSSIMG)。(咋的?你没看到?圆角的都是图片,谁叫浏览器还不能广泛接纳CSS3啊,还有很多按钮底图什么的)而由于个人兴趣的需要,在sidebar加入了个叫做“鬼在这里”的文本widget(简称LOGO),不用多说,里面的也是静态图片。懒人我最开始的时候只是把LOGO的链接改过来了,CSSIMG的没改,做了测速,发现了并行法则,(见下,左图)。

并行很牛,但我的CSSIMG还没改呢,兴冲冲地把所有CSSIMG的网址也都改了,期待完美减少cookie的历史时刻。好不容易借着Firefox的页面高亮查找把CSSIMG都改好了,做个测速。(见上,右图)

(点击图片得详细测速报告)

我的天!图片半cookieless(即并非所有静态图片都放在cookieless域名)的时候,载入时间是4.654s,而全cookieless的时候载入时间却需要5.425s,差了接近0.8s,但后者的start rander(这个是什么?就是Firefox出现“载入中”或者Google Chrome“进度条逆时针转动”的时间)比前者快0.107s,归根到底就是First Byte那里快出的0.107s,是不是不传递某些小饼干的优势呢?到底是什么造成这个严重的0.8s差距呢?聪明的你或许发现了,在测速的前期,两者差距很小,但后期大量(接近15个)静态图片传递时,优势就很明显呢。前一个的阶梯“很陡”,后一个的阶梯“很缓”,在载入的这个问题上,我喜欢阶梯很陡,垂直的更好。显然,图片半cookieless时做出的hostname并行下载优势在X领地强于全cookieless的无小饼干交易。

事实胜于雄辩!

当Google和Yahoo的测速软件都告诉我们cookieless domain很好的时候,我们要相信,但不能尽信,毕竟问题得综合考虑。机器能告诉我们单项的完美解决办法,但适合自己的才是最完美的,而最适合的只有自己衡量后才能得出。

最后,X领地的提速效果是“并行>cookieless”,于是我选择把静态图片做成半静态的。

各位玩wp的朋友,什么形式的提速才最适合你们呢?实战一下吧!

PS小贴士:

在做cookieless图床的时候你或许还需要用到以下链接:

2010-03
3

提速

By xrspook @ 21:40:54 归类于: 烂日记

认识了个网站http://www.webpagetest.org/是用来测试网页的,然后就和Matrix一起纠结到底怎么改进才能让网站表现得更好。首先在lightpad的服务器下尝试compress,压缩啊,把.css,.js,.html等东西压缩,毋庸置疑,肯定会提高网站的载入速度,但我们的测试结果居然是,由于我的.css和.js过于庞大,导致cpu在启动的时候使用量加大(在压缩),最终使得反应时间加长,其结果是用户看到“载入中”(Firefox),“进度逆时针转”(Google Chrome)的时间增长,而在刷新过程中,即显示标题到网页完全载入时间很短,首次载入大概只需2秒或一下,刷新可能在瞬间就能完成载入过程。

网站的整体效果好,但反应时间过长会让国人有个不好的念头——这网站能不能开啊,是不是被按了啊,咋的没反应。连我自己都有这种感觉。

后来Matrix把设置修改了,把start rander提早了,提早到3.5s内,这样的结果就是反应时间提早,但后面稳定的时间稍微加长,对比发现其实也长不了哪里去,就多了那么0.05s,不是变态的人(比如我自己)是感觉不出来的,因为网络忙闲状态下的区别都远远超过这个等待时间。

令人欣慰的是经过gzip和cache处理后,主页的Page Speed分数从原来的80一下子提升到86,可谓是一大步啊!

改进真是个无止境的过程!!!

最后要感谢defu2009lighttpd配置gzip和cache给予的技术支持!!!

2010-03
2

费劲

By xrspook @ 21:58:14 归类于: 烂日记

费了好大的劲才把WordPress从2.9.1升到了2.9.2,首先,单机xampp试验一下,超快,然后就在FTP上实施,等到我都顶不顺,洗澡去了。首先是把wp-content上的宝贝备份下来,所有主题和插件的修改都在那里了。然后把wp-admin和wp-includes删掉,最后把新版wp除wp-content以外的部分全部内容粘贴+覆盖,真的等到天荒地老啊!因为就基本上等于把整一个wp卸了重装。还有下次的话,我绝对会考虑把那些要上传FTP的文件先压缩然后让管理员放到上面。10MB的东西可以缩小到3-4MB啊,朋友!所以这也是Google Page Speed建议我把网站的css,js文件压缩的原因。有试过Word或Excel压缩嘛?基本上能压掉90%(.rar,.zip不知道,很久不用这格式了)!

等得我死去活来,干脆回宿舍用电线折腾晾衫杆,弄出妈说的那种不会吹到一起且不会被大风吹掉的玩意儿。简单来说就是在杆上绕电线,非常简单,你喜欢怎么绕就怎么绕,没有固定规矩,唯一的要求就是弄出来挂衣架的圈圈不能太小,我个人的经验是起码要预留2只手指的宽度,否则衣架晾得那个郁闷啊。不是读文科的,艺术就更烂了,所以,如果不美观请不要揍我。下面就是xrspook折腾了1个小时的“杰作”(手机照片,质量不好):

远看是这样,远看,特别是你有500度以上近视,又不戴眼睛看,视觉效果还可以,至于是否能真的实现妈所说的功能,那就要靠时间和老天爷去考验了。

show个近镜。我知道,很丑,原谅我吧,我只是个工科生。

精神上费劲,肉体上费劲,飘荡ing…

2010-03
1

KEEP GOING

By xrspook @ 21:32:31 归类于: 烂日记

挺郁闷的一天,居然遇上了服务器有问题,什么网站啊、V啊、S啊全部开不了,连P都不通。至于到底发生了什么事,请看Matrix的记录,万幸的是老大今天没有被外派,所以很快就解决问题了。居然是服务器上级线路出现问题,那么偶然的大问题都能遇上,神了。

实在觉得在Google Webmaster Tools下Site performance显示的载入速度无法忍受,这地方就真的那么慢吗?于是就狠心下了个Google Page Speed看个究竟。Page Speed是个Firefox且依赖于Firebug的插件。至于怎么用,请看它官方的Using Page Speed

N多的叹号,N多的三角,耐克也不少(叹号——大问题;三角——中问题;耐克——小问题)。有些东西我是可以改进的,比如说经过它的提点,我把“鬼在这里”的图片从.jpg改为它推荐并帮我生成的.jpeg,大小从原先的28KB,缩小到3KB,这里就大大提升了速度。它还建议我把一些图片和固定的CSS等的做关于cookie的处理,没看懂到底要怎么整,但这也是可执行的。但有些比如说改造.css和javascript使之更简洁完美,显然,这是xrspook暂时无能为力的。很多.js是wp自带,有些则来自插件,如果我精通js的话早就自己写插件了:P

没有系统学习过HTML,不知道网页载入的运作到底是怎么个弄法,Page Speed就从很专业的角度从告诉我们的网页哪里有问题开始,教我们怎么改,为什么要这般改。G大神果然是G大神,时刻闪耀着智慧的光芒。

到处都在流行外挂的.css和.js,为什么呢?外挂了怎么引用才能节省载入时间呢?或许只要调个顺序速度就能提升。我们慢有时不一定是我们技术不够,反而可能是技术和花俏太多了,但多花俏就不等于一定会降低速度,重要的是如何使复杂的东西编排得合理。什么叫做合理?就是符合规矩,你或许不知道,但世界上就有很多成文的不成文的规矩,科学的世界尤为如此,在付之操作之前就得定义,对未定义或违反定义的东西操作是愚蠢的。

KEEP GOING,还有很多要学,还有很多值得折腾的东西等着我呢,呵呵。

2010-02
28

完善sitemap

By xrspook @ 20:06:05 归类于: 烂日记

折腾是让人不断前进的一个有趣形式。

这两天都在折腾wp,首先,根据fisio的方法弄出了个简单且实用的留言本。地球人都知道插件用得越多网站速度越慢,而wp又自带了强大的前台和后台回复功能,而且还有防垃圾评论的官方自带插件,为何不利用一下呢?!本以为很简单的事情,但弄了半天才发现自己用的lightword V1.9.6模板有bug,页面最多只能有一条评论,幸好,作者Andrei Luca已经修复,但不能做简单的模板自动更新,否则自己的修改成果就全部付诸东流了。很简单的修改却成了折磨人的工作,真够郁闷的。

人肉sitemap在设计的时候就打算不设sidebar,但由于content-body和sidebar是利用背景图片效果分隔的,于是几天都没有对它处理。但今天却偶然发现在新版的lightword V1.9.9中已经出现了个叫做single-page-template.php的东西,它是个新的页面模板,在作者更新的readme中并未提到,显然是作者的一个新尝试,注释是这样的“Template Name: No sidebar (works only with original layout)”后面的“only with original layout”我没看懂,难道是只适用于语窄型的模板?(lightword有窄型811px和宽型977px两种固定宽度,在宽型的基础上还有两栏和三栏的形式供选择,我用的是宽型三栏)在普通日志和文章页面需要sidebar,但在sitemap,如果只有一个大空白就更好了,毕竟sidebar的某些内容不太适合放在sitemap里,比如说日历和不是全部显示的标签云。算是走了狗屎运,在研究新主题的时候居然被我发现这好东西。不过呢,有模板,仍是不能直接使用的,修改了一下宽版的背景图片才算真的合用。研究wp是一个PS+PHP无间协作的过程,前后台都兼顾,从一开始看到白屏就害怕到现在不慌不忙地接受事实继续改进。

下面就是折腾结果,新的人肉sitemap,加入了完整标签云、最热文章、最新文章、随机文章,呵呵想不到自己最热的文章居然是在BlogBus里使用的about me。左图是正常效果,右图用了Web Developer的div标示功能,适合网页爱好者。

是折腾让我我快乐着。

如果说sitemap还有什么需要改进的,肯定就是载入速度!某位高手能研究个Ajax的东东让日志不要一开始就全部载入,点开月结的时候才部分载入那这个sitemap就真完美了。

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress