欸，最近在想一個東西... 關鍵 CSS
嗯...最近在看一個東西，叫做「關鍵 CSS」（Critical CSS）。 聽起來很技術，但其實概念蠻簡單的。你想想，開網頁的時候，是不是很討厭看到一片空白、等很久？
關鍵 CSS 就是為了解決這個問題。簡單說，就是先把使用者第一眼會看到的畫面（也就是「首屏」或 "above-the-fold"）需要的樣式（CSS）抓出來，直接塞進網頁的 HTML 裡。 這樣瀏覽器一拿到 HTML，就能馬上畫出上半部的樣子，使用者會感覺「哇，好快！」，剩下的東西再慢慢載入就好。 這對使用者體驗跟 SEO 都蠻重要的，特別是 Google 一直在講的 Core Web Vitals（核心網路生命體徵）。
先說結論：為什麼這東西重要？
一句話：它可以直接改善 LCP（最大內容繪製），這是 Core Web Vitals 的一個核心指標，會影響你的 SEO 排名。 頁面感覺變快，使用者比較不會跳走，Google 也會給你比較好的分數。 算是一舉兩得吧。🤔
實際上是怎麼做的？
概念不難，但實作起來有點瑣碎。大致上就是三個步驟：
- 找出關鍵 CSS：你要先確定哪些 CSS 是渲染首屏內容「絕對必要」的。這通常包括 header、導覽列、主視覺或標題的樣式。
- 內嵌到 HTML：把找出來的這些 CSS，直接用