© / Posted in 知识如海 / July 13, 2009
昨天到今天，呵呵~~~优化了两天的这个博客~~因为觉得加载实在是不够快~~~不是主机问题，虽然主机在国外，速度相对国内要慢~~~但是，也不应该这样开始的时候卡一下。相对比，我同样在这个空间里的那个flatpress博客来说，速度真的慢~~
其实以前接触WordPress的时候也看过一些优化速度的文章，什么压缩啊、缓存啊、减少PHP代码啊、减少数据库查询啊……
也没怎么在意，不过前面那个主题的时候倒是试过减少PHP代码和数据库查询~~效果不是很大~~就没再想过优化~~这两天想找点事做，也就优化看看咯~~~
1.起因：
在浏览网络的时候，看到几个网页内容加载测试的网站，就拿自己的小博客试了试。不试不知道啊~~一试——靠~~首页，居然加载了38个对象……汗~~最让我不爽的是那个Jquery库，WordPress自带的有50多K~~太大了……就想着要整整了~~~先给出这几个网站吧~~呵呵~~
A.Pingdom Tools ：这个很多博客上都有介绍到，很有用的一个工具。能测试到你的页面的所有对象：HTML啊CSS啊JS啊图片啊都有，还有下载速度，还可以保存你测试的数据~~
B.linkwan : 国内的，做得比较好的一个网络测试网站了~~测试服务器很多。工具也不少，国内的国外的都有线路。不过可能是用的人多了吧，感觉有时候速度有点慢
C. Web Page Analyzer ：很老，很好的一个网友测试优化网站，能测试你网页的速度（居然还有用56K猫来测试的服务器），然后相对结果来给你优化建议。这个网站本来就提供网页优化服务，所以还不错
当然还有一个YSlow，就是那个YAHOO的Firefox插件。这个也是很多人用来测试改进的工具~~不过因为我的Firefox删了，所以懒得下来弄，毕竟在线的工具比较方便，呵呵~~
2.动手：
测试完了，也知道大概有什么地方可以改进的了，那么，就开始动手。
这次我就没去把那些类似这样<title><?php bloginfo(’name’); ?> <?php bloginfo(’description’);?></title>的PHP语句换成HTML来减少PHP调用了。因为上次这样做我没觉得有多大效果~~
A.首先对插件小优化一下，不用的插件删掉~~不过发现，其实我也没用多少插件，所以也就是禁用了lightbox还有那个mail to commenter。这两个用不着，就删掉了。
B.widget的优化。一些没多大用的小工具给去掉~~然后悲哀的发现，没什么可去的，因为我本身用的就不多。去掉两个小工具，再测试，恩，首页HTML文件减少到40K左右了~~
C.主题的优化。这是重头戏，因为页面都是主题生成的。针对测试结果，就是我的加载对象过多，导致HTML请求过多。减少这个是我的目标~~而主题的优化，最多的就是集中在header.php index.php sidebar.php single.php这四个文件。
a.合并CSS。现在用的这个主题CSS过多，因为它本身支持多个颜色选择。这个功能我不需要，就干掉！结果减少了不少代码和JS还有CSS。呵呵，当然中间也有出错的时候，慢慢调呗，反正是找事做。然后把剩下的，主题给分开的CSS合并。哈，我不懂网页编程。所以不知道咋合并。然后在网上搜索，又问了一个懂的同事。终于搞清楚了：可以直接把加载的CSS文件都放在一个文件里只加载一个就行，唯一要注意的就是CSS文件里有些图片路径，那个是需要修改的，要保证图片路径的正确（我还搞错了一次，图片都不显示，呵呵）。我是把CSS都放在了主要的style.css里面了~~呵呵~~然后把已经合并的，不需要了的css文件加载语句去掉~~
b.合并JS。 和CSS一样，把必须的JS文件都合并起来。这个倒没有什么注意的了。哦，对了，需要注意的是如果你想把插件的JS也合并到一个里面，要确定两点：一是这个插件你肯定一直用，不然合并进去了又不用这个插件的话也是浪费资源；二是插件的主PHP文件里，一般都有个函数自动往首页文件添加它所需要的JS和CSS。如果你把插件的JS和CSS也合并的话，那么要记得把这个函数注释掉或者删掉。不然重复加载了，更浪费资源，呵呵~~这个函数一般是add_action('wp_head', 'XXX');
上面几步是我昨天就做好了的，有效果，但是还是不非常明显。因为CSS和JS并不是很多，最多的是图片！对！主题里的那些小图片~~每个小图片占用一个HTML申请~~太浪费了~~解决办法是什么？网上到处都是：利用CSS separate技术，把所有的小图片合成一张图片，然后在CSS里调用的时候利用CSS separate技术定位图片位置！这个，对于一个像我这样不懂CSS的人，很难。所以，我今天就是在弄这个……
c.合并背景图片。这个真的很难，要有耐心，一点一点的去调试。因为很容易就让你的主题变得不好看——图片位置不对！至于怎么做？首先，肯定是要把图片合成一个啊，用PS？太难，不会，呵呵~~这有两个小工具，一个是下载的，一个是在线的。
http://www.csssprites.com/ 这个是在线的，还行的工具，我最后就是用的它
ImageManipulation 这个是软件，呵呵，第一次用它的时候没弄好。加上懒，有在线的用，就用在线的呗~~嘿嘿~~
其实还有一个貌似不错的软件，是个专门搞CSS的网站上的。呃，我看到那个网站的时候都差不多做好了，所以也就没下~~那个软件应该比我上面放出来这个好。有兴趣的话大家可以自己搜索一下。
工具有了，剩下就是做了。花了不少时间，把合成的图片上传上去，然后一个个去改CSS。不过还好，最后还是弄好了，哈哈~~
值得提到的一点是：css separete技术也是有缺点的，就是那些需要平铺的背景图片很难合成然后修改CSS达到原来的效果。对于我这样不懂CSS和网站设计的人来说是不可能完成的任务，所以我就把需要平铺的图片给忽略掉，继续留在那~~
然后再把最新留言插件里的头像给去掉，不要头像了，主页还是要保持尽量少的图片。
3.结果:
弄好了之后测试。哈~~对象减少到13个！！还剩下的对象没合在一起的就是网站统计的JS和CSS，这个我不想弄在一起了，指不定什么时候就不用了或者换了呢。还有我边栏那个cbox留言小工具，呵呵这个占了4个对象。不管了，这个东西我还是挺喜欢的~~呵呵~~
优化完了，测试发现效果很明显了，加载速度快了好多，国外的免费空间服务器，都能在2—5秒加载完！很不错了~~至于为什么有5秒？剩下的拖速度的原因就是外链的那几个工具了~~对我来说就是51la的统计和那个cbox。两个的加载速度有时候不敢恭维。 特别是51la的统计服务！我碰到过好多时候加载都非常慢了~~可能是用户多了导致服务器负载过大，撑不住了~~嗯~~考虑要不要换一个统计服务了~~
P.S.在编辑这篇文章的时候发现机子有点卡。然后发现是浏览器内存占用居然到了100M！有问题！我想应该是因为WordPress的自动保存。一直自动保存，然后导致浏览器内存一直在长~~这样的话，如果长时间编写一篇文章那不是很不爽？？前面有过关闭文章历史版本功能，然后修改了自动保存产生文章版本的东西，想不到特意保留的自带保存功能这么不爽。不行，我要去改一下~~哈哈~~优化一下~~我这个WordPress改了不少地方了~~都不敢升级~~怕从头来过~~呵呵~~我去也~~~