網頁減肥三大法：軟體壓縮、設計習慣、程式碼重構

HTML 本身不需換行縮排，但編輯器產生的程式碼充滿冗餘空白、重複屬性、低效結構。本文提出三層次減肥策略，從工具到習慣再到程式化重構，徹底瘦身網頁。

1. 軟體壓縮法：最快見效

使用專用 HTML 壓縮工具（如 HTMLMinifier、線上壓縮網站）移除空白、註解、縮排。優點：零學習成本、立竿見影。缺點：無法解決人為產生的邏輯冗餘（如重複 inline style）。

2. 設計減肥法：養成好習慣，事半功倍

在撰寫/設計階段就避免產生垃圾碼：

• 善用 CSS 繼承與類別： 全站字體、連結樣式集中定義，避免重複 <font> 或 inline style。
• 表格層級優化： 整列同色用 <tr style="..."> 取代逐格設定；置中用 <td align="center"> 而非包 <div align="center">。
• 預設 target="_blank"： 若多數連結需新視窗，在 <base target="_blank"> 統一設定，個別覆蓋即可。
• 語意化標籤： 用 <h1>~<h6>, <ul>, <p> 替代巢狀表格排版，碼量大減且利 SEO。

這類技巧需長期累積，但一旦成習慣，寫出的碼天然精簡。

3. 程式減肥法：極致精簡，靈活維護

將重複結構抽離為 JavaScript 產生。例如導航列：

<script>
function lk(url, txt){
  document.write('<td align="center" width="110"><a href="'+url+'">'+txt+'</a></td>');
}
lk("rongww.yeah.net", "<font color=red>榕兒的家</font>");
// ... 後續項目同理
</script>

優勢：

• 大量重複結構只寫一次邏輯。
• 後期修改只需改資料陣列，不動 HTML 結構。
• 可進一步抽離為 .js 檔，多頁共用、瀏覽器快取，二次載入更快。

注意：JS 過度使用或阻塞渲染反而拖慢速度，建議置於 <body> 末尾或加 defer。

結語

雖然頻寬日益寬裕，但在行動裝置、弱網環境下，精簡網頁仍是基本功。從今天開始養成「減肥」習慣，你的網站會更快、更好維護。