搜尋「手機網站設計」的人，很多時候心裡想的是配色、版面、按鈕好不好按這類視覺與操作體驗的問題。這篇文章刻意不談這些，要專門聚焦在另一個同樣重要、卻常常被忽略的面向：效能。手機網站做得再漂亮，如果在真實的行動網路環境下要等好幾秒才跑得出畫面，使用者往往等不到看清楚版面就已經離開。這篇文章會從圖片壓縮、延遲載入、程式碼精簡到行動網路速度優化，逐一拆解手機網站效能工程實際會處理的幾個技術環節。
為什麼手機網站的效能問題比桌機更關鍵
桌上型電腦多半連接的是相對穩定的有線或固定式無線網路，處理器與記憶體資源也比較充裕。手機的使用情境完全不同：訊號可能在捷運上忽強忽弱、行動網路方案可能有流量考量、裝置本身的處理能力也普遍比不上桌機。這些先天限制加在一起，代表同樣一個網頁，在手機上實際被感受到的載入時間，往往比在桌機上慢得多，也更容易因為使用者等不及而直接離開頁面。
另外，行動裝置使用者的行為模式通常是「順手查一下」，耐心門檻本來就比坐在桌機前的使用者更低，這也是為什麼手機網站的效能問題，值得單獨拉出來當成一個專門的工程課題來處理，而不是等到視覺設計都做完才順便看一下。
圖片是手機效能最大的負擔：壓縮與格式選擇
絕大多數網站效能不好的根本原因，第一名幾乎都是圖片。很多網站直接把相機或手機拍出來的原始解析度照片上傳到網頁上，檔案動輒好幾MB，瀏覽器卻只是把它縮小顯示在一個小小的區塊裡，等於讓使用者的行動網路白白多下載了大量根本用不到的畫素。
比較好的做法，是先把圖片壓縮到符合實際顯示尺寸的大小，並且考慮改用壓縮效率更好的新一代圖片格式，例如WebP這類格式，通常可以在肉眼幾乎察覺不出畫質差異的前提下，把檔案大小壓得比傳統格式小上不少。有些網站系統也支援「響應式圖片」的做法，也就是同一張圖片準備好幾種不同尺寸，讓瀏覽器依照使用者裝置的實際螢幕寬度，自動選擇載入哪一個尺寸版本，而不是不分裝置都下載同一份最大尺寸的檔案。
延遲載入：避免一次載入整頁的所有資源
延遲載入（Lazy Loading）的概念，是讓網頁一開始只優先載入使用者馬上會看到的畫面範圍，通常稱為首屏，至於使用者還沒捲動到的區域，裡面的圖片或影片先不急著載入，等到使用者真的把畫面捲到那個位置附近，才開始載入那些內容。
這樣做的好處很直接：首屏畫面可以更快完成呈現，使用者不用等整頁所有圖片都下載完才看得到內容；對於沒有把整頁捲到底的使用者來說，那些從來沒被看到的圖片也就從來不會被下載，連帶省下行動網路的流量。要留意的是，延遲載入要設計得當，不能讓使用者捲動到某個區域時畫面還是一片空白要再等一下才跑出來，這中間的載入時機拿捏，是實作時真正需要花心思調整的地方。
精簡程式碼與減少不必要的外掛
除了圖片之外，網頁背後載入的程式碼（也就是CSS樣式與JavaScript程式）也會直接影響效能。尤其是用WordPress這類系統架站的網站，常見的狀況是為了各種功能陸續安裝了大量外掛，每個外掛可能都各自載入自己的程式碼檔案，累積起來就會讓瀏覽器要處理的資源量大幅增加。
- 定期盤點目前啟用中的外掛，移除已經沒在使用或功能重複的項目
- 非必要的程式碼盡量延後載入，不要讓它擋在畫面正式顯示之前
- 能合併的檔案盡量合併，減少瀏覽器要分別發出的請求數量
- 移除或壓縮程式碼裡多餘的空白與註解，縮小檔案體積
這部分的調整通常需要一些技術背景，如果不確定該從何下手，至少可以先養成習慣：每次安裝新外掛或新功能之前，先想一下是不是真的必要，能不裝就不裝，這是最簡單、也最不需要技術能力就能做到的第一步。
善用瀏覽器快取與內容傳遞網路
瀏覽器快取的概念，是讓使用者第一次造訪網站時下載過的檔案（例如樣式、字型、不常變動的圖片），暫時儲存在自己的裝置上，下次再造訪同一個網站時，可以直接使用先前存下來的版本，不用整批重新下載一次，對於會重複造訪的使用者來說，可以明顯縮短之後幾次造訪的等待時間。
另外一個常見的技術做法是內容傳遞網路（CDN），簡單說就是把網站的靜態資源（圖片、樣式檔等）分散存放在世界各地，或至少台灣周邊，的多個伺服器節點上，讓使用者實際下載資源時，是從距離自己最近的節點取得檔案，而不用每次都跨很長的距離向同一台主機要資料。對於使用者位置本來就比較分散、又常常在移動中切換基地台的行動網路使用情境來說，這個做法特別能感受到差異。
因應行動網路不穩定的漸進式載入設計
行動網路的訊號品質本來就不像固定式網路那麼穩定，使用者可能一下子走出室內收訊變差，也可能同時在無線網路與行動網路之間切換。做手機網站效能優化時，除了前面提到的各項技術手段，設計思維上也應該預先假設「網路隨時可能變慢」這件事會發生。
實際做法包括：優先確保畫面最上方、使用者第一眼會看到的內容能盡快呈現，不要讓這些關鍵內容被排在一堆使用者根本還沒看到的次要資源後面才載入；避免在頁面一開啟就自動播放大型影片這類會佔用大量頻寬的元素；並且讓整個頁面在網路速度比較慢的情況下，至少核心的文字內容與功能還能正常使用，不會因為某個資源還沒載入完成就整個畫面卡住或跑版。
如何檢視自己網站目前的手機效能
要知道一個網站的手機效能實際表現如何，可以使用Google官方提供的PageSpeed Insights等工具，直接輸入網址就能看到針對這個頁面的分析報告與具體建議項目；Search Console裡也有Core Web Vitals相關的報告，可以看出網站在真實使用者裝置上的載入體驗表現。
比較實際的做法，是把這件事當成一個持續的過程來看待：先用工具找出目前拖慢效能的主要原因，針對性地調整，可能是壓縮某幾張特別大的圖片，也可能是移除某個很少用到的外掛，調整完再重新檢測一次，確認方向是對的，再繼續往下一個項目處理，而不是期待一次調整就能徹底解決所有問題。
常見問題
手機版效能不好，真的會影響到SEO表現嗎？
兩者確實有關聯，但不是單純的因果關係。Google目前是以手機版內容作為主要評估依據，也就是所謂的行動優先索引，而載入速度與使用體驗是評估一個網站品質時會被納入考量的其中一項因素，並不是唯一決定名次高低的關鍵。把效能做好，是在為整體使用體驗打好基礎，並不代表效能提升了，名次就一定會跟著往上跑。
把圖片壓縮之後，畫質會不會明顯變差？
現在常見的圖片壓縮技術，通常可以在肉眼難以察覺畫質差異的前提下，大幅縮小檔案體積，重點在於壓縮的比例要拿捏得當，而不是不分青紅皂白一律壓到最低畫質，適度壓縮跟犧牲畫質，並不是同一件事。
延遲載入會不會讓使用者滑到某個區塊時，看到的是一片空白？
如果實作方式正確，不應該出現這種狀況。正確的做法是讓使用者一開始就先看到首屏需要的完整內容，只有畫面往下捲動到還沒出現過的區域，系統才會即時開始載入該處的圖片或影片，而且通常會在使用者真正捲到那裡之前提早一點點就開始準備，盡量避免出現明顯的空白等待感。
這些效能調整，一般人自己可以動手做嗎？
部分項目，例如上傳圖片前先手動壓縮、盤點並移除不需要的外掛，一般人可以自己嘗試操作；但牽涉到程式碼層級的調整、伺服器端快取設定，或是CDN串接這類項目，通常需要一定的技術背景，如果自己不熟悉，建議還是找有相關經驗的人員協助處理，避免調整過程中不小心影響到網站原本的正常運作。
如果你不確定自己的網站在手機上實際跑起來的速度到底如何，也不知道問題出在哪個環節，歡迎找創昇SEO聊聊。我們提供免費的網站健診服務，會實際檢視你目前的網站狀況並給出具體建議；如果人在台灣，也提供全台免費到府諮詢，可以當面把問題講清楚，一起討論下一步該怎麼調整。