Menu

Yahoo! 14條規則加速網站的存取


盡量減少HTTP請求

標籤：內容

80％的最終用戶響應時間是用在前端。這個時候大多數是綁在下載所有的組件在頁面：圖像，樣式，腳本，Flash等減少元件數量，從而減少了HTTP請求數量呈現所需的頁面。這是關鍵更快的網頁。

一種方法，以減少元件的數目在頁面是簡化頁面的設計。但有一種方法來構建頁面更豐富的內容，同時也取得了快速的反應時間？以下是一些技術來減少HTTP請求數量，同時還支持豐富的網頁設計。

聯合文件 是一種方式，以減少HTTP請求數量的所有腳本結合成一個腳本，同樣所有的CSS結合到一個單一的樣式表。合併文件時更具挑戰性的腳本和樣式不同頁網頁，但使這一部分的釋放過程縮短了反應時間。

子畫面的CSS 首選的方法是減少數字圖像的要求。您的背景圖像結合成一個單一的形象，使用CSS 背景圖像 和 背景位置 屬性以顯示所需的圖像部分。

圖像映射 合併多個圖像到一個單一的形象。整體大小差不多，但數量減少HTTP請求加快了網頁。圖像映射只有當連續的圖像在頁面，如導航欄。定義的坐標圖像地圖可以乏味而且容易出錯。使用圖像映射為導航不可訪問過，因此不推薦。

內置圖片 使用 數據： URL方案 嵌入圖像數據在實際的頁面。這可以增加您的大小HTML文檔。結合內置圖片到您的（緩存），樣式表是一種HTTP請求，以減少和避免增加您的網頁大小。嵌入式圖像還不支持在所有主要瀏覽器。

減少HTTP請求數量在你的頁面是起點。這是最重要的準則為提高性能首次遊客。所述滕尼托伊雷爾的博客文章 瀏覽器緩存的使用-曝光！，每天40-60％的站點的訪問者進來一個空的緩存。快速製作網頁，這些首次訪問者的關鍵是更好的用戶體驗。

頂端 | 討論這一規則


使用內容傳送網絡

標籤：服務器

用戶在地理上接近您的Web服務器有一個響應時間的影響。您的內容部署在多個地理上分散的服務器將使您的網頁加載速度，從用戶的觀點。但是，您應從何處入手？

作為第一步，實施地理上分散的內容，不要試圖重新設計Web應用程序工作在分佈式體系結構。根據應用，改變結構可包括艱鉅的任務，如同步會話狀態和 推廣範圍內的交易數據庫服務器位置。試圖減少用戶之間的距離和你的內容可能會推遲，或從來沒有通過，這個應用程序體系結構的一步。

請記住，80-90％的最終用戶響應時間都花在下載所有的組件在頁面：圖像，樣式，腳本，Flash等，這是 表演的黃金規則。而不是首先是艱鉅的任務重新設計應用程序結構，最好先驅散你的靜態內容。這不僅實現了一個更大的響應時間減少，但更容易由於內容傳遞網絡。

內容交付網絡（CDN）的是一個集合的Web服務器分佈在多個地點，以更有效地提供內容的用戶。服務器選擇傳送內容，具有特定的用戶通常是基於網絡測量距離。例如，服務器的網絡跳數最少的服務器或響應時間最快的選擇。

一些大型互聯網公司擁有自己的加幣，但它具有成本效益的使用CDN服務提供商，如 Akamai技術, 鏡像互聯網，或 Limelight Networks合作。 對於剛成立的公司和私人網站，其費用1 CDN服務可以令人望而卻步，但您的目標受眾變大，並成為更具有全球性，一加幣是要實現快速的反應時間。在雅虎，屬性，靜態內容提出過申請的網頁伺服 器，CDN的提高最終用戶響應時間的20％以上。切換到加幣是一個相對容易的代碼改變，這將極大地提高速度，你的網站。

頂端 | 討論這一規則


添加過期或Cache - Control標題

標籤：服務器

有兩件事本規則：

  • 對於靜態部分：實施“永不過期”的政策設置遙遠的未來 到期 頭
  • 動態組件：用適當的 緩存控制 頭，以幫助瀏覽器與條件要求

網頁設計越來越豐富，這意味著更多的腳本，樣式表，圖片和Flash在頁面中。阿首次訪問者在您的網頁可能要數HTTP請求，而是通過使用Expires頭你這些組件緩存。這會避免不必要的HTTP請求在隨後的頁面瀏覽量。到期頭是最常用的圖像，但他們應該用在 全部 組件包括腳本，樣式，和Flash組件。

瀏覽器（和代理）使用緩存以減少數量和規模的HTTP請求，使網頁加載速度更快。 Web服務器使用Expires頭的HTTP響應告訴客戶多久組件可以被緩存。這是一個遙遠的將來Expires頭，告訴瀏覽器，這種反應將不會過時的，直到2010年4月15日。 

Expires: Thu, 15 Apr 2010 20:00:00 GMT

