提升 PageSpeed Insights 分數，網站效能優化課程學習筆記

前陣子修改 WordPress 主題，跑了 PageSpeed Insights 分數，慘不忍睹，調整老半天，開啟 Gzip 壓縮才勉強拿到綠燈。看著 PageSpeed Insights 上頭的指示，什麼「清除前幾行內容中的禁止轉譯」，這句話我有看沒有懂阿，後來看別人的部落格介紹才知道意思。

覺得還是來深入了解優化的方法，充實點知識，正好看見 Udacity 提供效能優化的免費課程，就開始學習啦。

如果你也有興趣，免費課程的位置在下方，註冊帳號就可以開始上課了。課程以影片為主，會提供些參考資料，也可以在論壇與其他同學討論。我是覺得影片講解得很清楚，以兩個人互動的方式進行滿有趣的，一位是 Google 講師，一位假裝 Udacity 學生，有時候就覺得是在背稿，但又很正經 xdd

Website Performance Optimization Testing Course

想要優化網站，就必須知道網頁是如何呈現的，這一切要從 Critical Rendering Path (CRP) 說起。

CRP 指的是網頁呈現之前，瀏覽器經過所有與畫面渲染 (Rendering) 有關的資源路徑。使用者打開網頁後，瀏覽器取得 HTML 網頁原始碼，經過頗析器頗析標籤，建立 DOM Tree。

有了基本的 DOM 之後，接著就是穿上外衣了，CSS 樣式設定會變成 CSSOM Tree，等待與 DOM 合併渲染出最後的頁面。在這個過程中，假如 CSS 與 JavaScript 是由外部引入，頗析器會暫停解析 HTML，優先處理 CSS 與 JavaScript 。

因為 DOM 不可能沒有 CSS 這層樣式外衣就直接繪製，所以在請求外部資源的時候，必須乖乖等待資源載入，整個瀏覽器就卡住了，這個卡住的過程稱為「Render Blocking」，中文翻作禁止轉譯。所以在 PageSpeed Insights 之中看見這個字眼，就代表要調整外部載入的資源囉。

Critical Rendering Path。圖 / Udacity

CSS 有繼承的特性，先後順序與設定都會影像畫面呈現。下圖是由 CSS 轉為 CSSOM 的過程。

由 CSS 轉為 CSSOM 的過程。圖 / Udacity

優化的精神就是加快網頁顯示速度，最主要的目標有三個：Minimize Bytes ，降低 Critical Resource (關鍵資源) 的數量，減少 CRP 長度。

提升效能的目標與方法。圖 / Udacity

首先 Minimize Bytes 就是要降低網路傳輸的資料大小，這部分可以透過很多方法來達成，包括 Minify、Compress、Cache，主要是針對 HTML、CSS、JavaScript 進行優化，比如使用最小化/壓縮程式碼工具，設定伺服器、瀏覽器快取。

而 Critical Resource (關鍵資源) 指的是會阻擋頁面繪製的資源，比如剛剛提到由外部匯入的 CSS 與 JavaScript，而 CRP Length 就是阻擋資源的 Round trips。這麼說可能有聽沒有懂，借用課程中的截圖來說明：

課程範例。圖 / Udacity

這張圖很明顯，瀏覽器拿到 HTML 之後，又會再去 Request 兩個外部資源 (CSS 與 JavaScript)，因為這兩個文件都會造成 Blocking，加上一開始的 HTML，所以總共有 3 個 Critical Resource，而 CRP Length 也是 3。

根據這個例子，優化的方法大概如下：

看完教學與練習之後，其實還只是個略懂，翻閱 Optimizing Performance 文件的時候，發現還有很多小細節，等著去追尋

這堂課還滿不錯的，最後提供 Final Project 讓你試著優化看看，比較調整前後 PageSpeed Insights 的跑分差別。GitHub 位置如下，有興趣的話可以玩看看：

Website Performance Optimization portfolio project

在本機端跑 Server 之後，用 Ngrok 這個工具建立出對外網址，就可直接到 PageSpeed Insights 測分數，挺方便的。

什麼都沒有優化之前，先看一下分數。摁，很爛，不到 30 分，但是據課程所說，最後可以提升至 90 分以上，信心就來了 xd

我大致上做了以下調整，論壇上也有其他人的做法，覺得大同小異啦。有些人會丟掉 Google Analytics 或者是 Google Fonts，是可以加快沒錯，但實際還是要用這兩個啊…

最後部署到 GitHub Page 的分數，行動版與手機版都是 96 分 yaa

這個練習的分數最主要差別是在圖片，一開始 Pizza 圖檔有 2.2 MB，其實壓縮完分數就上來了，再來就是調整 Render Blocking 的問題。

後來用 Google 新推出的網頁效能檢測工具 Lighthouse 跑看看。其他都綠燈，就只有 Progressive Web App (PWA) 亮橘燈 xd。不過這個 PWA 就不是今天的重點啦。