加速，加速，再加速：來自Google的網站加速技巧大全
譯文【51CTO譯文精選】困擾許多網站所有者很久的一個問題是網站訪問速度總是那么慢。想購買獨立帶寬，預算不允許，想購買CDN加速，價格又太貴。那有沒有經濟實惠的解決辦法呢？從目前的大環境來分析，我們也只有通過技術手段來解決這個問題了。
對Web開發有著深刻理解的著名搜索引擎廠商Google前段時間發布了一款Firefox /Firebug插件Page Speed（為什么是Firefox 而不是Chrome？），并已開源，網絡管理員和Web開發人員使用這個插件對Web頁面的性能進行評估，并提供改善性能的有益建議。并于今日呼吁大家共同努力，一起為互聯網加速，可不是提什么空口號，Google已經將其研究結果和數據共享了出來，并提供了大量的網站加速教程，本文就對這些教程加以整理，與諸位共勉。（近來，Google對網站加速的重視程度越來越高，詳情見51CTO之前的頭條谷歌啟動Web加速計劃 擬改進TCP/IP和HTTP協議，以及Google研究小組有關搜索速度的最新報告）
css：每個聲明只使用一次
要想讓你的網站速度更快，其中重要的一條就是發送到瀏覽器的客戶端代碼要盡可能小，在優化css文件時，一個重要的原則就是每個聲明只使用一次。這樣就可以嚴格使用選擇器組合。
例如，你可以將這兩個規則
- h1 { color: black; }
- p { color: black;
合并成一個規則
- h1, p { color: black; }
這個例子是最簡單的了，實際開發中的情況要復雜得多，根據我個人的開發經驗，每個聲明只使用一次后可以將css文件的大小降低20%-24%。下面再看一個復雜一點的例子：
- h1, h2, h3 { font-weight: normal; }
- a strong { font-weight: normal !important; }
- strong { font-style: italic; font-weight: normal; }
- #nav { font-style: italic; }
- .note { font-style: italic; }
根據每個聲明只使用一次的原則，將其縮減為
- h1, h2, h3, strong { font-weight: normal; }
- a strong { font-weight: normal !important; }
- strong, #nav, .note { font-style: italic; }
注意!important聲明可以與眾不同。
在應用這個方法時有幾點需要牢記于心：
◆首先，太長的選擇器可能致使這個方法無效，重復選擇器如html body table tbody tr td p span.example不能減少文件尺寸大小，實際上，每個聲明只使用一次可能意味著選擇器的數量會上升，甚至可能導致css文件更大，使用緊湊的選擇器是更有幫助的，并且可以提升樣式表的可讀性。
◆第二，小心css規則，當一個用戶代理不能解析選擇器時，必須忽略聲明，當你遇到這種情況時，只需要修改一下規則，讓其可以使用多次即可。
◆第三，也是最重要的一點，如果你對樣式表進行了排序，這個原則會改變你的排序，但這個順序可以由瀏覽器來決定，如果你使用這種方法運行出了問題，最好的解決辦法就是產生一個異常，并在出現問題的地方讓聲明使用多次就可以了。
在使用一個聲明只使用一次的方法維護樣式表時要格外小心，可以通過優秀的編輯器來跟蹤變化（如顯示變化行），然后在需要的地方插入聲明，這種做法需要合并到工作流中。其實一個有效的方法是使用縮進排版，這樣就很容易發現重復的聲明的了。
使用gzip壓縮頁面
Gzip壓縮需要Web服務器的支持，在沒有gzip壓縮的情況下，Web服務器直接把html頁面發送給瀏覽器，而支持gzip的Web服務器將把html壓縮后再發給瀏覽器，支持gzip的瀏覽器再在本地進行解壓和解碼，并顯示出來。Gizp會將css文件，js文件，html文件中那些重復的字符串、標簽、空格和樣式定義進行壓縮。我們還是舉一個例子加以說明。
下面的代碼未壓縮前69字節，壓縮后85字節。
- < h1>One< /h1>
- < h2>Two< /h2>
- < h3>Three< /h3>
- < h4>Four< /h4>
- < h5>Five< /h5>
我們將標題標簽替換成div標簽，源代碼大小增加了10字節，變成了79字節，但經過壓縮后只有66字節。
- < div>One< /div>
- < div>Two< /div>
- < div>Three< /div>
- < div>Four< /div>
- < div>Five< /div>
HTTP緩存
如果你正確設置了HTTP緩存報頭，不但Web頁面載入速度更快了，而且Web服務器的負荷也減少了，是一個雙贏的舉措。
緩存也就是資源的本地副本，因為很多資源都不會頻繁更新，這時瀏覽器就可以直接從本地獲取資源，不用到服務器去取，節省了連接時間和資源下載時間，使用HTTP緩存真正起關鍵作用的是HTTP緩存報頭，這個報頭指定了資源的有效時間和最后修改時間。
http協議有兩種方法定義資源的有效時間：Expires和Cache-Control: max-age報頭。Expires報頭指定資源的過期日期，而max-age指定的是當資源下載到本地后多長時間有效。實際上它們要表達的最終含義是一致的。建議將資源的有效日期指定為1個月，長一點的話可以指定為1年。這兩個報頭一般只需要設置一個即可，如果同時進行了設置，那么max-age的優先級比Expires要高一些。如果你的資源比這個設定期限更新得要頻繁一些，那么你可以采取對資源重新命名的方法，通常的做法是在URL中給資源加上版本號，當然這是引用資源的html頁面也得做對應的修改。
當本地資源是有效狀態時，瀏覽器有兩個選擇，其一是全部重新下載所有資源，其二是僅下載有變化的資源，為了讓瀏覽器只下載有變化的資源，我們需要在GET請求中加上條件，http協議給了我們兩個選項：Last-Modified和ETag報頭。
Last-Modified報頭指資源的最后修改時間，ETag報頭是每個資源不同版本的唯一身份識別號，我們推薦你使用Last-Modified報頭，因為日期如果足夠早，瀏覽器可以跳過請求全部資源的。下面是兩個測試頁。
在第二次載入頁面時，可以再次點擊鏈接，或者在地址欄中再按一次回車，如果點擊刷新按鈕，如果資源還在緩存中的話，會強制瀏覽器重新使用附條件的GET請求去獲取資源。
為了更清晰地看到這個完整過程，可以使用HttpWatch工具，它可以查看http報頭。如果使用Apache的話，可以參考mod_expires模塊的資料。
#p#
使用Page Speed提升網站性能
Page Speed是由Google發布了一款開源Firefox 插件，它可以評估Web頁面的性能問題，并能夠給出合理的優化建議，同時它也可以將資源變得更小。
◆圖片壓縮
圖片文件中通常都包含了一些額外的信息，如JPEG圖片包括創建圖片所用工具的信息，PNG圖片通過創新編碼可以縮小文件大小，這些轉換都是無損的，壓縮后的圖片和未壓縮的圖片看起都是一樣的，但占用的字節數卻少了，
Page Speed使用優化圖像功能嘗試為頁面中的所有圖片進行無損壓縮，如果成功的話，就顯示壓縮后的版本，為了使用圖片的最低版本，在Page Speed面板中點擊鏈接到壓縮版本，保存，使用它代替原始圖片。
◆削減JavaScript
移除大型JavaScript文件中的注釋和空格可以大幅度減少文件的尺寸，但功能卻無絲毫損傷。Page Speed提供了削減JavaScript的功能，削減成功后Page Speed會顯示一個到該文件的鏈接，如果要使用削減后的文件，點擊那個鏈接，保存文件，然后到html頁面中重新引用這個更小的JavaScript文件。
但這樣做有一個問題，削減后的JavaScript文件的移動性就降低了，如果你經常更新的話，建議你使用另一個削減命令行工具JSMIN。
◆移除不用的css
移除css文件沒有使用到的規則將有助于減少css文件的大小，因為瀏覽器在瀏覽Web頁面時往往會將css文件下載到本地，這樣就可以減少發送到瀏覽器的信息量，從而加速頁面反應速度，但值得注意的是，有些外部css文件是由多個Web頁面引用的，在移除時要特別小心。
Page Speed提供了移除不同的css功能，它可以告訴你那些css規則是沒有被使用的。
除了上面提到的這三個功能外，Page Speed還有更多的功能等待你去發掘。
減少瀏覽器reflow
Reflow是瀏覽器為重新渲染文檔或文檔中的一部分，重新計算文檔元素的位置和幾何大小的統稱，因為reflow在瀏覽器中是一個用戶攔截操作，這對于開發人員理解如何提升reflow時間和不同文檔屬性（DOM深度、css規則效率、不同類型的樣式變化）對reflow時間的影響。有時reflow一個元素可能需要reflow文檔中的所有元素，以及跟著它的所有元素。
有很多中用戶行為和DHTML變化可以觸發reflow，如改變窗口大小、使用包含計算樣式的JavaScript函數、從DOM中添加或移除元素以及改變某個元素的類別都可以觸發reflow，值得注意的是有些行為可能導致reflow的時間比你想象中的要多。來看一張圖。
圖- 1 主流瀏覽器reflow時間對比
從上圖可以看出不是JavaScript中任何樣式的變化都會觸發reflow，還可以看出瀏覽器版本越高reflow時間更好了。
在Google，我們對我們的頁面進行了大量的測試，最終我們認為要往頁面中添加UI元素時最值得考慮的因素就是reflow時間了。下面是我們整理的可以幫助減少reflow時間的方法：
◆減少不必要的DOM深度，在DOM樹上任意一層發生的變化都會影響到DOM樹的所有層，當然這在reflow時花的時間肯定比較多了。
◆縮小css規則，移除不用的css規則。
◆如果你使用更復雜的演示變化，如動畫，那么你最好使用絕對位置或將位置固定下來。
◆避免不必要的復雜的css選擇器，特別是衍生選擇器，它需要更多的CPU時間處理選擇器匹配。
#p#
優化JavaScript代碼
客戶端代碼可以讓你的應用程序動起來變得更有活力，但這些代碼可能使瀏覽器變得更低效，不同的客戶端性能也不一樣，這里我們討論幾個優化JavaScript的技巧。
◆字符串的使用
在IE6和IE7中因字符串級聯導致的主要問題是垃圾回收性能，雖然這些問題在IE8中已經得到解決，但如果你的用戶大部分仍然在使用IE或IE7，你就得格外注意這個問題了。看一個例子先：
- var veryLongMessage =
- 'This is a long string that due to our strict line length limit of' +
- maxCharsPerLine +
- ' characters per line must be wrapped. ' +
- percentWhoDislike +
- '% of engineers dislike this rule. The line length limit is for ' +
- ' style purposes, but we don't want it to have a performance impact.' +
- ' So the question is how should we do the wrapping?';
◆使用連接代替級聯：
- var veryLongMessage =
- ['This is a long string that due to our strict line length limit of',
- maxCharsPerLine,
- ' characters per line must be wrapped. ',
- percentWhoDislike,
- '% of engineers dislike this rule. The line length limit is for ',
- ' style purposes, but we don't want it to have a performance impact.',
- ' So the question is how should we do the wrapping?'
- ].join();
與此類似，在條件語句中使用級別也是很低效的，錯誤的做法：
- var fibonacciStr = 'First 20 Fibonacci Numbers
- ';
- for (var i = 0; i < 20; i++) {
- fibonacciStr += i + ' = ' + fibonacci(i) + '
- ';
- }
正確的方法：
- var strBuilder = ['First 20 fibonacci numbers:'];
- for (var i = 0; i < 20; i++) {
- strBuilder.push(i, ' = ', fibonacci(i));
- }
- var fibonacciStr = strBuilder.join('');
◆定義類函數
下面的函數是低效的，因為每次構造baz.Bar的實例時，會創建一個新的函數和閉包：
- baz.Bar = function() {
- // constructor body
- this.foo = function() {
- // method body
- };
- }
正確的方法是：
- baz.Bar = function() {
- // constructor body
- };
- baz.Bar.prototype.foo = function() {
- // method body
- };
使用這個方法時，無論baz.Bar構造了多少個實例，都只會為foo創建一個函數，而且不會創建閉包。
◆初始化實例變量
使用實例變量值類型初始值初始化實例變量聲明，如數值、布爾值、空值、未定義或字符串，這樣可以避免每次調用構造器時運行不必要的初始化代碼。還是來看一個例子：
- foo.Bar = function() {
- this.prop1_ = 4;
- this.prop2_ = true;
- this.prop3_ = [];
- this.prop4_ = 'blah';
- };
可以使用：
- foo.Bar = function() {
- this.prop3_ = [];
- };
- foo.Bar.prototype.prop1_ = 4;
- foo.Bar.prototype.prop2_ = true;
- foo.Bar.prototype.prop4_ = 'blah';
進行代替。
◆避免使用with
避免在代碼中使用with，它會影響到性能，因為它修改了范圍鏈，因此需要花費更多時間到其它范圍去查找。
◆避免瀏覽器內存泄漏
對于Web應用程序而言，內存泄漏是很常見的事情，可能因此導致巨大的性能問題。因為瀏覽器的內存使用在增長，你的Web應用程序和其它程序就會變慢，最常見的內存泄漏是在JavaScript引擎和瀏覽器C++對象實現的DOM之間形成了循環引用，如在JavaScript引擎和IE瀏覽器的COM基礎結構之間，以及JavaScript引擎和Firefox XPCOM基礎結構之間。
#p#
優化網頁圖片
當你在優化網頁代碼時，別忘了那些靜態內容，包括圖片，經過簡單的優化就可以大大減少下載大小，并且也不會降低網站的質量。
我們總結了一些技巧，可以幫助你加快網頁圖片的載入速度：
◆剪裁掉多余的空白
圖- 2 剪裁掉多余的空白
如果確實需要空白內邊距，可以使用css代碼來實現。
◆使用最佳的文件格式
可以通過一些專業的圖片處理工具，如photoshop就可以直接保存為網頁圖片，如果將圖片顏色從256色調整到32色，那文件大小會明顯變小，下面來看看一張圖片不同文件格式時的大小對比。
上面這張圖片不同文件格式時的大小對比結果如下：
◇JPG, 60 quality - 32K
◇PNG-8, 256 colors - 37K
◇GIF, 256 colors - 42K
◇PNG-24 - 146K
由于8位png和gif格式相對而言圖像質量不錯，文件大小更小，因此在網頁中建議多使用這兩種格式。
PHP性能技巧
51CTO編輯注：對于以下這部分內容，PHP小組已發布公開信反駁，其中的有些建議究竟是否正確還有待進一步研究。
由于PHP的使用量非常大，所以有必要放在這里說一說。首先有一點需要闡明的是，網站的性能與PHP版本，Web服務器環境和代碼的復雜度都是有關的。
◆升級PHP版本
首先要做的是升級PHP版本，如果你還在使用PHP3或PHP4，那趕快升級吧！
◆使用緩存
使用緩存模式，如memcached，可以將數據庫查詢結果或網頁緩存起來，加快Web服務器的響應速度。
◆使用緩沖輸出
PHP使用內存緩沖存儲你的腳步嘗試打印的所有數據，這個緩沖看起來好像讓你的網頁變慢，因為用戶必須等待緩沖被填滿，幸運的是，你可以做一些修改強制讓PHP快速清空輸出緩沖。
◆沒有原因盡量不要復制變量
有些PHP新手試圖通過拷貝預先定義的變量使代碼變得清晰，但事實是這樣會導致雙倍的內存消耗。我們來看一個例子，假設有個不懷好意的用戶向文本區域插入了512KB的內容，那么會使用1MB內存：
- $description = strip_tags($_POST['description']);
- echo $description;
上面這個例子就是沒有原因的拷貝變量，其實可以簡化它，避免額外的內存消耗：
- echo strip_tags($_POST['description']);
◆避免在循環中執行SQL查詢
一個常犯的錯誤是在循環中使用SQL查詢，這樣會引起多次數據庫往返，降低腳本速度，在下面的例子中，你可以修改循環構建一個SQL查詢，一次性插入所有的用戶：
- foreach ($userList as $user) {
- $query = 'INSERT INTO users (first_name,last_name) VALUES("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
- mysql_query($query);
- }
改為：
- INSERT INTO users (first_name,last_name) VALUES("John", "Doe")
不用循環，你可以合并成一次數據庫查詢：
- $userData = [];
- foreach ($userList as $user) {
- $userData[] = '("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
- }
- $query = 'INSERT INTO users (first_name,last_name) VALUES' . implode(',', $iserData);
- mysql_query($query);Produces:
- INSERT INTO users (first_name,last_name) VALUES("John", "Doe"),("Jane", "Doe")...
◆為長字符串使用單引號
PHP允許對字符串變量封裝同時使用單引號和雙引號，但是是有區別的，使用雙引號時，告訴PHP引擎讀取字符串內容并查找變量，然后使用它們的值替換它們，對于一個很長的但沒有包含變量的字符串，將導致性能下降。
◆使用switch/case替代if/else
使用switch/case比使用if/else性能更好，易讀性和易維護性也更佳。
#p#
預取資源
預取資源就是當用戶還沒有請求該資源就預先下載到本地，那當用戶真正請求時，可以大大減小網絡延遲時間，甚至消除網絡延遲時間。
對于交互式網站，優化速度不僅僅是減小初始下載大小，當用戶交互時可以下載額外的資源，這些行為的速度依賴于下載這些資源的時間，將下載資源變小可以加快網站速度。在設計預取資源時要考慮以下幾個問題：
◆研究用戶行為
如果你的用戶在某個特定的頁面或行為上花費了大量的時間，那這就是你該優化的，你可以通過查找服務器日志來找出這些頁面和行為。對于picasa網絡相冊，我們知道最多的操作是一張張瀏覽圖片，那么這就是非常合適的預取對象。
◆衡量網頁準好的時間
在當前頁面沒有顯示完時不應該提取新頁面的數據，對于動態頁面，你需要為頁面上每個外部文件添加JavaScript載入處理程序，當這些資源全部下載下來后，為用戶下一個行為預取數據就非常合理了。
◆使用工具測試
在正式修改代碼前，先用Page Speed這類工具進行測量，要避免一次提取太多數據造成網站變慢。
適當的包含樣式和腳本
網頁載入時間一般80-90%的時間都花在等待網絡上了，最有力的方法是消除序列化下載資源。
聯合外部JavaScript文件
下載外部腳本文件時一般瀏覽器會等它下載完了再繼續后面的下載，這與并行下載圖片的行為是完全相反的。
例1：兩個外部腳本文件
例2：兩個外部圖片
在例2中，兩個需要1秒的圖片合在一起時，總共也只需要1秒就完成下載了，在例1中，兩個需要1秒的腳步合在一起時，卻需要2秒才能完成下載，這是兩個不同的并行和串行下載。因此，如果你有多個外部腳本文件，最好將它們合并到一個文件中。
在外部JavaScript文件前包含額外的css文件
由于腳本文件會阻止后面的下載，那些已經在下載中的將會繼續下載。
例3：在css之前的腳本
例4：在腳本前的css
在例3中，腳本在css文件前會導致瀏覽器堵塞，要花2秒時間，但只需要將css移到腳本前面就可以讓下載過程并行執行，如例4。因此，如果你既有外部css文件，又有外部腳本文件，那么記住一定要將css文件放到腳本文件的前面。
在外部css和其它資源之間不包含內聯JavaScript
使用內聯腳本標簽時，即使它沒有下載任何東西，也會阻礙后面的下載。
例5：css后的內聯腳本
例6：css前的內聯腳本
例5中內聯腳本塊位于樣式和腳本之間，下載時是串行的，在例6中，移到樣式前面后，再一次恢復到并行下載模式。因此，如果你有一個外部css文件，不要在你的css文件和下一個下載的資源之間插入內聯腳本標簽。
#p#
減小HTML文檔的文件大小
想要減少網站的載入時間最佳的辦法就是減小HTML文件的大小，有很多種辦法可以實施，首先我們看看html哪些標簽是可以瘦身的。
◆HTML 4
根據HTML 4 DTD標準，可以有很多標記都省略掉，下面以斜體表示的標記都可省略掉：
< /area>
< /base>
< body>
< /body>
< /br>
< /col>
< /colgroup>
< /dd>
< /dt>
< head>
< /head>
< /hr>
< html>
< /html>
< /img>
< /input>
< /li>
< /link>
< /meta>
< /option>
< /p>
< /param>
< tbody>
< /tbody>
< /td>
< /tfoot>
< /th>
< /thead>
< /tr>
例如，如果你有標記為< li>List item< /li>的列表項目，那么你可以將其省略為< li>List item，在表示段落結束時一般使用< /p>標記，但這下也可以使用< p>My paragraph了，這種省略語法對html、body、head都有效，在html中它們不是必須的。這樣一通省略后，往往可以使整個html文件大小減小5-20%。
◆HTML 5
雖然HTML 5仍然在開發階段，它向你提供了更多減小文件大小的選項。例如。HTML 5允許你象下面這樣設置文檔類型：
- < !DOCTYPE html>
相對
- < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你會注意到HTML 5 DTD更短了。當你指定文檔的編碼時，HTML 5更易于使用，并且更輕巧了，< meta charset="utf-8">和< meta http-equiv="content-type" content="text/html; charset=utf-8">表示的含義是一樣的，瀏覽器一看也是知道要處理HTML。
在HTML 5中另一個值得一提的是可以省略掉與MIME類型關聯的類型屬性了，這些屬性如type="text/css"或type="text/javascript"描述了內容的類型，現在可以使用< script>代替< script type="text/javascript">，使用< style>代替< style type="text/css">。
如果你將上面這些方法集合起來使用，將會節約10-20%的文件大小。請瀏覽Google的隱私頁面，它就全部采用了這些方法。
UI消息和感覺等待時間
對于很多用戶而言，速度并不等于性能，用戶對一個網站的速度感覺會受到他們的總體體驗影響，包括他們是否能夠有效地獲取到想要的內容，以及系統是如何人響應的。
在設計你的網站時，要考慮用戶訪問該站點的目的是什么，越快（越容易）完成訪問網站越好，如果用戶在獲得內容時遇到了很多困難，他們在完成任務后肯定會馬上離開你的站點，并可能再也不愿意回來。
其實要讓用戶覺得網站使用起來感覺很舒服，你有很多事情要做，這里只討論3個主題。
1. 網站設計是否足夠簡單，即使是第一次使用該網站的用戶也能夠順利地找到他們想要的內容。要達到開箱即用的效果。你可以花10天時間來考慮界面流程如何優化，這樣對于10萬用戶而言，節省的時間和價值都大多了。
2. 某個消息會打斷或增加用戶工作步驟嗎？
3. 用戶在等待期間該做點什么？例如顯示進度條，注意不要把進度條本身設計得過于龐大，一般建議使用“正在上傳......”，“載入中.......”等等這樣的純文本就可以了。
小結
本文列舉了12類加速網站的辦法，在實際工作，可以視具體情況靈活運用，當你完全掌握了這些方法后，也許會觸類旁通，引起你深入地追尋更深層次的加速辦法。
本文內容由Google提供，黃永兵整理編譯。
【編輯推薦】
