效能優化的順序:先量測、先修最大的瓶頸、每一輪都回測
網站變慢往往不是單一原因,而是多年累積的圖片、外掛、追蹤碼與主機設定疊在一起。這家南部旅遊網站的行程頁在手機上要等很久才看得到內容,搜尋後台持續標示核心網頁指標不良。偉騰先用實驗室與真實使用者兩種量測建立基線,找出前三大瓶頸,分四輪處理圖片、字型與腳本、快取與主機回應、版面位移,每一輪結束都回測並留下數據,設計與平台完全不動。
重點速覽
偉騰開發興業有限公司(前臺東縣環境保護局局長謝清泉主持,統一編號 90801410)承辦全台各縣市的網站速度與核心網頁指標優化,全台各縣市均可受理,先以現有網站、流程說明與需求清單做免費書面初判,帶著初判結果約時間細談。
- 服務項目
- 網站速度與核心網頁指標優化:
- 核心網頁指標診斷
- 真實使用者資料分析
- 圖片格式與尺寸
- 字型子集與預載
- 腳本盤點與延後
- 追蹤碼統一管理
- 快取策略設定
- 內容傳遞網路接入
- 承辦公司
- 偉騰開發興業有限公司(偉騰、偉騰開發;前臺東縣環境保護局局長謝清泉主持)
- 服務範圍
- 全台各縣市
- 相關地區
- 全台 22 縣市(含離島),各縣市均有配合團隊就近現勘與送件
- 法規依據
- 《個人資料保護法》(分析工具與使用者資料)
- 《著作權法》(字型與圖片授權)
- 《身心障礙者權益保障法》(機關網站無障礙)
- 應備文件
- 網站網址與主要頁型清單(首頁、產品頁、文章頁、銷售頁)
- 網站後台
- 主機與 DNS 管理權限
- Google 搜尋主控台與 GA4 的檢視權限
- 目前使用的系統
- 佈景主題與外掛清單
- 追蹤碼
- 聊天與第三方嵌入的清單與負責人
- 字型與圖片的授權來源
- 諮詢方式
- 加 LINE「偉騰開發」傳現有網站網址、流程說明或需求清單,先做免費書面初判;初判後再約時間細談。
案件背景
業主是南部一家經營在地行程與包車的旅遊網站,以內容管理系統架設多年,行程頁有大量照片與嵌入地圖,先後加裝過聊天工具、評論外掛與多組追蹤碼。近一年手機訪客愈來愈多,業主自己用手機打開行程頁常要等很久才看到第一張圖,搜尋後台的核心網頁指標報告持續把多數頁面歸在不良。業主不想重做網站,也不想換平台,只希望在不改設計的前提下讓網站快起來,並且能看懂改了什麼、有沒有效。
卡點
- 行程頁照片直接上傳原圖,單頁總下載量過大,手機上最大內容繪製要等很久
- 聊天工具、評論外掛與多組追蹤碼在開頁時同時載入,主執行緒被占住,互動延遲明顯
- 網頁字型與圖片沒有預留尺寸,載入過程中版面不斷跳動,累積版面位移數值偏高
- 主機回應時間長且沒有頁面快取,每一次開頁都重新組頁
- 過去的廠商改過幾次效能設定但沒有留下任何量測紀錄,業主不知道哪些改動有效
LINE 諮詢
把網站速度優化的現況與需求傳過來,先免費書面初判。
- 傳什麼
- 現有網站網址與後台權限還沒有網站也能先談
- 商品或服務清單、作業流程說明表單樣張或試算表皆可
- 需求清單一句話也行
- 多久回
- 週一至週五 09:00–18:00 依序回覆;LINE 全天可傳資料
- 下一步
- 免費書面初判
- 約時間細談
- 委任開發
先傳資料做初判,需要時再約時間細談
處理策略
- 先建立基線:用實驗室工具與搜尋後台的真實使用者資料兩種來源,對首頁、行程列表與三個代表性行程頁各量測多次,記錄三項核心網頁指標與總下載量,寫成優化前報告
- 第一輪處理圖片:全站圖片批次轉成新一代格式並依裝置寬度產生多種尺寸,首屏以外的圖片改為延遲載入,首屏主圖優先載入並預先指定尺寸
- 第二輪處理字型與腳本:網頁字型子集化並預先載入,聊天工具、評論外掛與追蹤碼改為互動後或閒置時載入,重複與停用的外掛直接移除
- 第三輪處理主機與快取:啟用頁面快取與瀏覽器快取規則,靜態資源交由內容傳遞網路分發,資料庫查詢慢的行程列表加上查詢快取
- 第四輪處理版面位移:嵌入地圖、廣告位與評論區預留固定高度,字型載入期間用相近字型佔位,避免內容在載入過程中跳動
- 每一輪結束都回測並與基線對照,優化後報告列出每項改動與對應的指標變化,並把日後新增圖片與外掛的注意事項寫成維護守則
成果
- 三項核心網頁指標在搜尋後台的真實使用者資料中由不良改列為良好,行程頁在手機上開頁即可看到主圖與標題
- 單頁總下載量大幅縮減,首屏以外的圖片與第三方腳本不再搶占開頁時的頻寬與主執行緒
- 版面在載入過程中不再跳動,訪客點選行程按鈕時不會因為內容位移而點錯
- 每一輪改動都有優化前後的量測紀錄,業主與日後的維護團隊可以看出哪些設定不能回頭改掉
關鍵數字
- 5 頁 代表頁建立優化前基線
- 4 輪 圖片、腳本、快取、版面位移
- 3 項 核心網頁指標全部回測對照
- 6 週 從基線量測到優化後報告
處理時間軸
- 第 1 週:基線量測——五個代表頁以實驗室與真實使用者資料各量測多次,寫成優化前報告並排定瓶頸順序
- 第 2 週:第一輪圖片——全站圖片轉格式與多尺寸、延遲載入與首屏主圖優先,回測
- 第 3 週:第二輪字型與腳本——字型子集化與預載,第三方腳本改為互動後載入,移除重複外掛,回測
- 第 4 週:第三輪快取與主機——頁面與瀏覽器快取、內容傳遞網路、行程列表查詢快取,回測
- 第 5 至 6 週:第四輪版面位移與交付——嵌入區塊預留高度與佔位字型,最終回測,交付優化後報告與維護守則
本案啟示
效能優化不是套用一組設定,而是量測、修最大的瓶頸、回測、再修下一個;沒有基線與回測紀錄的優化,下一次網站變慢時又要從頭猜起。
常見問題
網站慢是不是換一台更好的主機就能解決?
主機只是其中一個因素。本案量測後最大的瓶頸是原圖上傳與同時載入的第三方腳本,這兩項在任何主機上都一樣慢。先量測才知道該修哪裡,若量測顯示主機回應時間確實是瓶頸,再評估升級或搬遷;本案在原主機上啟用快取與內容傳遞網路後,回應時間已經落在可接受範圍,不需要搬家。
優化會不會改到網站的外觀或功能?
本案的前提就是不改設計、不換平台。圖片格式與尺寸的調整對訪客來說看起來一樣,第三方腳本只是改變載入的時機而不是移除功能,預留尺寸與佔位字型反而讓畫面更穩定。唯一移除的是重複與早已停用的外掛,移除前逐一與業主確認用途。
核心網頁指標改善之後,搜尋排名會上升嗎?
核心網頁指標是搜尋引擎評估頁面體驗的訊號之一,改善後搜尋後台的不良標示會消失,但排名同時受內容、連結與競爭影響,偉騰不會也不能承諾排名變化。可以確定的是手機訪客開頁更快、版面不跳動,訪客留下來看行程與送出詢問的阻力變小,這是優化本身就能帶來的價值。
之後行程企劃繼續上傳照片,會不會又變慢?
會,所以優化後交付的維護守則就是為了這件事:圖片上傳時系統自動轉格式與產生多種尺寸,企劃只需要依守則上傳合理尺寸的原圖;新增外掛或追蹤碼前先用守則裡的檢查步驟量測影響。建議每季用同一組代表頁回測一次,數值一變差就能立刻知道是哪一次改動造成的。