當過大的圖片、緩慢的主機等明顯問題都解決後，其餘的速度提升就要從前端代碼著手，即瀏覽器如何接收、讀取和顯示您的頁面。在 ANGLIA，每個項目都會依循一套固定清單。以下是影響最大的幾個項目。
1. 聰明地壓縮與合併
代碼壓縮 (Minification) 會移除 CSS、JavaScript 和 HTML 中的空格、註解和多餘字元，通常能在不改變頁面外觀的情況下明顯縮小檔案。配合伺服器端壓縮，傳輸速度更快。不過合併檔案時要小心：在現代網絡環境下，幾個組織良好的檔案，有時比一個龐大並阻塞其他資源的合併檔案載入得更有效率。
2. 移除阻塞渲染的資源
瀏覽器預設會暫停渲染，直到下載並處理完頁面頭部的 CSS 和 JavaScript。解決方法是將首屏所需的少量關鍵 CSS 內嵌，其餘稍後載入，並為非必要的腳本加上 defer 或 async 屬性。訪客能更快看到內容，直接改善 LCP 分數，詳情可參考我們談核心網頁指標與 CDN的文章。
3. 延遲載入摺位以下的內容
位於三個螢幕之外的圖片或影片，在訪客捲動到該處之前根本無需下載。原生延遲載入 (Lazy Loading) 會等這些資源接近可視範圍才載入。但請注意：切勿對主橫幅或首屏內容使用延遲載入，否則會拖慢訪客最想看到的部分。關於圖片格式與尺寸，可參閱我們有關網站圖像優化及圖片壓縮的文章。
4. 管好網頁字體
自訂字體會增加不少負擔，尤其是擁有數千字的中文字體。只使用所需的字重，盡可能裁切字體子集，並設定後備字體，讓文字即時顯示，而不是在字體下載期間一片空白。這同時能避免最終字體載入時版面跳動，有助改善 CLS 分數。若版面位移由其他原因造成，我們有關 CSS Grid 與 Flexbox 錯誤的指南是很好的補充。
5. 善用快取，讓內容更接近用戶
回頭客不應重複下載沒有變動的檔案。請設定合理的快取標頭、為檔案加上版本號以確保更新能順利生效，並透過內容傳遞網絡提供靜態資源。我們的快取策略與 CDN 優化文章有更詳細的說明。
6. 減少 JavaScript 體積
笨重的前端函式庫是互動反應遲緩的常見原因。選擇合適的方案相當重要，詳見我們比較 jQuery 與現代框架的文章。很多時候，最快的方法就是不載入頁面用不上的代碼。
為何定制開發更容易做到
這些優化大多需要存取底層代碼，而這正是模板平台往往限制的部分。通用主題附帶大量您可能永遠用不上的功能和樣式，這些多餘的負擔很難移除。這也是我們闡述定制網站長遠表現通常優於現成模板的原因之一。
您目前的網站能通過這份清單嗎？歡迎向 ANGLIA 查詢前端審核服務。我們累積逾 20 年經驗、完成超過 5,000 個項目，深知哪裡最容易找到速效改善。請瀏覽我們的網頁設計服務頁面，或發送訊息開始討論。
