[ad_1]
在2018年，完全載入移動頁面的平均時間是 15秒。這大大高於谷歌建議的3秒載入時間。
因此，當然，減少總載入時間仍然是允許用戶儘可能快地進行交互的首要任務。
但頁面速度不僅僅是關於總頁面載入時間;它也是關於用戶在3（或15）秒內體驗的內容。考慮頁面的渲染效率至關重要。
這是通過優化關鍵渲染路徑以儘快到達第一個塗料來實現的。
基本上，您減少了用戶在空白屏幕上花費的時間以儘快顯示可視內容（請參閱下面的0.0）。
Google優化與未優化渲染的示例
有關如何執行此操作的完整過程，請參閱 Google的開發者指南文檔 （謝謝你，Ilya Grigorik），但我會特別關注一個重型擊球手：減少渲染阻擋資源。
什麼是關鍵渲染路徑？
關鍵渲染路徑是指瀏覽器在渲染頁面的過程中通過將HTML，CSS和JavaScript轉換為屏幕上的實際像素所採取的一系列步驟。
從本質上講，瀏覽器需要請求，接收和解析所有HTML和CSS文件（加上一些額外的工作）它將開始呈現任何視覺內容。
在瀏覽器完成這些步驟之前，用戶將看到一個空白頁面。
我該如何優化它？
改進關鍵渲染路徑涉及識別和分析關鍵資源（阻止頁面初始渲染的任何資源），並尋找機會：
- 通過延遲渲染阻塞資源來減少關鍵資源的數量。
- 通過優先處理首要內容並儘早下載所有關鍵資產來縮短關鍵路徑。
- 通過減少剩餘關鍵資源的文件大小來減少關鍵位元組數。
本文將重點介紹第1步 – 推遲渲染阻塞資源（即重新排列元素以提高效率，使其感覺體驗更快，而無需刪除內容）。
我為什麼要在乎？
嗯，沒有人比一百美元的人本人更坦率地說：
「時間就是金錢。」 – 本傑明富蘭克林
谷歌的用戶行為數據報告大多數用戶在大約3秒後放棄了一個慢速網站。
相反，Unbounce的頁面速度研究發現了這一點 將近四分之三 消費者表示，他們願意等待4秒或更長時間才能載入頁面。
是什麼賦予了？
「時間是一種幻覺。」 – 愛因斯坦
一個 研究 由消費者研究雜誌發表的文章表明，有兩種類型的時間：
- 目標時間：標準時鐘時間。
- 主觀時間：消費者對時間的感知。
過分關注客觀時間可能會有問題，因為人類（和我們的現實生活中的用戶）在估計時間方面是出了名的不好。
「當你玩得開心的時候過得很快。」 – 我的爸爸
人們對時間的感知是基於各種主觀因素。
其中包括它們是處於「被動等待」還是「主動等待」。在頁面渲染方面，這些可以定義為：
- 被動等待：用戶正在看一個空白的白色屏幕
- 活動等待：可視內容在頁面上呈現
INFORMS發表的研究發現，即使等待時間明顯相等，被動等待的人也會高估他們等待的時間。 + 36％。
同樣的概念激發了人們的廣泛使用 進度（或載入）欄 在計算中，因為它被發現可以減少焦慮，為用戶創造更積極的體驗。
「網頁沒有載入欄。因此，當頁面很慢時，訪問者不知道延遲是否會是另外500毫秒或15秒。也許永遠不會載入。後面的按鈕就在那裡「（Andy Crestodina，Orbit Media引用 Unbounce）。
同 許多研究 將頁面載入時間的減少與中的改進相關聯 有價值的KPI （轉換，跳出率，網站停留時間），改善網站延遲已成為許多組織的首選業務目標。
搜索引擎優化專業人士在指導這項工作方面處於獨特的地位，因為我們的角色通常是彌合業務目標與Web開發人員優先順序之間的差距。
能夠審核網站，分析結果並確定需要改進的領域有助於我們 與開發人員合作 提高績效並將結果轉化為關鍵利益相關者。
返回渲染阻止資源
優化關鍵渲染路徑的主要目標是優先考慮渲染有意義的，重疊內容所需的資源。
為此，我們還必須識別渲染阻塞資源並對其進行優先順序劃分 – 這些資源不是載入首屏內容所必需的資源，並且可以儘可能快地阻止頁面呈現。
渲染阻止CSS
CSS本身就是渲染阻塞。
在能夠請求，接收和處理所有CSS樣式之前，瀏覽器不會開始呈現任何頁面內容。
這可以避免在瀏覽器嘗試呈現未樣式化內容時出現的負面用戶體驗。
沒有CSS渲染的頁面幾乎無法使用，並且大部分（如果不是全部）內容都需要重新繪製。
回顧頁面呈現過程，灰色框表示瀏覽器請求和下載所有CSS資源所花費的時間，因此它可以開始構建CCSOM樹（CSS的DOM）。
瀏覽器完成此操作所需的時間可能會有很大差異，具體取決於CSS資源的數量和大小。
「CSS是一種渲染阻塞資源。儘快並儘快將其發送給客戶，以優化首次渲染的時間。「
渲染阻止JavaScript
等等，怎麼樣 JavaScript的？
與CSS不同，瀏覽器不需要下載和解析所有JavaScript資源來呈現頁面，因此從技術上講，這不是一個「必需」步驟（*大多數現代網站需要JavaScript來實現其首要體驗）。
然而，當瀏覽器在初始呈現頁面之前遇到JavaScript時，頁面呈現過程將暫停，直到執行JavaScript之後（除非使用defer或async屬性另行指定 – 稍後將詳細介紹）。
例如，將JavaScript警報功能添加到HTML塊頁面呈現中，直到JavaScript代碼執行完畢（當我在下面的屏幕錄製中單擊「確定」時）。
這是因為JavaScript具有處理頁面（HTML）元素及其相關（CSS）樣式的能力。
由於JavaScript理論上可以更改頁面上的整個內容，因此瀏覽器會暫停HTML解析以下載和執行JavaScript以防萬一。
瀏覽器如何處理JavaScript，圖像來自 代碼比特
「JavaScript還可以在呈現頁面時阻止DOM構造和延遲。提供最佳性能……從關鍵渲染路徑中消除任何不必要的JavaScript。「
如何識別渲染阻止資源
識別關鍵渲染路徑並分析關鍵資源：
- 使用組織運行測試，然後單擊「瀑布」圖像。
- 專註於綠色「開始渲染」行之前請求和下載的所有資源。
分析瀑布視圖;查找綠色「開始渲染」行之前請求的CSS或JavaScript文件，但對於載入首屏內容並不重要。
在識別（可能）渲染阻止資源之後，測試將其刪除以查看是否受到影響的上層內容。
在我的示例中，我注意到一些對Google Maps API的JavaScript請求似乎並不重要。但是，測試刪除這些腳本以測試網站上的轉換元素如何影響體驗是一個好主意。
要在瀏覽器中測試如何推遲這些資源會影響首屏內容：
- 在Chrome隱身窗口中打開該頁面（頁面速度測試的最佳做法，因為Chrome擴展程序可能會導致結果偏差，而我恰好是Chrome擴展程序的收集者）。
- 打開Chrome DevTools（ctrl + shift + i）並導航到 「網路」面板中的「請求阻止」選項卡。
- 選中「啟用請求阻止」旁邊的框，然後單擊加號。
- 鍵入模式以阻止您已識別的資源，儘可能具體（使用*作為通配符）。
- 單擊「添加」並刷新頁面。
減少渲染阻塞的方法
確認資源對於呈現摺疊內容並不重要之後，請探索可用於推遲資源和改進頁面呈現的不同方法。
| 方法 | 碰撞 | 適用 |
| HTML底部的JavaScript | 低 | JS |
| 非同步或延遲屬性 | 介質 | JS |
| 定製解決方案 | 高 | JS / CSS |
| CSS媒體查詢 | 低高 | CSS |
將JavaScript放在HTML的底部
如果你曾經參加過Web Design 101課程，那麼這個課程可能很熟悉：在HTML頂部放置CSS樣式表的鏈接
並將鏈接放在HTML底部的外部腳本 。使用JavaScript警報功能回到我的示例，該功能在HTML中越高，瀏覽器下載和執行的越快。
放置在HTML頂部的JavaScript示例，頁面呈現會立即被alert函數阻止，並且不會呈現可視內容。
放置在HTML底部的JavaScript示例，在頁面呈現被警報功能阻止之前出現一些可視內容。
雖然將JavaScript資源放在HTML的底部仍然是標準的最佳實踐，但該方法本身對於從關鍵路徑中消除渲染阻塞腳本是次優的。
繼續將此方法用於關鍵腳本，但探索其他解決方案以真正推遲非關鍵腳本。
使用Async或Defer屬性
該 非同步屬性 向瀏覽器發出信號以非同步載入JavaScript，在資源可用時獲取腳本（而不是暫停HTML解析）。
獲取並下載腳本後，在執行腳本時暫停HTML解析。
瀏覽器如何使用async屬性處理JavaScript，來自Bits of Code的圖像
該 推遲屬性 向瀏覽器發出信號以非同步載入JavaScript（與async屬性相同）並等待執行JavaScript直到HTML解析完成，從而節省了額外的成本。
瀏覽器如何處理帶有延遲屬性的JavaScript，來自Bits of Code的圖像
這兩種方法都相對容易實現，有助於縮短瀏覽器解析HTML的時間（頁面呈現的第一步），而不會顯著改變內容在頁面上的載入方式。
非同步和延遲是您網站上「額外內容」（社交分享按鈕，個性化側邊欄，社交/新聞源等）的良好解決方案，這些解決方案很好，但不會影響主要用戶體驗。
使用自定義解決方案
還記得令人討厭的JS警報阻止我的頁面被渲染嗎？
使用「onload」事件添加JavaScript函數（來自 帕特里克塞克斯頓 在Varvy.com上）一勞永逸地解決了這個問題。
下面的腳本使用onload事件僅在所有初始頁面內容（其他所有內容）完成載入後將其從關鍵路徑中刪除後才調用外部資源「alert.js」。
用於調用警報功能的JavaScript onload事件 
僅在完全載入所有初始頁面內容後才顯示警報。
這不是一個通用的解決方案。
雖然它可能對最低優先順序的資源（即事件監聽器，頁腳中的元素等）有用，但對於位於下方的重要內容，您可能需要不同的解決方案。
與您的開發團隊合作，找到最佳解決方案，以改善頁面呈現，同時保持最佳用戶體驗。
使用CSS媒體查詢
CSS媒體查詢 可以通過標記僅在瀏覽器解析CSS時使用的某些時間和設置條件的資源來解鎖渲染（基於列印，方向，視口大小等）。
無論如何都會請求和下載所有CSS資產，但非阻塞資源的優先順序較低。
示例CSS媒體查詢，告訴瀏覽器除非正在列印頁面，否則不會解析此樣式表。
如果可能，使用CSS媒體查詢告訴瀏覽器哪些CSS資源對於呈現頁面至關重要（而且不是）。
TL; DR
- 優化關鍵渲染路徑的目標是儘快為用戶提供有意義的內容。
- 延遲渲染阻止CSS和JavaScript允許重要的，重疊內容更快地渲染。
- 要識別渲染阻止資源：
- 在開始渲染線之前查找非關鍵資源（通過webpagetest.org）。
- 通過Google Dev Tools測試刪除資源，以查看頁面內容的受影響程度。
- 確定後，與開發人員合作，找到推遲渲染阻塞資源的最佳解決方案。
圖片來源
特色圖片：作者截圖，2019年7月
所有截圖均由作者拍攝，2019年7月