為什麼要在前端做效能優化？

為什麼要在前端做效能優化？#

在開始學習各種優化技巧之前，先釐清「為什麼要做」非常重要。一旦目的清楚，才能在實作時判斷哪些做法值得投入、哪些是過度優化。整體而言，前端效能優化（Performance Optimization）的核心理由可以歸納為三個層面：

前端是直接面對使用者的一層，使用者所感受到的「過程」幾乎完全由前端的呈現方式決定。版面切割、視覺動線、按鈕配置固然重要，但這一切的前提是「畫面要能順暢呈現」。

想像一下滑社群動態時，每滾一下就卡頓兩秒；按下按鈕後過了半天才看到反饋。再吸引人的設計、再豐富的功能，使用者也很難有耐心繼續用下去。換句話說，效能本身就是使用者體驗最直接、也是最有感的指標。

效能不只是技術問題，它與營收的關聯非常直接，可以視為使用者體驗的延伸結果。業界有兩個常被引用的數字：

這兩組數字的精神是一致的：使用者沒有耐心，只要載入慢一點，潛在客戶就在無聲中流失。對電商或內容平台來說，毫秒級的延遲都會被放大成可觀的營收差距。

頁面效能也會直接或間接影響搜尋引擎排名。Google 早在 2010 年就公開表示頁面速度是搜尋排名的考量因素之一。雖然搜尋排名是由複雜的演算法計算出來，效能不是唯一決定性因素，但長期觀察可以發現它的權重逐年增加。

從技術角度也能合理推論這件事：

搜尋引擎爬蟲（Crawler）有「爬取額度」的概念，每天能花在你網站上的時間有限。網頁載入越快，同樣時間內爬蟲能造訪的頁面就越多，索引（Index）的覆蓋率與更新頻率也會更好。
搜尋引擎本身也在意自家結果的品質。如果列出來的頁面普遍緩慢，使用者很容易直接關掉，這對搜尋引擎自己的口碑也不利，自然不會把效能差的頁面排在前面。

效能好不代表 SEO 一定好，但效能差會在 SEO 上扣分，這個方向幾乎是確定的。

純粹學技巧很容易陷入「會用但不知道何時用」的狀態。建議在累積技術以外，也多看看知名企業的優化案例。這些案例通常會清楚交代以下幾件事：

這種「從問題到解法」的脈絡，是只看技術文件學不到的。當自己未來面對效能問題時，這些案例會變成判斷方向的重要參考。可以從以下幾篇案例開始閱讀：

效能優化是一件需要拿捏節奏的事。過早或過度的優化反而會讓程式變複雜、開發速度變慢。產品在快速衝刺階段，通常只需要做到「不要主動製造效能瓶頸」即可；當產品上線、有真實使用者資料後，再透過量測工具找出真正的瓶頸再下手，往往才是 CP 值最高的做法。

先有量測，再做優化。沒有量測的優化只是猜測。

下一章會介紹如何客觀地量測一個網站的效能，以及如何把量測流程整合進日常開發流程。