把所有的CSS文件放在一起;并避免使用@import的方式倒入CSS文件,因为这种方法强制浏览器在import的时候只能运行一个线程,而一般情况是两个线程一起上的。
对于我来说,我新建了一个styleall.css文件,把所有在”screen”情况下使用的CSS全部复制粘贴进去。使用Yslow中的“All CSS” 的工具,很容易就收集到了所有的CSS的信息——三个插件、Google和theme里用的。最终,从9个不同的CSS文件,我缩到了2个,一个给 ”screen”用,一个给”print”用。在修改了theme调用的CSS的方法后,我到每个插件的设置页面,禁止调用相应的CSS。如果插件不允许 修改的话,我就修改插件的源代码,搜索“.css”,然后删掉。
把所用的javascript合到一起,然后尽可能的放在页面的末尾,因为js的下载强制性的是单线程,放在页面的尾部,给读者印象是页面已经完全下载好了,而实际上有些功能的js还在下载中。
对于我,因为所有的js都不没有使用document.write,可以放心大胆的合并并放到页面的尾部。我使用Yslow中的“All JS Minified”工具,操作很快:所有插件使用的合并到一个min.js在插件的根目录;所有主题使用的合并在theme的根目录;我没有合并来自Google的javascript到前面的两个汇总文件中,因为根据我的理解,Google会根据浏览器的不同把不同的js推送出来。
<script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
<script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.form.js?ver=2.02'></script>
理论上我要把上面quene的部分改成直接连接到文件的模式,因为“don’t use querystring – breaks proxy caching”;但这步涉及修改wordpress的核心代码了,没敢。合并js之后,记得到相应的地方禁止原来的javascript的调用,然后把 调用合成js的代码放在footer.php或类似的地方,比如我的
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Min.js"></script>
<script type="text/javascript" src="http://en.dogeno.us/wp-content/plugins/Min.js"></script:http://en.dogeno.us/wp-content/plugins/Min.js"></script>
使用sprites工具,合并背景图片,使用CSS的方法调用。
对于我,直接跳过,因为站点没用多少背景图片;而且这步的修改很烦,“pain in the a#%!”。
使用Yslow中的“All Smush.It”工具,压缩图片。
这里的操作很简单,直接下载在Smush.it上生成的文件,下载替换即可。
在博客或者网页服务器的根目录下修改.htaccess文件,实现图片的cache以及gzip传送。
# Add a far future Expires header
<FilesMatch "\.(png|gif|jpg|js|css|ico)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
Header set ETag ""
</FilesMatch>
# Compress html, XML, css and js
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript
application/javascript
</IfModule>