如果您的服務器是Apache，使用ExpiresDefault指令設定一個截止日期相對於當前的日期。這個例子的ExpiresDefault指令設置了過期的日期從10年的時間要求。 

ExpiresDefault "access plus 10 years"

請記住，如果您使用遙遠的將來Expires頭你必須改變組件的文件名時，該組件的變化。在Yahoo！我們經常走這一步的一部分生成過程：1版本號嵌入組件的文件名，例如，yahoo_2.0.6.js。

使用一個遙遠的未來Expires頭頁面瀏覽量影響只有在用戶已經訪問了您的網站。它不影響對HTTP請求的數目，當用戶訪問您的網站第一次和瀏覽 器的緩存是空的。因此，這種影響表現改善取決於用戶打多久您的網頁緩存的引物。 （甲“引緩存”已經包含了所有的組件在頁面中。）我們 衡量這在Yahoo！ 發現有多少頁面瀏覽量的引物緩存75-85％。通過使用一個遙遠的將來Expires頭，你增加人數的組件，由瀏覽器緩存和再利用在後續頁面瀏覽量而不發送一個字節對用戶的互聯網連接。

頂端 | 討論這一規則


gzip壓縮組件

標籤：服務器

所花費的時間傳輸一個HTTP請求和響應通過網絡可以大大減少所作出的決定前端工程師。的確，最終用戶的帶寬速度，互聯網服務提供商，接近對等交換點等是無法控制的開發團隊。但還有其他變數影響響應時間。壓縮響應時間縮短，減少大小的HTTP響應。

開始通過HTTP/1.1，表示支持Web客戶端壓縮與Accept - Encoding頭在HTTP請求。 

Accept-Encoding: gzip, deflate

如果Web服務器看到這頭在請求，可以使用壓縮的反應的方法之一列出的客戶端。在Web服務器Web客戶端通知該通過內容編碼頭的響應。 

Content-Encoding: gzip

Gzip已是最流行和有效的壓縮方法在這個時候。它是由GNU計劃和規範化的 玫瑰花1952。其他唯一的壓縮格式，你可能看到的是緊縮，但它是那麼有效越來越不得人心。

Gzipping普遍降低了響應的大小約70％。大約90％的今天的互聯網流量穿過聲稱的瀏覽器支持gzip。如果你使用Apache的模塊配置gzip壓縮取決於您的版本：Apache 1.3的使用 mod_gzip的 而Apache 2.X的用途 mod_deflate.

目前已知的問題與瀏覽器和代理，可能會導致不匹配的瀏覽器是什麼，什麼期望收到關於壓縮內容。幸運的是，這些邊緣案件減少對使用舊的瀏覽器下降了。 Apache的模塊，幫助通過添加適當的卡羅維響應頭自動。

服務器選擇什麼gzip壓縮的文件類型，但通常是太有限，他們決定壓縮。大部分網站gzip壓縮的HTML文件。這也是值得的gzip壓縮腳本和樣 式，但很多網站錯過這一機會。事實上，這是值得的壓縮任何文本的響應包括XML和JSON。圖像和PDF文件不應該用gzip壓縮，因為他們已經壓縮。他 們試圖gzip壓縮，不僅浪費CPU，但可能會增加文件大小。

Gzipping許多文件類型可能是一種簡單的方法來減輕體重，加快網頁的用戶體驗。

頂端 | 討論這一規則


把樣式表的頂部

標籤：的CSS

雖然在性能研究雅虎，我們發現，移動樣式表文件頭使得網頁 出現 要加載更快。這是因為在把樣式表頭允許頁面逐步呈現。

前端工程師的性能要關心頁面加載逐步，也就是說，我們希望瀏覽器來顯示它的任何內容，盡快。這是特別重要的網頁上包含了很多內容和用戶在較慢的互聯網連接。的重要性視覺反饋給用戶，如進度指標，亦經深入研究和 記錄。在我們的情況下，HTML頁面的進度指示器！當瀏覽器加載網頁逐步頭，導航欄上，該標誌的頂端，等等都可以作為視覺反饋的用戶誰是等待頁面。這提高了整體用戶體驗。

把這個問題與樣式接近底部的文件，它禁止逐步呈現在許多瀏覽器，包括IE瀏覽器。這些瀏覽器塊渲染以避免重新劃定的頁面元素，如果他們的風格上的變化。用戶是堅持查看一個空白頁。

那個 HTML規範 明確指出，樣式表是包含在網頁的頭：“不同的是，[鏈接]可能只出現在HEAD部分的文件，雖然它可能出現的任何次數。”既不是替代品的空白屏幕或閃光的無樣式的內容，是值得冒險。最佳的解決方案是按照HTML規範和負載你的樣式表文件頭。

頂端 | 討論這一規則


把腳本底部

標籤：JavaScript的

這個問題引起的腳本是，他們阻止平行下載。那個 HTTP/1.1規範 建議瀏覽器下載不超過兩個部分同時為主機名。如果您為您的圖片從多個主機名，你可以得到兩個以上的下載發生在平行。雖然腳本下載，不過，瀏覽器將無法啟動任何其他下載，甚至在不同的主機名。

