網站製作費用若只按頁數與功能計算，效能往往被留在一句「基本優化」裡。等到正式內容換上高解析照片、活動追蹤與第三方工具後，頁面變慢，業主才發現合約沒有寫測試頁面、裝置條件、量測工具、內容上限或改版後的責任。效能不是一個可勾選的外掛，而是設計、前端、主機、素材與營運共同形成的結果。
因此報價不必承諾任何環境下都固定達到單一分數，但應列出團隊能交付並重複驗證的工作：哪些代表頁要測、哪些資源要處理、什麼時點留存基準、誰負責後續新增內容，以及發現退步時如何判斷原因。把這些項目拆開，才看得出網站製作費用究竟包含一次性調校，還是持續量測與維護。
先把「快」改寫成三種可觀察體驗
web.dev 的 Web Vitals 說明把目前的 Core Web Vitals 分為載入、互動與視覺穩定三個面向，分別以 LCP、INP 與 CLS 衡量。官方也強調，判斷多數使用者體驗時應看第 75 百分位，並分開觀察行動與桌面裝置。這表示驗收不能只附開發者電腦上的一次截圖，也不能把三個性質不同的問題混成「速度分數」。
需求書可先選代表頁型，例如首頁、課程列表、課程詳情、報名頁與內容文章。每種頁型記錄主要內容、關鍵互動與可能位移的區塊，再說明測試是在開發環境、正式環境或真實使用資料上進行。若網站剛上線、尚無足夠真實使用資料，就應明確標示現階段只能做實驗室測試與功能回歸，不能把樣本不足解讀成已通過真實使用者指標。
同一份報價最好分開「上線前基準」與「上線後觀察」。前者適合找出圖片過大、版面位移、主執行緒阻塞等可重現問題；後者才能看見不同裝置、網路與操作方式造成的實際差異。web.dev 文件也指出，實驗室量測對開發與捕捉效能退步很重要，但不能取代現場資料。兩者用途不同，不應挑較漂亮的一個數字當作全部結論。
圖片處理必須成為明確交付，而非口頭提醒
品牌與活動網站常以大圖建立氛圍，也最容易讓素材交付影響載入。報價要說明誰提供原始檔、誰負責裁切與壓縮、會產生哪些尺寸、替代文字由誰撰寫，以及內容人員日後上傳是否有尺寸提示或自動處理。若只在首批素材上手動優化，後台卻允許持續上傳未處理的大圖，網站很快就會偏離上線時的基準。
MDN 的響應式圖片指南說明，srcset、sizes 與 picture 可讓瀏覽器依裝置與版面選擇合適資源；其中解析度切換解決同一內容需要不同尺寸檔案的問題，art direction 則處理窄螢幕需要不同裁切的情境。這些不是設計稿自動帶來的成果，而是需要素材規則、前端標記與測試共同完成。
驗收時不要只看圖片有沒有出現。應在不同版寬檢查主體是否仍清楚、瀏覽器是否取得合適候選檔、圖片保留必要替代文字，以及載入前是否預留正確空間。若首頁主視覺在手機改用近景裁切，也要確認不是靠 CSS 隱藏已下載的大圖後再載入第二張，造成重複傳輸。
LCP 問題要拆成可估價的診斷工作
web.dev 的 LCP 優化指南指出，LCP 代表主要內容載入速度，並把過程拆成伺服器回應、資源載入延遲、資源載入時間與元素呈現延遲等部分。官方也提醒，單一快速修補不一定能實質改善整體結果；應先確認問題存在，再分析是哪一段造成等待。
這讓網站製作費用可以更誠實地分層：版型內的圖片與字型策略是一項工作，主機或快取設定是另一項，第三方腳本與內容管理規則又是另一項。若業主日後加入聊天工具、影片嵌入或多套追蹤碼，維護合約要約定如何重新量測與歸因，而不是要求原製作方無條件維持上線當天的結果。
驗收報告可保存代表頁、測試日期、裝置與網路條件、工具版本、主要問題和修正前後結果。數值門檻若採用官方建議，也要寫清楚判斷使用的是實驗室資料還是真實使用資料。對流量尚少的網站，與其製造看似精確的保證，不如交付可重做的測試步驟與資源清單。
用森嶼環境學苑建立內容型網站的效能預算
展示作品「森嶼環境學苑」（forestisle-environment）包含六門課程、六個行動案例、ESG 企業合作專區，以及課程報名與「我的報名」查詢。這種內容型網站適合依頁型建立效能預算：課程列表控制縮圖候選尺寸，課程詳情管理主視覺與長文圖片，報名流程則重視互動反應與錯誤訊息出現時的版面穩定。
實際驗收可以選一門內容最完整的課程、一個圖像較多的行動案例與報名流程，先建立上線基準，再用同一套步驟測試後台新增內容。若編輯上傳新圖片後超出既定規則，系統應提供提示、自動產生候選尺寸，或在營運流程中安排處理責任。這個案例是展示作品，不代表真實組織的流量或效能成果；本文只用其頁面結構說明怎麼安排測試樣本。
網站製作費用的效能項目，最後應落成一張責任表：製作方交付版型策略、資源處理與基準報告；業主交付合規素材並遵守內容規則；維護方在新增第三方服務或改版後執行回歸測試。當量測條件、代表頁與素材邊界都寫清楚，效能才是可估價、可驗收、也能持續維護的工程工作。
