【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
以下是 PageSpeed 黃金法則：優化關鍵的渲染路徑時需要注意什麼，以及其中緣由。
消除阻塞渲染的 JavaScript 及 CSS
為了儘快達到首次渲染，你想要最小化和（有可能的）消除關鍵資源的數量，最小化關鍵位元組的下載，以及優化關鍵路徑長度。
優化 JavaScript 的使用
JavaScript 資源預設是解析阻塞的，除非標記為非同步，或者通過特殊的 JavaScript 片段載入。解析器阻塞 JavaScript 迫使瀏覽器等待 CSSOM ，暫停 DOM 的構建，大大延遲了首次渲染時間。
推薦用非同步 JavaScript 資源
非同步資源不阻塞文件解析，允許瀏覽器避開 CSSOM 優先順序執行指令碼。通常，指令碼設定非同步，也意味著它不是首次渲染必須的 —— 考慮在初始渲染之後載入非同步指令碼。
延遲解析 JavaScript
任何非必須的指令碼（初次渲染時與構建可見內容無關的指令碼）都應該被延遲，為了最小化瀏覽器渲染頁面的工作量。
避免耗時執行的 JavaScript
長時間執行的 JavaScript 阻塞瀏覽器構建 DOM，CSSOM，及渲染頁面。那麼，任何與初次渲染無關的初始化邏輯和功能應該延遲執行。如果很長的初始化序列需要執行，考慮分割成幾個階段，讓瀏覽器可以間隔處理其他的事件。
優化 CSS 使用
CSS 是構建渲染樹必須的，在頁面構建初期 JavaScript 常常會阻塞 CSS 。你應該確保任何不必要的 CSS 標記為非關鍵資源（例如 print 或者其它的 media queries 媒體查詢），關鍵 CSS 的數量儘可能減少，傳輸時間儘可能的縮小。
把 CSS 放入文件的 head 標籤內
所有 CSS 資源應該儘早指定在 HTML 文件中，這樣瀏覽器可以儘早發現 標籤，儘早派發 CSS 請求。
避免使用 CSS imports
CSS import（@import）從另一個樣式表引入樣式。這種用法應該避免，因為它會把額外的伺服器往返引入關鍵路徑：當帶有 @import 的 CSS 樣式表被接收和解析完以後，引入的 CSS 資源才會被發現。
內嵌阻塞渲染的 CSS
為獲得最佳效能，你也許會把關鍵的 CSS 直接內嵌到 HTML 文件中。這樣為關鍵路徑消除了額外的伺服器往返，如果做的正確，可用於實現“一次往返”的關鍵路徑長度，其中只有 HTML 是一個阻塞資源。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