在某些情況下，不容易移動腳本的底部。如果，例如，該腳本使用 document.write 插入部分網頁內容，但不能移動較低的頁面。也可能有範圍的問題。在許多情況下，有辦法解決辦法這些情況。

另一種建議，常常會出現延遲是使用腳本。那個 推遲 屬性表明該腳本不包含document.write，是一個線索，瀏覽器，他們可以繼續呈現。不幸的是，火狐不支持 推遲 屬性。在Internet Explorer中，該腳本可能會推遲，但不及預期。如果腳本可以推遲，也可以移動到網頁的底部。這將使你的網頁加載速度更快。

頂端 | 討論這一規則


避免的CSS表達式

標籤：的CSS

的CSS表達式是一個強大的（危險）方法來設置CSS屬性動態。他們支持在Internet Explorer中，首先 第5版。作為一個例子，背景顏色可以設置為每隔一小時輪流使用CSS表達式。 

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

這說明，在 表達 方法接受一個JavaScript表達式。 CSS屬性設置為評估結果JavaScript表達式。那個 表達 方法是忽視了其他瀏覽器，因此可用於設置屬性在Internet Explorer中需要建立一個一致的體驗不同的瀏覽器。

這個問題的表述是，他們更經常地評估比大多數人預期。它們不僅評價時，呈現頁面的大小，而且還當頁面滾動，甚至當用戶移動鼠標在頁面。添加計數器的CSS表達式使我們能夠跟踪的時間和頻率一個CSS表達式求值。移動鼠標在頁面可以很容易地產生超過10,000評價。

一種方法，以減少多少次你的CSS表達式求值是使用一次性的表達式，其中第一次表達式求值它設置樣式屬性設置為一個明確的價值，它取代了CSS表達 式。如果樣式屬性必須設置在整個生命動態的頁面，使用事件處理而不是CSS表達式是一種替代方法。如果您必須使用CSS表達式，記住，他們可能數千次評 估，並可能影響性能的您的網頁。

頂端 | 討論這一規則


使用外部JavaScript和CSS

標籤：JavaScript中的CSS

許多這些性能規則如何處理外部元件的管理。然而，在這些因素出現的你應該問一個更基本的問題：如果JavaScript和CSS載於外部文件或內嵌在網頁本身的？

使用外部文件，在現實世界中通常能縮短頁面，因為JavaScript和CSS文件緩存的瀏覽器。 JavaScript和CSS，這是內聯在HTML文件中得到每次下載HTML文件的要求。這將減少HTTP請求數量是必要的，但增加了大小的HTML文 檔。另一方面，如果JavaScript和CSS是在外部文件緩存的瀏覽器，大小的HTML文件是減少而增加數量的HTTP請求。

的關鍵因素，那麼，它的頻率與外部JavaScript和CSS組件緩存的數量相對的HTML文件的要求。這個因素，雖然難以量化，可以使用不同的 衡量指標。如果用戶在您的網站有多個頁面瀏覽量為會議和許多網頁重新使用相同的腳本和樣式表，有一個更大的潛在受益於緩存的外部文件。

很多網站秋天，中間這些指標。對於這些網站，最好的解決辦法通常是部署JavaScript和CSS的外部文件。唯一的例外，最好是內聯與主頁，如 雅虎頭版 和 我的Yahoo！。 首頁頁面很少（也許只有一個），網頁瀏覽，每節可能會發現，內嵌JavaScript和CSS結果更快最終用戶響應時間。

為前端網頁通常第一頁的許多意見，有技術，利用減少HTTP請求內聯提供，以及所取得的高速緩存的好處通過使用外部文件。其中一個方法是內嵌JavaScript和CSS在頭版，但動態的外部文件下載頁面後完成加載。後續頁將參照外部文件，應已在瀏覽器的緩存。

頂端 | 討論這一規則


減少DNS查找

標籤：內容

網域名稱系統（DNS）主機名映射到IP地址，就像電話簿圖人的名字和電話號碼。當你輸入www.yahoo.com到您的瀏覽器，一個DNS解析 接觸的瀏覽器返回該服務器的IP地址。域名是有成本的。它通常需要20-120毫秒的DNS來查找IP地址為給定的主機名。瀏覽器不能下載任何來自該主機 名的DNS查找，直到完成。

DNS查找緩存獲得更好的性能。此緩存可能會發生在一個特殊的緩存服務器，維護用戶的ISP或局域網，但也有發生緩存對個人用戶的計算機。 DNS信息仍保留在操作系統的DNS緩存（以下簡稱“DNS客戶端服務”，在Microsoft Windows）。大多數瀏覽器都有自己的緩存，獨立於操作系統的緩存。只要瀏覽器保存一份DNS記錄在自己的緩存，它不會理會操作系統的要求備案。

