如何減少頁面載入時間
也許是因為越來越多的人用上了大號的水管，前端程式設計師差不多將網頁的優化工作都拋在腦後了。越來越多的 widget 和 javascript 程式碼被加在網頁上，以致網頁越來越慢。瞬間的載入速度讓你感覺就像呼吸到一口新鮮空氣。程式設計師有時忽略了一些非常簡單的規則，導致降低了使用者體驗。
頁面的載入速度決定使用者的情緒，尤其是電子商務網站。以下是一些它之所以這麼重要的原因。
快速的載入可以提升使用者體驗。使用者關注頁面的載入速度，或自覺或不自覺地。就好比一個球隊中的球員，只有當他表現差的時候才會引起關注。
載入迅速的網頁讓人感覺更清爽。網頁的載入速度有可能影響你的搜尋引擎排名。Google 已經明確表示他們很關注網頁的載入速度，並且會影響到 Adword 網頁的索引，所以也不會在排名中佔有太大的比重。
載入龜速就算是最優秀的網頁設計也會被埋沒。這裡有一些很好的方法和工具可以幫助你建立一個快速流暢的網站。
1. 一個基本的網頁分析器
可選的工具有很多，但我總是用“Web Page Analyzer”來檢查一般性的錯誤，並且根據載入速度來判斷網站的健康程度。這個分析工具可以顯示海量的資料，比如有多少指令碼程式碼、檔案有多大等等可能影響到載入速度的因素。（這個工具很小氣，100K的圖片就警告了 - 譯者注）
2. Pingdom
Pingdom這個網站可以幫你檢查損壞的圖片連結或連結，測試你的圖片和指令碼的載入速度。壞鏈和圖片是導致載入緩慢的主要原因。
它還有另外一個功能，就是可以看到載入的每一個階段所用的時間。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）寫出的頁面轉換成最終的靜態的網頁。伺服器難以置信地擅長處理靜態頁面。把動態頁面轉換成靜態頁面可以減輕伺服器負荷，並節省載入的時間。這裡有一些流行語言的快取教程可供參考：
7. 加速器
動態語言通常都有指令碼幫助加速執行。如果你使用的是 PHP，這些指令碼也許有幫助：APC,Zend cache,Xcache
8. Firebug
Firebug是火狐瀏覽器的一個擴充套件外掛，內嵌在瀏覽器內。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程式碼可以提升網頁的載入速度。最簡單的方法就是開啟檔案複製貼上程式碼（很簡單吧）。不過，有時還可以更簡單一點：
15. 使用內容分發網路
如果你的網站有較多的國際訪客的話，建議使用內容分發網路（CDN）。內容分發網路可以自動判斷訪客的位置並選擇伺服器位置。比如，一頭澳大利亞奶牛要通過網路聯絡中國的遠房親戚，那麼網速會卡得她奶都擠不出來。但如果使用內容分發網路，她會被自動登陸到架設在澳大利亞的伺服器（或較近的），這樣她就會很快發現她的親戚已經改產三聚氰胺了。
結論
有時新增功能會像花錢一樣容易，但根據歷史經驗，更少就是更多。更少的圖片、指令碼和 widget 意味著迅速的載入，而迅速的載入則意味這更高的使用者體驗。
轉載於:https://my.oschina.net/guyson/blog/117630