網站性能（谷歌網站性能分析）

谷歌過的同學都知道，谷歌非常快，那麼問題來瞭，它為什麼這麼快呢？這就是今天我們要學習的主題，它當然不是有什麼獨立的黑魔法，而是一系列的技術加成的效果，我們今天就是探究這些技術，當然很多同學可能谷歌不瞭，這不是我們討論的主題范疇。概述谷歌的服務基本上都很快，但是本文我們僅以谷歌搜索結果頁面為例子予以說明。谷歌"request metrics"，其結果基本上是秒出。谷歌如何做到這樣迅速地加載結果的。我們就一起來分析。搜索結果頁面統計為瞭分析頁面加載效果，我們要用瀏覽器的開發調試工具，在瀏覽器F12即可跳出開發人員工具。我們點擊"網絡"標簽，然後F5刷新頁面，然後看看頁面的加載統計信息加載搜索結果過程中發生瞭130個請求，共傳輸瞭707 KB（使用gzip壓縮），9個JS文件，104個圖像文件和0個 CSS文件與大多數站點比較，這是一個很"輕"的頁面加載，但還是有一百多個請求，四分之三的M字節的文件傳輸。總體而言，統計數據還可以，但是並不說明加載快速的原因。頁面樣式我們註意到，谷歌的請求中，沒有額外的CSS文件加載。瀏覽器沒有請求單個CSS文件，但是頁面的樣式卻不是亂的，肯定是通過什麼方式加載瞭，那我們看看其源碼，看看樣式是怎麼加載的。 從源碼來看，其使用瞭內聯的CSS，並所以樣式是與頁面響應一起發送出去。這允許瀏覽器即時呈現樣式化的內容，而無需等待外部資源的返回。但是還不僅僅是內聯CSS。內聯每個靜態資源Google非常重視內聯。我們通過其頁面源碼還註意到，谷歌不僅內聯樣式，連頁面用的JavaScript也是內聯的。我們用調試工具對頁面運行一些選擇器：可以看到頁面上所有腳本和樣式中，除2個外部JavaScript文件外，所有內容都是內聯的。（註：兩個外部腳本會動態加載其他JS文件，所以頁面加載時總共有9個JS文件被加載）。僅僅加載頁面為瞭說明谷歌內聯靜態資源概念的程度，我們選擇僅加載HTML。沒有其他外部資源。如果沒有外部JavaScript，沒有外部圖像，沒有外部任何東西。僅保存瞭谷歌的HTML，並關閉網絡將其打開。看起來如何？結果也沒有太大變化，所有搜索結果都還帶有圖標。隻是漢堡菜單不起作用瞭，圖像輪播末尾也缺少其圖像。除此之外一切看起來都正常。URI內聯圖像在統計頁面，我看到頁面加載期間加載瞭104個圖像文件。但是在僅加載頁面文件時候大多數圖像都還工作，這又是個什麼黑魔法呢？谷歌對其頁面的大多數圖像進行巧妙的優化。如果我們在檢查器中查看圖標圖像，可以看到圖像具有特殊的srcURI：用瞭數據URI，二進制圖像內容是經過Base64編碼的，直接插入到src屬性中。使用數據URI是谷歌使用內聯資源的另一種方式。當要顯示很多小圖像時，這是一種完美的技術。但是如果對加大圖像使用數據URI方法則會有問題，因為它會使頁面大小過大。這就上部分中"圖像"輪播沒有圖像的原因，因為大圖片還使用外部文件請求。值得註意的是，這些Base64編碼圖像在Chrome開發人員工具的網絡頁簽中都被視為"請求"。這就解釋瞭為什麼"請求"那麼多圖像但頁面加載還是如此之快。瀏覽器不會通過網絡獲取它們：內聯速度谷歌最大可能內聯瞭JS，CSS和圖像文件，這表明它對於最大化性能的重要性。瀏覽器發出的每個外部請求都是會產生性能問題，要等待額外請求。谷歌在這裡沒有機會。用戶的瀏覽器收到谷歌的第一個響應後，便可以呈現90%的界面，而無需再次進行操作。這樣可以加快處理速度，還可以緩解緩太慢或不可靠的網絡。當然，讓用戶首先響應很快也很重要。90%並非100%，要獲得全功能體驗，還需要加載其他請求。內聯並不是Google要做的唯一一件事。谷歌的快速邊緣網絡優化頁面的內容很重要，但也許同樣重要的是通過網絡快速提交該頁面及其相關資源。全球分佈的基礎架構谷歌擁有一個強大的網絡，該網絡具有多層基礎架構，以確保處理盡可能接近最終用戶的請求。他們和世界各地的ISP有許多對等安排，並且具有全面的邊緣緩存設置，可確保幾乎始終在最近節點保存靜態資源。很難客觀衡量谷歌的網絡，像傳統工具的性能ping，但可以看的東西在我們的瀏覽器是如何執行。初始搜索結果響應開發人員工具關於搜索結果加載時間統計：向谷歌發出的初始請求到第一個字節（TTFB）的時間為145毫秒（藍色框）。也就是說，瀏覽器在145毫秒後開始接收來自谷歌的響應。完成讀取響應的總時間為880毫秒（橙色框）。這包括從谷歌下載整個響應的時間。請記住，由於谷歌積極的靜態內容內聯，一旦響應完成，便可以向用戶顯示90%的UI。靜態內容更快在頁面加載期間請求瞭一些外部JavaScript文件。這些文件的平均TTFB均為〜30ms。這表明服務器離的很近，瀏覽器之間的跳數很小。HTTP/3協議Google服務器不僅在附近，而且還使用新協議傳輸文件。可能已經在上面的屏幕截圖中註意到瞭第三列的值"h3-Q050"。那是因為瀏覽器正在通過HTTP/3與谷歌通訊。HTTP/3和HTTP/2之間的主要區別在於TCP不再是基礎連接協議。使用采用QUIC代替TCP，可以極大的提高性能。總結本文我們介紹瞭谷歌高性能頁面呈現的方法和技術，雖然我們大多數公司無法和谷歌一樣可以在網絡上或開發人員上投入大量資源來優化性能，但是其用來快速頁面的想法適用於任何站點：減少請求谷歌將其提升到瞭一個新的高度，但是避免網絡請求是提高Web性能的主要因素。捆綁資源以合並靜態內容仍然是一個好主意。如果可以內聯一些JavaScript或CSS，那就更好瞭。使用數據URI傳輸小圖像也有幫助。網絡不可靠，瀏覽器發出的每個請求都可能失敗或被延遲。這點上也有一些反面教材，比如有些站點為瞭追求好看，在網站首頁加載瞭高清圖片，圖片大小好幾個M，這樣不僅無助於頁面的呈現，也會導致用戶訪問網站卡頓，而且站點托管的網絡流量也會大把的花費銀子。CDN加速現代雲提供商提供瞭許多類似的功能。任何人都可以使用專用CDN和基於地理位置的動態DNS路由之類的功能。在CDN上托管靜態內容是獲得谷歌一樣一些網絡利益（包括HTTP/2或HTTP/3支持，HTTPS）的簡便方法。即使你不使用雲，可以第三方CDN，例如免費的CloudFlare可以免費提供從世界各地內容加載，而且可以讓站點可以實現無流量限制的網絡攻擊借Ddos防禦，HTTPS等加成。國內的百度雲加速，七牛雲加速，又拍雲加速等，也都提供瞭CDN加速和部分免費防禦的功能。