Internet Explorer緩存DNS查詢30分鐘，默認情況下，具體由 DnsCacheTimeout 註冊表設置。 Firefox的緩存DNS查找1分鐘，控制在 network.dnsCacheExpiration 配置設置。 （Fasterfox的變化為1小時。）

當客戶端的DNS緩存是空的（無論對瀏覽器和操作系統），其數量DNS查找等於多少獨特的主機名在該網頁。這包括主機使用的網頁的網址，圖片，腳本文件，樣式表，Flash對象等，減少數量的獨特主機的數目減少DNS查找。

減少獨特的主機數量有可能減少貸款數額的並行下載發生在頁面中。避免DNS查找的響應時間，但減少並行下載可能會增加響應時間。我的方針是分裂這些組件在至少兩年，但不超過4個主機名。這將導致一個很好的妥協要減少DNS查找，並允許高度的並行下載。

頂端 | 討論這一規則


Minify JavaScript和CSS

標籤：JavaScript中的CSS

Minification做法是消除不必要的字符代碼以減小其尺寸，從而改善載入時間。當代碼minified的所有意見都將被刪除，以及不需要的 空白字符（空格，換行和製表符）。在JavaScript的情況，這改善了響應時間的性能，因為大小下載的文件是減少。兩種流行的工具minifying JavaScript代碼的 JSMin 和 銳壓縮機。在銳壓縮機也可以minify的CSS。

混淆是另一種優化，可以應用到源代碼。它更複雜，minification，從而更有可能產生錯誤結果的混淆步驟本身。在調查的10個美國最大的網 站，minification實現了體積減少21％與25％的困惑。雖然混淆具有較高的規模縮小，minifying JavaScript是風險較低。

除了minifying外部腳本和樣式，內聯 的<SCRIPT> 和 <style> 塊可以，也應該minified。即使你gzip壓縮腳本和樣式，minifying他們仍然會減少面積由5％或以上。由於使用和規模的JavaScript和CSS增加，因此將所獲得的節餘minifying您的代碼。

頂端 | 討論這一規則


避免重定向

標籤：內容

重定向使用完成301和302狀態碼。下面是一個例子是HTTP標頭在301回應： 

HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

該瀏覽器會自動將用戶指定的URL中 位置 領域。所有必要的資料，為重定向是在頭。身體的反應通常是空的。儘管他們的名字，既不是301也不是302響應緩存在實踐中，除非額外的標題，如 到期 或 緩存控制，表明它應該是。在元刷新標記和JavaScript的其他方式將用戶定向到不同的URL，但如果你必須做一個重定向，首選的方法是使用標準的HTTP狀態碼3xx系列，主要是為了確保後退按鈕正常工作。

主要的是要記住的是，重定向降低用戶體驗。插入用戶之間的重定向和HTML文件延誤一切在網頁因為沒有在頁面可以被渲染並沒有組件可以開始被下載到HTML文件已經來臨。

其中最浪費的重定向經常發生和網絡開發者通常沒有意識到這一點。它發生在一個斜杠（/）缺少的網址，否則應該有一個。例如，將 http://astrology.yahoo.com/astrology 結果在301響應包含重定向 http://astrology.yahoo.com/astrology/ （注意添加斜線）。這是在用阿帕奇 別名 或 mod_rewrite的或 DirectorySlash 指令，如果您使用Apache的處理程序。

連接舊的網站，一個新的另一種普遍使用的重定向。其他包括連接不同地區的網站，並指導用戶根據某些條件（類型的瀏覽器中鍵入的用戶帳戶等）。使用重 定向來連接兩個網站非常簡單，幾乎不需要額外的編碼。雖然使用重定向在這種情況下降低開發的複雜性，它降低了用戶體驗。這種替代使用重定向包括使用 別名 和 mod_rewrite的 如果兩個代碼路徑是託管在同一台服務器。如果一個域名的變化是造成使用重定向，另一種是創建一個CNAME（DNS記錄創建一個別名指向域名從一個到另一個）結合 別名 或 mod_rewrite的.

頂端 | 討論這一規則


刪除重複的腳本

標籤：JavaScript的

它傷害的表現，包括相同的JavaScript文件兩次一頁。這不是尋常，你可能認為。阿審查10美國最高的網站顯示，他們兩個包含重複的腳本。兩 個主要因素的可能性增加一個腳本被複製在一個網頁：團隊的規模和數量的腳本。到那個時候，重複的腳本傷害性能造成不必要的浪費HTTP請求和 JavaScript執行。

發生不必要的HTTP請求在Internet Explorer中，而不是在Firefox瀏覽器。在Internet Explorer中，如果一個外部腳本包含兩次，而不是緩存的，它會生成兩個HTTP請求，在頁面加載。即使腳本緩存，額外的HTTP請求時，會出現在用 戶重新加載頁面。

除了生成HTTP請求的浪費，浪費時間評估腳本多次。這多餘的JavaScript執行發生在Firefox和IE瀏覽器，無論是緩存的腳本。

其中一個方法來避免意外，其中包括兩次在相同的腳本是執行一個腳本管理模塊中的模板系統。典型的方式包括腳本是使用SCRIPT標記在您的HTML網頁。 

