15招快速減少頁面載入時間

也許是因為越來越多的人用上了大號的水管，前端程式員差不多將網頁的最佳化工作都拋在腦後了。越來越多的 widget 和 javascript 代碼被加在網頁上，以致網頁越來越慢。瞬間的載入速度讓你感覺就像呼吸到一口新鮮空氣。程式員有時忽略了一些非常簡單的規則，導致降低了使用者體驗。頁面的載入速度決定使用者的情緒，尤其是電子商務網站。以下是一些它之所以這麼重要的原因。

快速的載入可以提升使用者體驗。使用者關注頁面的載入速度，或自覺或不自覺地。就好比一個球隊中的球員，只有當他表現差的時候才會引起關注。
載入迅速的網頁讓人感覺更清爽。網頁的載入速度有可能影響你的搜尋引擎排名。Google 已經明確表示他們很關注網頁的載入速度，並且會影響到 Adword 網頁的索引，所以也不會在排名中佔有太大的比重。
慢速則賠錢——載入速度過慢會趕走你的訪客。據估計每年電子商務網站都會因載入速度過慢，而損失11億到13億的收入。

載入龜速就算是最優秀的網頁設計也會被埋沒。這裡有一些很好的方法和工具可以協助你建立一個快速流暢的網站。

 

1. 一個基本的網頁分析器

可選的工具有很多，但我總是用“Web Page Analyzer”來檢查一般性的錯誤，並且根據載入速度來判斷網站的健康程度。這個分析工具可以顯示海量的資料，比如有多少指令碼代碼、檔案有多大等等可能影響到載入速度的因素。（這個工具很小氣，100K的圖片就警告了 - 譯者注）

2. Pingdom

Pingdom 這個網站可以幫你檢查損壞的圖片連結或連結，測試你的圖片和指令碼的載入速度。壞鏈和圖片是導致載入緩慢的主要原因。比如，我用這個分析了我的部落格 LifeDev 後，我找到了一個錯誤指令碼和2張失效的圖片。搞定了這些錯誤後，網站的載入速度快了一倍。

它還有另外一個功能，就是可以看到載入的每一個階段所用的時間。Pingdom 用不同的顏色表示載入過程的每一個階段，比如開始串連，載入的第一個位元組到最後一個位元組等，這樣你就可以知道時間究竟是浪費在了哪。

3. 把檔案放在本地

雖然這麼做會消耗一些頻寬，但以本地檔案替代照片管理服務（比如 flickr.com），可以省下瀏覽器從站外下載圖片的時間。本地檔案總是比外部檔案更快。

4. 設定圖片的長度和寬度

這是一個正確設定圖片長度和寬度的樣本：

<img src="images/mine.gif" border="0" alt="my image" width=”125″ height=”250″ />

圖片的長度和寬度設定與否簡直是天壤之別。若設定了長寬，瀏覽器會在圖片未完成下載前先載入其它內容，並且會在網頁預留出圖片的空間。否則瀏覽器會等待圖片下載完成，再去載入其餘的內容。

5. 慎用 widget

即使 widget（視窗小外掛程式，小韌體，小器件等等，什麼譯法都有，這裡保留英文 - 譯者注）非常酷而且有一些非同尋常的功能，但考慮到犧牲掉的載入速度，忘掉它也應該不難。要是你的網站因 widget 而掛掉的話，趕緊刪掉吧。

6. 使用靜態緩衝

關於緩衝可以有很多種解決方案。從本質上講，緩衝就是：把用動態語言（比如 PHP）寫出的頁面轉換成最終的靜態網頁。伺服器難以置信地擅長處理靜態頁面。把動態網頁面轉換成靜態頁面可以減輕伺服器負荷，並節省載入的時間。這裡有一些流行語言的緩衝教程可供參考：
        *  PHP
        *  Rails
        *  Perl
        *  Java
        *  ASP

7. 加速器

動態語言通常都有指令碼協助加速運行。如果你使用的是 PHP，這些指令碼也許有協助：APC, Zend cache, Xcache

8. Firebug

Firebug 是Firefox瀏覽器的一個擴充外掛程式，內嵌在瀏覽器內。Firebug 的一大功能就是分析網頁的每一方面，特別是載入速度。

9. 最佳化CSS

減小JS和CSS代碼可以大幅改善網頁的載入速度。可以使用一些線上服務比如“CSS clean”來最佳化你的CSS代碼，刪去一些不必要的東西比如：
        *  空格
        *  分行符號
        *  多餘的字元
        *  根據層級更多地壓縮代碼

10. 使用多個網域名稱

如果你的網頁上有很多東西，建議多綁定幾個網域名稱，比如 server.example.com，server2.example.com，等等。你同時只有有限的連結數到瀏覽器，如果綁定多個網域名稱（即使使用同一IP）就可以同時下載多個對象。

11. 精簡 Cookie

就像我們的日常飲食，想要儲存健康（載入迅速）就不要吃太多的餅乾（Cookie）。多餘的 Cookie 會拖慢每個網頁的載入速度。確保你的 Cookie 已經精簡到最小，同時也最佳化下 Cookie 的使用。

12. 為 Cookie 資源使用獨立的網域名稱

為了最佳化 Cookie 的使用，要為資源使用獨立的網域名稱。這對於使用頂級 Cookie 的人很有協助，當你從上面下載檔案的同時就會附上一個 Cookie 檔案，如果使用不同的網域名稱就可以避免這種情況。例如 Yahoo! 就使用 yimg.com 存放他們的資源。

13. 最佳化 Javascript

與最佳化 CSS（#9）的同理，JS代碼同樣需要最佳化。使用“Dean Edward’s packer”精簡JS代碼中冗餘的部分。

14. 合并JS檔案

通常來說，下載一堆小指令碼比下載一個大指令碼要慢得多。就是說，合并JS代碼可以提升網頁的載入速度。最簡單的方法就是開啟檔案複製粘貼代碼（很簡單吧）。不過，有時還可以更簡單一點：
        *   PHP
        *  Smarty (PHP 範本語言)
        *  Rails
        *  ASP

15. 使用內容分髮網絡

如果你的網站有較多的國際訪客的話，建議使用內容分髮網絡（CDN）。內容分髮網絡可以自動判斷訪客的位置並選擇伺服器位置。比如，一頭澳大利亞奶牛要通過網路聯絡中國的遠房親戚，那麼網速會卡得她奶都擠不出來。但如果使用內容分髮網絡，她會被自動登陸到架設在澳大利亞的伺服器（或較近的），這樣她就會很快發現她的親戚已經改產三聚氰胺了。

 

結論

有時新增功能會像花錢一樣容易，但根據曆史經驗，更少就是更多。更少的圖片、指令碼和 widget 意味著迅速的載入，而迅速的載入則意味這更高的使用者體驗。