换博客主题与主题优化

2011-12-09 • 生活记事,WEB事儿 • by Nornor Chen

换主题记:

    上周回家以后电脑就送去维修,今天回到学校趁机再次折腾博客。本次主题就没有重头开始写了,直接在之前制作的typecho主题xmTheme v1.0上面操刀,将界面变成纯色小清新。

    界面方面和之前的主题基本一致,但是这次css方面跟着潮流学习掺杂了一点响应式WEB的技术,测试方法可以将你的浏览器窗口调小或者使用手机浏览器进行察看。如无意外你会看到效果如图:

    边栏直接隐藏,搜索框框也不见了,只剩下导航,并且用手机浏览器可以看到如下效果:

主题WP7截图

(截图来自:Windows Phone Internet Explorer)

主题优化篇:

 1.合并图片减少HTTP请求

    之前分享的typecho主题xmTheme v1.0里面文章基本信息的图片

文章基本信息

    这里的四张图片都是独立存在的,就是说每次访问博客便会向服务器请求这四张图片,这个在css sprite横行的时代,这样做是不提倡的,也是yslow不喜欢的做法。

    改善的方法就是将他们合并成一张图片,通过修改样式表用CSS SPRITE实现,这样以后博客只需要请求一次图片即可达到上述效果。(css sprite是什么?)

 

 2.巧用htaccess缓存css、js、favicon等

现在大部分的linux主机都支持定义.htaccess,开启之前确认服务器是否支持mod_expires.c,设置方法请参考:

修改.htaccess,提升你的网站加载速度

GOOGLE:htaccess 缓存

 

后记:

搞到三更半夜的精神确实可敬佩,这周项目最后部署和调试,熬夜是必须的。

上面的优化昨晚以后用yslow将新主题和上次的typecho主题xmTheme v1.0进行yslow对比,成果是必须的。

旧主题yslow评分

xmTheme v1.0的yslow跑分

新主题yslow评分

新主题的yslow跑分

从C升到B那可是质的飞跃,关于更多的优化方案还有待以后继续探讨以及与各位交流。

« jQuery仿淘宝CheckBox选中效果

HTML5游戏-Canvas Rider »