網站的訪問速度，與用戶的體驗高度相關，從而還影響了SEO的效果。它是網站用戶體驗中最重要的元素。
本篇文章我們將結合Google Analytics，為讀者揭示影響網站速度，頁面加載速度的各種因素，並為您對網站速度的優化提供一些幫助。
Google Analytics是如何監測您的網站速度的？
Google Analytics使用HTML5 Navigation Timing 接口或裝有Google 工具欄的瀏覽器進行對網站速度進行跟踪。也就是說除了Safari，我們現有的Chrome瀏覽器、Firefox 7以上、Internet Explorer 9以上、Android 4.0以上，以及裝有谷歌工具欄的舊版Internet Explorer都可以正常跟踪頁面打開的速度。
請注意，在此我們用的是瀏覽器的API，所以說該偵測速度並不影響您網頁打開的速度本身。換句話說，Google Analytics對網頁速度的監測不會影響您的頁面打開速度，這裡不存在薛定諤的貓的問題。
默認情況下，Google Analytics只會對1%的樣本進行速度檢測。如果你需要更多的樣本，如果你的網站瀏覽的量並不充足，那麼你可以手動調高樣本的比例。當你使用經典的Google Analytics部署方法時，你可以添加下面的代碼，可以自定義樣本率：
ga(‘create’, ‘UA-XXXX-Y’, {‘siteSpeedSampleRate’: 10});
如果你使用的是gtag：
gtag(‘config’, ‘UA-XXXX-Y’, {‘site_speed_sample_rate’: 10});
上面的例子將樣本率提高到了10%。如果你使用Google Tag Manager來部署Google Analytics。那麼你只要在GA設置中添加該參數的設定即可。
頁面打開的整個過程分解
打開頁面是一個非常複雜的過程，我們可以用下面的流程圖進行拆解。
這整個流程可以給我們非常多的啟示：
頁面跳轉會影響我們的頁面打開時間
許多大型網站的內鏈有許多跳轉鏈，也就是說，當用戶點擊一個鏈接以後，需要進行多次跳轉以後才能達到目的頁面，這會影響頁面打開的速度。
在Google Analytics中也會記錄頁面跳轉所用的時間，因此站外的那些鏈接跳轉的時間也會被包含在內，畢竟這些跳轉時間以瀏覽器的API進行記錄。
DNS的解析時間是頁面打開時間的一部分
我們剛才說了，站外的那些跳轉。那些跳轉也需要進行DNS解析，這裡有許多不可控的因素，但是你完全是可以優化自己網站的DNS解析時間的。因此選取優秀的DNS解析服務器，對網站的加載速度有非常大的提升。
許多DNS解析服務會對不同的線路進行優化。如電信、聯通、移動、海外，甚至對於搜索引擎進行不同的優化。
您還可以使用預解析的方法（dns prefetch）加快這一過程。
HTTP連接的建立需要花費時間
大多數瀏覽器在同時只會開啟六個並行的線程進行HTTP連接，而一個複雜的頁面讀取往往需要建立上百個HTTP連接。因此您需要考慮是否使用HTTP2來加快頁面內容的傳輸速度。
HTTPS加密連接需要耗費額外的時間
我們看到HTTPS的連接需要額外的時間，但是我們認為這些時間是必要的，它極大地增強了網站的安全性。
一些大型網站，對於未登錄的用戶使用未加密的HTTP協議；而對登錄頁面和登陸後的用戶使用HTTPS協議，這也是對網站頁面加載速度的考慮。不過這樣的做法可能造成許多重複的頁面，不利於搜索引擎優化。
高性能的服務器，和簡單的程序腳本會提升網頁打開速度
當客戶端進行請求以後，服務器將會根據情況，計算、運行腳本，來獲得返回的內容。
當您使用Server-side-rendering（服務器端渲染）時，需要計算的工作量增加，響應的速度會變慢，但是這樣可以減輕搜索引擎蜘蛛對您網頁內容的理解進行的投入；反之，當您使用Client-side-rendering（客戶端渲染）時，您的服務器的負擔會減輕，返回的速度會變快，但是這樣搜索引擎需要花額外的資源，用CSS和JS去渲染您的頁面，來理解您的頁面內容。
我們需要對這兩種方法進行權衡，於是就有了Dynamic Rendering（動態渲染）和Hybrid Rendering（混合渲染）。篇幅有限，就不在這裡展開了。
DOM過程是頁面加載的重要內容
DOM 是Document Object Model（文檔對像模型）的縮寫。客戶端下載了服務器端傳來的HTML後將會依此建立DOM樹。
DOM樹決定了頁面元素的結構和內容，此外CSS文件還規定了各個DOM元素的展示方法，JS文件會潛在地對DOM樹進行增添和裁剪。
您或許聽說過一句老話，要把CSS放在<head></head>中，把JS放在頁面最後，就是這個道理。我們要最快畫出頁面的樣子，同時要保證JS不會對頁面的渲染，進行阻塞。
但現代的實際操作中，我們也會把部分CSS放在HTML中，這是為了減少請求，最快展示首屏的頁面內容。對字體來說，在字體下載完成前先展示內容，使用@font-face在下載完成後重新畫出頁面也是常用的增進體驗的方法。
Google Analytics中頁面讀取速度各指標的意義
我們再來回顧一下，GA眼中的頁面打開過程如下圖所示：
還有兩個指標無法用上圖解釋，那就是Document Interactive Time（文檔互動時間）和Document Content Loaded Time（文檔內容加載時間）。
文檔互動時間
文檔互動時間就是從開始訪問到文檔可以與用戶互動的這段時間。它對應了流程圖中Navigation Start到DOM Interactive之間的時間。
文檔互動時間越短，客戶實際等待的時間就越短。可以開始互動，意味著用戶可以上下滾動頁面，也可以點擊一些鏈接。但是頁面的下半部分可能還看不到。比如導航出來了，頁腳還沒有出來。
文檔內容加載時間
文檔內容加載時間就是從開始訪問到文檔內容除了延遲下載執行的那些元素之外已經完成的這段時間。它對應了流程圖中Navigation Start到DOM Content Loaded End之間的時間。此時仍然沒有DOM Complete，一些CSS、圖像和子框架可能還沒有加載完成。它的結束通常意味著JS可以開始執行了。
文檔內容加載時間越短，用戶可以看到完整頁面的時間就越早。這意味著用戶可以看到完整的頁面，並與其進行互動。這個時候可能圖片還沒有出來，只能看到圖片的替換文字，因為JS尚未執行幻燈片還是靜態的樣子。
參考這兩個指標，可能比頁面總加載時間更具科學性。
總結一下
本篇我們介紹了頁面加載的整個過程，並順帶講了部分加快頁面加載速度的方法。提高頁面加載速度是個非常大的話題，無法用一篇文章的篇幅來講透。
正如下圖沃爾瑪對頁面加載速度和轉化率關係的分析，我們需要重視的不僅僅是頁面速度與SEO的關係，而是把它看成真正影響你的收入的一個因素。
Google Analytics為我們提供了可靠的頁面加載速度的手段，由於基於瀏覽器，它不會因為GA腳本下載的延遲而發生偏差。你可以自由地調節樣本率，以對指標更好地理解來指導頁面速度的優化。