<script type="text/javascript" src="menu_1.0.17.js"></script>

另一種是在PHP創建一個函數調用 insertScript. 

 <?php insertScript("menu.js") ?>

除了防止相同的腳本被多次插入，這一功能可以處理其他問題的腳本，如依賴檢查並增加版本號為腳本文件，以支持遙遠的將來過期標頭。

頂端 | 討論這一規則


配置ETags

標籤：服務器

實體標記（ETag的）是一種機制，Web服務器和瀏覽器來確定組件是否在瀏覽器的緩存匹配一個原始服務器上。 （一個“實體”是另一個詞的一個“組件”：圖像，腳本，樣式表等）ETag的被添加到提供一個機制，為驗證實體，更靈活，比最後修改日期。一個ETag是 一個字符串，唯一標識一個特定的版本的一個組件。唯一的限制是，格式字符串被引用。原始服務器指定了組件的ETag的使用 ETag的 響應頭。 

 HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

後來，如果瀏覽器來驗證一個組件，它使用 如果無的，匹配 頭傳遞的ETag回原始服務器。如果ETag的比賽，304狀態代碼返回降低反應12195字節這個例子。 

           GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

這個問題與ETag的是，他們使用屬性構造，使它們特有的一個特定的服務器託管的網站。 ETag的不匹配時，瀏覽器獲取原始組件從一台服務器，後來嘗試驗證該組件在不同的服務器，這種情況是屢見不鮮的網站上使用群集的服務器處理請求。默認情 況下，Apache和IIS的嵌入數據的ETag，極大地降低的可能性的試驗成功的有效性在網站上的多個服務器。

ETag的格式為Apache 1.3和2.x的 inode的大小，時間戳。不過，某一文件可能駐留在同一目錄跨多個服務器，並具有相同的文件大小，權限，時間戳等，其inode的不同從一台服務器下。

IIS 5.0和6.0也有類似的問題與ETag的。該格式在IIS的ETag的 Filetimestamp：ChangeNumber。字母a ChangeNumber 是一個計數器用於跟踪配置更改到IIS。這是不可能的 ChangeNumber 同樣是在所有的IIS服務器後面的網站。

最終的結果是ETag的生成Apache和IIS為完全相同的組件將不匹配從一個服務器到另一個。如果ETag的不匹配，用戶沒有收到小 型，快速反應，ETag的304人設計的，相反，他們將得到一個正常的200響應連同所有數據的組件。如果您的網站主機只是一台服務器上，這不是一個問 題。但如果你有多個服務器託管您的網站，而您使用的是Apache或IIS的默認的ETag配置，你的用戶越來越慢的網頁，你的服務器具有更高的負載，你 消耗更大的帶寬，代理阿倫'噸緩存您的內容有效。即使您的組件有一個遙遠的未來 到期 頭，一個條件GET請求時作出仍然是用戶點擊刷新或刷新。

如果你不趁靈活的驗證模型，ETag的規定，最好只完全消除的ETag。那個 最後修改 頭驗證基於組件的時間戳。和刪除的ETag減少大小的HTTP標頭無論是反應和後續請求。這個 微軟支持文章 介紹如何刪除ETag的。在Apache中，這樣做是通過簡單地增加下面的行加入到Apache的配置文件： 

     FileETag none

頂端 | 討論這一規則

 

使Ajax可緩存

標籤：內容

其中引述的Ajax的好處是，它提供即時的反饋給用戶，因為它要求提供從後端異步Web服務器。但是，使用Ajax是沒有保證的用戶將不被擺弄他的 大拇指等待的異步JavaScript和XML響應返回。在許多應用中，無論用戶是保持等待取決於如何使用Ajax的。例如，在一個基於Web的電子郵件 客戶端，用戶將被保存在等待結果的Ajax請求查找所有電子郵件符合他們的搜索條件。重要的是要記住，“異步”並不意味著“瞬間”。

為了提高性能，重要的是要優化這些Ajax響應。最重要的途徑，以改善性能Ajax的是使緩存的反應，所討論的 添加過期或Cache - Control標題。其他一些規則也適用於阿賈克斯：

讓我們來看一個例子。一個Web 2.0電子郵件客戶端可能使用Ajax下載用戶的地址簿的自動完成。如果用戶沒有更改她的地址簿，因為她最後一次使用Web應用程序的電子郵件，地址簿上 的反應可能會從緩存中讀取如果Ajax響應了緩存與未來過期或Cache - Control標題。該瀏覽器時，必須通知使用以前緩存的地址簿中的反應與要求新的。這可以通過增加一個時間戳阿賈克斯的URL地址簿上的時間顯示用戶修 改自己的地址簿，例如， = 1190241612＆T公司。如果通訊簿沒有被修改自上次下載的時間戳將是相同的地址簿都將讀取器的緩存消除額外的HTTP往返。如果用戶修改了她的地址簿，時間戳，確保新的URL不符合緩存的響應，瀏覽器會要求更新的地址簿。

