所以，前端效能優化到底是在優化什麼？
最近蠻多人問前端效能優化到底要從哪裡下手，網路上一堆文章列了十幾二十條，看得眼花撩亂。老實說，你不用全部都做。今天我們不搞那種清單式的東西，我想直接聊聊幾個... 我自己覺得最有感、CP 值最高的東西。這比較像是我在整理筆記，想到什麼講什麼，可能會有點跳躍，但應該比較接近真實世界會遇到的狀況。
重點一句話
與其追求做完 100 件事，不如先找到那 3 件能讓速度提升 80% 的事。通常都跟「第一次載入時，到底給了使用者多少東西」有關。
最大的魔王：關鍵渲染路徑 (CRP)
好，第一個一定是這個，Critical Rendering Path，關鍵渲染路徑。聽起來很學術，但講白了就是，從使用者在瀏覽器輸入網址按下 Enter，到畫面上真的看到東西（比如說網站的標題或第一張圖），中間這段過程就叫 CRP。這段路越順，使用者感覺就越快。
你可以想像成點餐。你點了一份套餐，廚房（瀏覽器）要先拿到你的菜單（HTML），然後去準備食材（下載 CSS、JS），接著開始料理（解析程式碼、計算排版），最後才把菜端到你面前（畫到螢幕上）。
如果你的菜單寫得亂七八糟，或是一開始就點了十道菜，那廚房肯定會手忙腳亂，出菜自然就慢了。
所以，到底要怎麼做？
- 把最重要的 CSS 挑出來內聯 (inline)：使用者第一眼會看到的畫面（above-the-fold），它需要的 CSS 樣式，就那麼一小撮。把這一小撮直接塞進 HTML 的
裡，剩下的用非同步方式載入。這樣瀏覽器不用等全部 CSS 下載完才開始畫，速度感會差很多。 - 讓 JS 不要擋路：大部分的 JavaScript 其實沒那麼緊急。比如分析工具的 code、聊天外掛...這些都不是第一時間要有。在