昨天steve的 講座涉及了一個我從沒考慮的領(lǐng)域，在沒法優(yōu)化后臺服務(wù)器的時候，如何合理的放置網(wǎng)頁的元件讓她們在瀏覽器里顯示得更加快。這里，我就根據(jù)他的建議，把我對 這博客的更新的過程記錄一下。如果想了解更多的信息，可以看他的主頁，那里有不少他做的講座的視頻和講稿，還可以看到他在斯坦福開的課的視頻……再進一步就是去讀他的兩本書了《high performance web sites: essential knowledge for front-end engineers》《even faster web sites: performance best practices for web developers》。

優(yōu)化的過程，實際上就是根據(jù)yslow這個firebug的插件的提示“升級”的過程（yslow可用于不同大小的站點，我選擇了“small site or blog”這個選項）。為什么要優(yōu)化？功利的講，是讓你的頁面在搜索引擎里表現(xiàn)更好；但更重要的是，省下這1-2秒的時間，能讓你的讀者更加舒暢地瀏覽你的站點。

我做了一下的幾步：

把所有的css文件放在一起；并避免使用@import的方式倒入css文件，因為這種方法強制瀏覽器在import的時候只能運行一個線程，而一般情況是兩個線程一起上的。
對于我來說，我新建了一個styleall.css文件，把所有在”screen”情況下使用的css全部復(fù)制粘貼進去。使用yslow中的“all css” 的工具，很容易就收集到了所有的css的信息——三個插件、google和theme里用的。最終，從9個不同的css文件，我縮到了2個，一個給 ”screen”用，一個給”print”用。在修改了theme調(diào)用的css的方法后，我到每個插件的設(shè)置頁面，禁止調(diào)用相應(yīng)的css。如果插件不允許 修改的話，我就修改插件的源代碼，搜索“.css”，然后刪掉。
把所用的javascript合到一起，然后盡可能的放在頁面的末尾，因為js的下載強制性的是單線程，放在頁面的尾部，給讀者印象是頁面已經(jīng)完全下載好了，而實際上有些功能的js還在下載中。
對于我，因為所有的js都不沒有使用document.write，可以放心大膽的合并并放到頁面的尾部。我使用yslow中的“all js minified”工具，操作很快：所有插件使用的合并到一個min.js在插件的根目錄；所有主題使用的合并在theme的根目錄；我沒有合并來自google的javascript到前面的兩個匯總文件中，因為根據(jù)我的理解，google會根據(jù)瀏覽器的不同把不同的js推送出來。

理論上我要把上面quene的部分改成直接連接到文件的模式，因為“don’t use querystring – breaks proxy caching”；但這步涉及修改wordpress的核心代碼了，沒敢。合并js之后，記得到相應(yīng)的地方禁止原來的javascript的調(diào)用，然后把 調(diào)用合成js的代碼放在footer.php或類似的地方，比如我的

使用sprites工具，合并背景圖片，使用css的方法調(diào)用。
對于我，直接跳過，因為站點沒用多少背景圖片；而且這步的修改很煩，“pain in the a#%!”。
使用yslow中的“all smush.it”工具，壓縮圖片。
這里的操作很簡單，直接下載在smush.it上生成的文件，下載替換即可。
在博客或者網(wǎng)頁服務(wù)器的根目錄下修改.htaccess文件，實現(xiàn)圖片的cache以及gzip傳送。
# add a far future expires header

expiresactive on
expiresdefault "access plus 10 years"
header set etag ""

# compress html, xml, css and js

addoutputfilterbytype deflate text/html text/plain text/xml text/css application/x-javascript
application/javascript

對于bluehost的服務(wù)器來說，貌似deflate是不開的，我就沒招了。

[li]預(yù)先下載大的背景文件。
我沒有做這一步，因為沒有大的背景文件。steve的本意是“big sprite.png blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用兩個線程下載的優(yōu)勢，在空擋把大文件先下載下來。 [/li]

上面的操作，讓這個站點yslow評分從f升到了b，花費時間2個小時；貌似顯示快了，你覺得呢？