即使您的Ajax響應創建動態的，並且可能只適用於單個用戶，他們仍然可以被緩存。這樣做會使你的Web 2.0應用程序速度更快。

頂端 | 討論這一規則


刷新緩衝區早期

標籤：服務器

當用戶請求一個頁面時，它可能會花費200至500毫秒的後端服務器縫合在一起的HTML頁面。  在此期間，瀏覽器處於閒置狀態，因為等待數據的到來。  在PHP中你有功能 刷新（）。  它允許您發送您的部分準備HTML響應到瀏覽器，使  瀏覽器可以開始獲取組件，而你的後台是忙於其他的HTML頁面。  好處主要表現在繁忙的後端或輕前端。

一個很好的考慮是正確的沖洗後的頭因為HTML的頭部     通常比較容易產生，它允許您將任何CSS和JavaScript     檔案瀏覽器開始獲取平行，而後端仍在處理。

例如： 

      ... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

雅虎！搜索 率先研究和實際用戶測試，證明的好處使用這種技術。

頂端


使用Ajax請求的GET

標籤：服務器

那個 雅虎！郵件 研究小組發現，當使用 XMLHttpRequest的，後是在瀏覽器中執行，作為兩個步驟：     發送郵件頭，然後發送數據。因此，最好使用GET，而只需要一個TCP數據包發送（除非你有很多餅乾）。     最高URL的長度在IE為2K，因此，如果您發送更多的數據比2K您可能無法使用GET。

一個有趣的副作用的影響是，郵政實際上不公佈任何數據行為就像得到。 根據 的HTTP規範，得到的意思是獲取信息，因此它         有道理（語義），以使用GET當你只要求的數據，而不是將數據發送到存儲服務器端。

頂端


post-load 組件

標籤：內容

你可以仔細看看您的網頁，並問自己：“什麼是絕對需要的，以便使該網頁最初？”。     其餘的內容和組件可以等待。

JavaScript是一種理想的候選人分裂之前和之後的onload事件。例如     如果你有JavaScript代碼和庫做拖放和動畫，這些可以等待，     因為拖分子在該頁面出現在最初的渲染。     其他地方尋找候選人後裝載包括隱藏的內容（後出現的內容，用戶操作）和圖像低於倍。

工具來幫助你在你的努力： 銳圖像裝載機 可以延遲圖像     低於倍， 銳獲取工具 是一種簡單的方法，包括JS和在飛行的CSS。     舉例說，在野生採取看 雅虎！首頁 與Firebug的網絡小組打開。

這是良好的業績目標時，與其他的內聯     網絡發展的最佳做法。在這種情況下，進步的思想告訴我們，增強了JavaScript，當支持，可     改善用戶體驗，但你必須確保工程的網頁，即使沒有的JavaScript。所以在您進行了確認該網頁     工作正常，你可以加強它與一些後加載腳本，使您更花俏，如拖放和動畫。

頂端


預壓組件

標籤：內容

預載看似相反的後負荷，但實際上具有不同的目標。     通過預組件可以利用瀏覽器的時間處於閒置狀態，並要求組件     （如圖像，樣式和腳本）你需要在未來。     這樣當用戶訪問到下一頁，可以有大部分部件已經在     緩存和你的網頁將載入更快的用戶。

實際上有幾種類型的預壓：

  • 無條件 預-盡快的onload火災，你先和獲取一些額外的組件。         檢查google.com為例精靈的形象如何請求的onload。這精靈形象         不需要對google.com網頁，但它需要對連續搜索結果頁。
  • 條件 預-基於用戶行為你的猜測，用戶是預領導下和相應的。         論 search.yahoo.com 你可以看到一些額外的組件要求         在您開始鍵入在輸入框中。
  • 預期 預裝-預裝提前推出前重新設計。它通常發生後，重新設計，你聽到：         “新網站是很酷，但它的速度比以前”。問題的一部分，可能是用戶在訪問您的舊網站的         全緩存，但新一永遠是空的緩存的經驗。您可以減輕這種負面影響的一些預         組件之前，您甚至推出重新設計。您的舊網站可以利用這段時間瀏覽器處於閒置狀態，並要求圖像和腳本         將要使用的新網站

頂端


減少DOM元素數量

標籤：內容

一個複雜的頁面意味著更多的字節下載和速度也意味著在JavaScript DOM的訪問。它的確與眾不同     如果您遍歷500或5000 DOM元素在頁面上時，您要添加一個事件處理程序的例子。

高DOM元素數量可以是一個症狀，有些事，是需要改善的標記     頁面的內容，而不必刪除。     您是否使用嵌套的表格進行佈局的目的？     你扔更多 <div>擰只解決佈局問題？     也許有一個更好，更語義正確的方法標記。

有極大的幫助與佈局的 銳的CSS工具：     grids.css可以幫助您與整體佈局，fonts.css和reset.css     可以幫助您去除瀏覽器的默認格式。     這是一個機會，重新開始，並考慮你的標記，     例如，使用 <div>擰只有當它有意義的語義，而不是因為它呈現一個新行。

