提升PageSpeed Insights 分數,網站效能優化課程學習筆記 | 提升網站效能
前陣子修改WordPress主題,跑了PageSpeedInsights分數,慘不忍睹,調整老半天,開啟Gzip壓縮才勉強拿到綠燈。看著 PageSpeedInsights上頭的指示,什麼「清除前幾行內容中的禁止轉譯」,這句話我有看沒有懂阿,後來看別人的部落格介紹才知道意思。覺得還是來深入了解優化的方法,充實點知識,正好看見Udacity提供效能優化的免費課程,就開始學習啦。Udacity網站效能優化課程如果你也有興趣,免費課程的位置在下方,註冊帳號就可以開始上課了。課程以影片為主,會提供些參考資料,也可以在論壇與其他同學討論。我是覺得影片講解得很清楚...
前陣子修改 WordPress 主題,跑了 PageSpeed Insights 分數,慘不忍睹,調整老半天,開啟 Gzip 壓縮才勉強拿到綠燈。看著 PageSpeed Insights 上頭的指示,什麼「清除前幾行內容中的禁止轉譯」,這句話我有看沒有懂阿,後來看別人的部落格介紹才知道意思。
覺得還是來深入了解優化的方法,充實點知識,正好看見 Udacity 提供效能優化的免費課程,就開始學習啦。
Udacity 網站效能優化課程如果你也有興趣,免費課程的位置在下方,註冊帳號就可以開始上課了。課程以影片為主,會提供些參考資料,也可以在論壇與其他同學討論。我是覺得影片講解得很清楚,以兩個人互動的方式進行滿有趣的,一位是 Google 講師,一位假裝 Udacity 學生,有時候就覺得是在背稿,但又很正經 xdd
Website Performance Optimization Testing Course[1]網頁如何呈現?想要優化網站,就必須知道網頁是如何呈現的,這一切要從 Critical Rendering Path (CRP) 說起。
CRP 指的是網頁呈現之前,瀏覽器經過所有與畫面渲染 (Rendering) 有關的資源路徑。使用者打開網頁後,瀏覽器取得 HTML 網頁原始碼,經過頗析器頗析標籤,建立 DOM Tree。
有了基本的 DOM 之後,接著就是穿上外衣了,CSS 樣式設定會變成 CSSOM Tree,等待與 DOM 合併渲染出最後的頁面。在這個過程中,假如 CSS 與 JavaScript 是由外部引入,頗析器會暫停解析 HTML, 優先處理 CSS 與 JavaScript 。
請支持《傑瑞窩在這》原創文章。原文標題:提升 PageSpeed Insights 分數,網站效能優化課程學習筆記,原文網址:https://jerrynest.io/web-performance-opt/[2][3]因為 DOM 不可能沒有 CSS 這層樣式外衣就直接繪製,所以在請求外部資源的時候,必須乖乖等待資源載入,整個瀏覽器就卡住了,這個卡住的過程稱為「Render Blocking」,中文翻作禁止轉譯。所以在 PageSpeed Insights 之中看見這個字眼,就代表要調整外...