嗯...最近在看這個，移動優先索引。感覺很多人都在講，但好像有點誤會這個東西的意思。它不是一個選項，是 Google 現在就是這麼幹的。 簡單說，Google 現在是戴著「手機眼鏡」在看全世界的網站，用手機版的表現來決定你的排名。
所以，手機版網站的速度... 就變得很重要啊。但速度也不是單純看 PageSpeed Insights 那個分數就好... 那個分數有時候真的讓人很焦慮，尤其是手機版的分數常常很難看。 說真的，使用者體感比較重要。
所以，重點一句話是？
讓手機版網頁「感覺」快，而且內容跟電腦版一樣完整，Google 才好辦事。没了。
為什麼「只有手機版」快還不夠？
這就是大家常搞混的地方。移動優先「索引」（Mobile-First Indexing），重點是「索引」。Google 是用手機模擬器（Googlebot-Mobile）來抓你網站的資料，建立它的資料庫。 如果你手機版為了快，砍掉一堆內容、或是結構化資料不見了，那在 Google 眼中，你的網站就是那個「閹割版」的樣子，它根本不知道你完整內容是啥，排名自然會受影響。 所以內容對等（Content Parity）超重要的。
提升手機網站速度的6個關鍵指標... 我是這樣看的
好了，講重點。與其追著 PageSpeed 分數跑，不如回來看看這幾個指標，它們才真正影響使用者跟 Googlebot 的感受。尤其第一個，是新的大魔王。
-
INP (Interaction to Next Paint) - 互動到下一次繪製：這個是新來的，在 2024 年 3 月正式取代了以前的 FID。 簡單講，就是使用者點了按鈕、開了選單，到畫面「真的有反應」花了多久時間。 FID 只看第一次互動，但 INP 看的是整個過程中最慢的那個互動。 這更貼近真實使用情境，因為沒人只點一下就走嘛。這指標不好搞，常常跟複雜的 JavaScript 有關。
-
LCP (Largest Contentful Paint) - 最大內容繪製：這大家比較熟。就是畫面上那個「最大的東西」（通常是主圖或大標題）跑出來要多久。 這東西慢，使用者就會覺得你的網頁很空、沒東西，很可能就直接關掉了。Google 建議要在 2.5 秒內。 這不只是使用者感受，Googlebot 如果等太久沒看到主要內容，也可能就不等了，直接判定你這頁沒啥料。
-
CLS (Cumulative Layout Shift) - 累計版面配置位移：這個超討厭。你本來要點 A，結果上面突然掉下來一個廣告，害你點到 B 😠。這就是版面位移。CLS 就是在衡量頁面載入過程中，元素「亂跳」的程度。這個指標分數高，代表你的使用者體驗很差。
-
圖片優化（不只是壓縮）：這點老生常談，但很多人只做一半。除了壓縮，更重要的是用對「格式」。現在都推 WebP 或 AVIF，檔案小很多。 還有，一定要做「延遲載入 (Lazy Loading)」，就是使用者畫面還沒滑到的圖片，就先不要載入，可以大幅加快初始載入速度。
-
關鍵 CSS (Critical CSS)：想像一下，網頁的 CSS 像衣服。一般的做法是等所有衣服（全部 CSS）都下載完，才一次穿上（渲染畫面）。但這樣很慢。關鍵 CSS 的概念是，先把「第一眼會看到」的畫面樣式（例如頁首、標題）抓出來，直接內嵌到 HTML 裡，讓瀏覽器可以先穿上「內衣褲」，至少看起來不是裸體的。剩下的衣服再慢慢下載穿上就好。
-
伺服器回應時間 (TTFB)：這是一切的基礎。從瀏覽器發出請求，到收到伺服器回的第一個位元組要多久。 如果你家水管（主機）就不給力，後面再怎麼優化都有限。這點跟你的主機商、有沒有用 CDN 很有關係。在台灣的使用者，選擇台灣本地的主機，或是像 Cloudflare 這種在台灣有節點的 CDN 服務，TTFB 表現通常會好很多。相對的，如果你的主機在美國，那台灣使用者連線就一定會慢一點。
常見的優化迷思或錯誤
整理一下常看到的幾個...嗯...天坑吧。
| 優化項目 | 天真的想法 😵 | 比較實際的做法 🤔 |
|---|---|---|
| INP 優化 | 這是什麼？能吃嗎？反正我網站沒人用吧... | 用 Chrome 開發者工具的 Performance 面板錄製一下，看看是哪個 JS 任務卡住了主線程。 很多時候是第三方腳本（像聊天外掛）在搞鬼。 |
| LCP 優化 | 我主圖很大張耶，就是要高清啊！慢慢載入才有神秘感。 | 主圖用 WebP 格式、設定 `fetchpriority="high"` 讓它優先載入。不要用 JS 去動態載入 LCP 元素，那會被延遲。 |
| 內容對等 | 手機螢幕那麼小，放那麼多字誰要看？精簡版就好啦！ | 內容要一樣，但「呈現方式」可以不同。用 `accordion` 或 `tab` 把內容收合起來，但 HTML 裡都要有。Googlebot 會去看原始碼。 |
| PageSpeed 分數 | 我要衝到 100 分！99 分都是不及格！ | 分數是參考，重點是 Core Web Vitals 的三個指標（LCP, INP, CLS）有沒有「及格」。Field Data（真實使用者數據）比 Lab Data（實驗室數據）更重要。 |
所以，下一步該做什麼？
說真的，不用太焦慮。先去跑一下 Google PageSpeed Insights，但不要只看分數。 重點是看「核心網頁指標」那區，你的 LCP、INP、CLS 是不是綠色的。如果不是，報告下面會給你一些建議，從 LCP 開始修通常最有感。
然後，檢查一下你手機版網站的內容，是不是跟電腦版一樣完整。特別是標題（H1, H2...）、結構化資料、內部連結，這些都不能少。
...嗯，差不多就這樣吧。一次做一點就好。
你們自己網站... 有跑過 PageSpeed Insights 嗎？手機分數多少？有點好奇...