有多少DOM元素很容易測試，只需鍵入的Firebug控制台：
document.getElementsByTagName ('*').長度

有多少DOM元素太多？檢查其他類似的網頁，有良好的標記。     例如 雅虎！首頁 是一個非常繁忙的網頁，並仍然在700的元素（HTML標記）。

頂端


靜態組件跨域名

標籤：內容

分裂組件使您可以最大限度地提高並行下載。確保您使用     不超過2-4域由於DNS查找罰款。     例如，您可以承載HTML和動態內容     關於 www.example.org 和靜組件之間的分裂 static1.example.org 和 static2.example.org

欲了解更多信息查詢     “最大化並行下載的共乘車道“由滕尼托伊雷爾和Patty池。

頂端


盡量減少數量內部框架

標籤：內容

內部框架允許的HTML文件，插入在父文件。     重要的是要了解內部框架的工作，使他們能夠有效地加以利用。

<iframe> 優點：

  • 幫助緩慢第三方內容和廣告等證章
  • 安全沙箱
  • 下載腳本並行

<iframe> 缺點：

  • 昂貴即使空白
  • 塊頁的onload
  • 非語義

頂端


沒有404頁面

標籤：內容

HTTP請求昂貴，因此成為一個HTTP請求，並得到一個無用的反應（即404未找到）     是完全不必要的，會降低用戶體驗沒有任何好處。

有些網站能夠提供有用的404頁面“您是指X上嗎？”，這是偉大的用戶     經驗，但也浪費服務器資源（如數據庫等）。     特別是壞的是當連接到一個外部JavaScript是錯誤的，結果是404。     首先，這將阻止平行下載下載。接下來，瀏覽器可能會嘗試分析     404反應身體就好像它是JavaScript代碼，試圖找到有用的東西了。

頂端

減少Cookie的大小

標籤：曲奇

HTTP Cookies方法用於一多種原因，例如身份驗證和個性化。     有關Cookie的信息交換在HTTP頭之間的網絡服務器和瀏覽器。     重要的是要保持規模餅乾盡可能低的影響，以盡量減少對用戶的響應時間。

欲了解更多信息查詢 “當，繁忙的” 由滕尼托伊雷爾和Patty池。     該拿回家本研究：

 

  • 消除不必要的餅乾
  • Cookie的規模保持盡可能低的影響，以盡量減少對用戶的響應時間
  • 心系設置的Cookie在適當的水平，其他的域的子網域不受影響
  • 設置適當的到期日期。較早到期日期或沒有刪除cookie的越早，提高用戶的響應時間

頂端

使用cookie無域的組件

標籤：曲奇

當瀏覽器發出請求的靜態圖片和餅乾一起發送的請求，     服務器沒有任何使用這些Cookie。因此，他們只能創建網絡流量沒有好處     原因。你應該確保靜態組件要求與餅乾無要求。創建     子域名和主機所有靜態組件那裡。

如果您的域 www.example.org，您可以管理自己的靜態組件     關於 static.example.org。不過，如果你已經設置的Cookie在頂級域名 example.org 相對於 www.example.org，那麼所有的請求 static.example.org 將包括這些Cookie。在這種情況下，你可以買一個全新的域名，主機靜態     組件那裡，並保持這一領域的Cookie免費。雅虎！使用 yimg.com，YouTube使用 ytimg.com，     亞馬遜使用 圖像amazon.com 等等。

另外一個好處主辦靜態組件上的cookie，免費的域名是，一些代理人可能會拒絕緩存     的組件，請與cookies。     與此相關的注意，如果您想知道您是否應該使用example.org或www.example.org為您的主頁，考慮到cookie的影響。     省略萬維網留下你別無選擇，只能寫cookie來 *. example.org，如此性能的原因，最好使用     萬維網子和     寫入cookie來該子網域。

頂端


最小化的DOM訪問

標籤：JavaScript的

訪問用JavaScript DOM元素緩慢，是為了有一個更加敏感網頁，您應該：

  • 緩存引用訪問元素
  • 更新節點“離線”，然後將它們添加到樹
  • 避免使用JavaScript固定佈局

欲了解更多信息，檢查銳劇院的 “高性能Ajax應用程序” 由Julien孔特。

頂端


開發智能事件處理程序

標籤：JavaScript的

有時覺得不太敏感的網頁，因為太多的事件處理程序附加到不同     元素的DOM樹，然後執行太多。這就是為什麼使用 事件代表團 是一個好方法。     如果你有10個按鈕內 科，附加只有一個事件處理程序組包裝，而不是     一個處理每個按鈕。事件泡沫，所以你就可以趕上事件，並找出它的按鈕源自。

您也不必等待onload事件，以開始做一些與DOM樹。     通常你需要的是元素，您要訪問的可於樹。您不必等待所有圖像被下載。 DOMContentLoaded 該事件是可以考慮使用，而不是的onload，但直到它可以在所有瀏覽器，你     可以使用 銳事件 實用程序，它有一個 onAvailable 方法。

欲了解更多信息，檢查銳劇院的 “高性能Ajax應用程序” 由Julien孔特。

頂端

選擇<link>取代@import

標籤：的CSS

一個以前的最佳做法的CSS指出，應在頂部，以便為     逐步呈現。

在IE @import 行為一樣使用 <link> 在頁面的底部，所以最好不要使用它。

頂端


避免過濾器

標籤：的CSS

在IE專有 AlphaImageLoader 過濾器的目的是為了解決問題與半透明真彩色PNG圖像在IE版本“7。     在此過濾器的問題是，它阻止渲染和凍結的圖像瀏覽器，而被下載。     它還增加內存消耗和應用每個元素，而不是每幅圖像，所以問題是成倍增加。

最好的辦法是避免 AlphaImageLoader 使用完全正常人格PNG8相反，這是在IE的罰款。     如果您確實需要 AlphaImageLoader，使用下劃線劈 _filter 為了不懲罰你的IE7的+用戶。

頂端


優化圖片

標籤：影像

經過設計師完成與創建的圖像為您的網頁，還有一些事情你可以先試用     這些圖像的FTP到您的Web服務器。

  • 您可以檢查的GIF，看看他們使用的是相應的調色板大小         以色數在圖像。使用 imagemagick的 可以很容易地使用檢查
    查明，詳細Image.gif的
    當你看到一個圖像使用4種顏色和256色“槽”的調色板，還有改進的餘地。
  • 嘗試轉換的GIF的PNG圖像，看看是否有儲蓄。很多時候，有。         開發人員常常毫不猶豫地使用PNG圖像由於在瀏覽器中支持有限，但現在事情過去。         唯一真正的問題是α-真彩色透明PNG圖像，但話又說回來，GIFs是不正確的顏色，不         支持可變透明度也。         因此，任何一個GIF可以做一個調色板巴布亞新幾內亞（PNG8）可以做太多（除動畫）。         這個簡單的imagemagick的命令的結果是完全安全使用         PNG圖像：
    轉換Image.gif的image.png
    “我們所要說的是：讓平機會啦！”
  • 跑 pngcrush （或任何其他巴優化工具）在所有的PNG圖像。例如：
    pngcrush image.png -物權爾阿拉-減少，破解result.png
  • 運行jpegtran您的所有JPEG文件。此工具無損JPEG操作，如旋轉，也可用於優化         並刪除無用的意見和其他信息（如EXIF信息）由您的圖片。
    jpegtran拷貝沒有，優化完美src.jpg dest.jpg

頂端


優化的CSS子畫面

標籤：影像

  • 安排在雪碧圖像水平垂直，而不是通常會導致在一個較小的文件大小。
  • 結合在一個類似顏色的精靈可以幫助您保持色彩數低，最好在256色等，可安裝在PNG8。
  • “要移動友好”，不留大的圖像之間的差距在雪碧。這不會影響文件的大小一樣         但需要較少的內存為用戶代理來解壓縮圖片的像素圖。         100 × 100圖像萬像素，在1000x1000 100萬像素

頂端


不要在HTML中尺度圖像

標籤：影像

不要使用更大的圖片比你需要的，因為你可以設置寬度和高度在HTML中。     如果您需要
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那麼你的圖像（mycat.jpg）應100x100px而不是縮小500x500px形象。

頂端


小製作收藏夾圖標和可緩存

標籤：影像

的favicon.ico是一個形象，停留在您的服務器的根。     這是一個必要的邪惡，因為即使你不關心它的     瀏覽器也要求它，所以最好不要回复了 404未找到。     此外，由於它是在同一台服務器，餅乾發送每次的要求。     這個形象也干擾了下載序列，例如當你在IE請求     額外的組件在OnLoad，該圖標將會被下載之前，這些額外的組件。

因此，為了減輕弊端有一個收藏夾圖標，確保：

  • 它的小，最好在每1000。
  • 設置Expires頭與你感到舒服（因為你不能重命名，如果你決定改變它）。         你或許可以安全地設置Expires頭幾個月的未來。         您可以檢查最後修改日期您當前的收藏夾圖標作出明智的決定。

imagemagick的 可以幫助您創建的小網站圖示

頂端


25K型下保持組件

標籤：手機

此限制是有關事實，iPhone將不緩存組件大於25K型。     請注意，這是 壓縮 大小。這是很重要minification     僅僅因為gzip壓縮可能是不夠的。

欲了解更多信息檢查“性能研究，第5部分：iPhone可緩存-成為棒“謝伊的韋恩和滕尼托伊雷爾。

頂端


包元件集成在一個多部分文件

標籤：手機

包裝元件集成在一個多部分文件，就像是一個帶有附件的電子郵件，     它可以幫助你獲取幾個部分組成一個HTTP請求（記住：HTTP請求貴）。     當您使用此方法，首先檢查用戶代理支持它（iPhone不）。

頂端