為什麼網站速度是一個行銷問題
您可能擁有最好的廣告、最有吸引力的優惠和最精準的受眾。但如果他們到達的頁面載入太慢,很多人會在看到優惠之前就離開了。
速度看起來像是一個技術細節,但它是讓您已經付費的行銷發揮更大作用的最便宜的方法之一:每留住一位訪客,就少花一份重新取得他的錢。下面介紹研究結論、如何衡量您自己的網站,以及效果最顯著的最佳化方法。
研究結論
被引用最多的研究《Milliseconds Make Millions》由 Deloitte 與 55 為 Google 開展。該研究追蹤了 37 個歐美品牌的 3,000 多萬次會話,發現行動裝置載入時間每縮短 0.1 秒,零售轉換率提高 8.4%,旅遊轉換率提高 10.1%,零售顧客的消費金額也增加了 9.2%。
Portent 分析了 20 個網站的 1 億多次頁面瀏覽,發現載入時間為 1 秒的 B2B 網站,轉換率是 5 秒網站的 3 倍、10 秒網站的 5 倍。對於網店,1 秒載入的頁面轉換率是 5 秒頁面的 2.5 倍。
各家企業的實踐也呈現出同樣的規律。Google 在 web.dev 上彙總了它們的成果:
| 企業 | 改進內容 | 成果 |
|---|---|---|
| Vodafone(義大利) | 主要內容提前 31% 顯示(LCP) | 銷售額增長 8% |
| redBus | 消除佈局偏移,頁面可互動時間縮短約一半 | 行動裝置轉換率提高 80–100% |
| Lazada | 主要內容顯示速度提升至原來的三倍 | 行動裝置轉換率提高 16.9% |
| Agrofy | 主要內容提前 70% 顯示 | 頁面載入期間離開的人減少 76% |
| Yahoo! JAPAN | 修復了佈局偏移 | 每次會話的頁面瀏覽量增加 15% |
為什麼緩慢的頁面會讓廣告花費更多
速度既影響您為流量支付的成本,也影響流量帶來的回報。Google Ads 會為每個關鍵詞給出一個品質分數,由三部分組成:預期點選率、廣告相關性和到達網頁體驗。Google 將到達網頁體驗描述為:您的到達網頁對點選廣告的人有多相關、多有用。緩慢、令人沮喪的頁面會拉低這一得分,進而可能提高您的每次點選費用,並降低廣告的展示位置。
在社群平台上,流失更加直接:點選廣告後需要等待的人,往往根本沒能到達頁面,而無論如何您都要為這次點選付費。郵件也是一樣:連結到緩慢頁面的電子報,會在讀者興趣最濃的那一刻失去他們。正因如此,我們把到達網頁的速度視為行銷活動的一部分,而不是留到以後再處理的 IT 工作。
最重要的三個指標
Google 用三項 Core Web Vitals 指標來衡量真實環境中的頁面體驗。當至少 75% 的真實造訪在三項指標上都達到「良好」時,頁面即為通過:
| 指標 | 衡量內容 | 良好 | 較差 |
|---|---|---|---|
| Largest Contentful Paint (LCP) | 主要內容出現的速度 | 2.5 秒或更短 | 超過 4 秒 |
| Interaction to Next Paint (INP) | 頁面對點按和點選的響應速度 | 200 毫秒或更短 | 超過 500 毫秒 |
| Cumulative Layout Shift (CLS) | 頁面在載入時的跳動程度 | 0.1 或更低 | 超過 0.25 |
這個門檻並沒有聽起來那麼高,但大多數網站都沒有達到。HTTP Archive 的《2025 Web Almanac》發現,只有 48% 的網站在行動裝置三項全部通過,桌面端為 56%。載入速度是最常見的不達標項:只有 62% 的網站在行動裝置的 LCP 表現良好。
如何在十分鐘內檢查您的網站
先從免費工具開始,再像客戶一樣進行測試:
| 工具 | 適用場景 | 費用 |
|---|---|---|
| PageSpeed Insights | 快速檢查任意頁面:當 Google 有足夠資料時顯示真實使用者資料,並附帶實驗室測試和最佳化建議 | 免費 |
| Google Search Console | Core Web Vitals 報告按問題類型對全站頁面進行分組 | 免費 |
| Lighthouse(位於 Chrome 開發者工具中) | 在搭建或修復頁面時進行詳細的實驗室測試 | 免費 |
| WebPageTest | 提供來自真實裝置和地區的幻燈片檢視和逐個請求的詳細資訊 | 提供免費版 |
| GTmetrix | 易讀的報告和定期監測 | 提供免費版和付費方案 |
| DebugBear | 持續監測,速度變慢時發出提醒 | 付費 |
實驗室測試模擬的是使用慢速網路的中端手機,因此每次執行的分數可能有所不同。Google 用來評判頁面體驗的,是過去 28 天從真實 Chrome 使用者收集的實測資料。然後,再做一次最誠實的測試:用使用行動數據的中端手機開啟您的網站。
網站變慢的常見原因
- 超大圖片。直接從相機或相簿拿來的 4 MB 照片,是我們最常見到的問題之一。現代圖片格式會有幫助:Google 的報告顯示,WebP 圖片通常比同等品質的 JPEG 小 25–34%,AVIF 往往還要更小。
- 第三方指令碼。聊天外掛、彈出視窗、熱力圖、社群媒體動態和多個追蹤程式碼,每一個都會增加頁面負擔,並爭奪手機的處理器資源。
- 臃腫的主題和頁面構建器,會為您根本不用的功能載入程式碼。
- 從其他伺服器載入多種字重的網頁字型。
- 沒有快取的慢速主機,會拖慢其他一切。
- 啟動過早的動畫。即使是裝飾性的動態效果,也可能在中端手機上拖慢頁面。請在內容載入完成後再啟動。
按效果排序的最佳化方法
- 調整圖片尺寸並壓縮。使用 WebP 或 AVIF 格式,用
srcset讓手機取得更小的檔案,併為每張圖片設定寬度和高度,避免佈局跳動。 - 刪除不需要的指令碼。逐一審視每個外掛和程式碼,問問它是否值得保留。其餘的在主要內容之後再載入,並在法律要求時僅在獲得同意後載入。
- 優先載入主圖。為首屏主圖設定
fetchpriority="high",並對頁面下方的圖片和影片使用延遲載入。 - 自行託管字型,並只載入您用到的字重。
- 開啟快取和 CDN,讓回訪者和遠方的訪客更快取得頁面。
- 讓下一個頁面瞬間開啟。Chrome 的 Speculation Rules 可以在使用者把滑鼠懸停在連結上時預先準備下一個頁面;讓頁面保持可使用往返快取,則能讓「返回」按鈕瞬間響應。
- 對於簡單的行銷網站,可以考慮靜態網站。沒有資料庫和外掛,頁面幾乎可以瞬間送達。
下一次行銷活動的速度檢查清單
在任何行銷活動把付費流量引向某個頁面之前,請先完成以下檢查。只需大約十五分鐘,就能守住每一分廣告預算:
- 在 PageSpeed Insights 中測試到達網頁的行動裝置表現,並修復所有標紅的問題。
- 檢查主圖是否已壓縮、尺寸是否合適,以及是否為 WebP 或 AVIF 格式。
- 刪除在手機上、使用者還沒讀到一個字就遮擋內容的彈出視窗。
- 確保表單或結賬頁面載入迅速、在手機上可正常使用,並給自己傳送一次測試諮詢。
- 離開辦公室,用使用 4G 網路的中端 Android 手機開啟頁面。
- 檢查資料追蹤和同意管理是否正常運作,以便看清哪些點選轉換成了客戶。
速度是品牌的一部分
人們會根據網站的使用感受來評判一家企業。瞬間出現、立即響應的頁面讓人感到自信可靠;卡頓的頁面則會讓人懷疑還有什麼也很慢。正因如此,我們從第一張草圖起就為速度做規劃,本網站也採用了快速、簡潔、沒有外掛的檔案構建。如果您的網站需要改進,我們的網站與到達網頁服務可以提供幫助。
常見問題
多快的頁面載入時間才算好?
目標是在手機上 2.5 秒內顯示主要內容(良好的 Largest Contentful Paint),並在 200 毫秒內響應點按。更快會更好:上述研究發現,哪怕只快十分之一秒也能帶來提升。
頁面速度會影響 Google 排名嗎?
會。Core Web Vitals 是 Google 排名系統所使用的頁面體驗訊號的一部分。相關性和有用的內容更加重要,所以可以把速度看作搜尋中的「決勝因素」,以及提升轉換的有力槓桿。
PageSpeed 分數需要達到 100 嗎?
不需要。這個分數只是實驗室估算值。讓真實訪客的 Core Web Vitals 達標,遠比獲得完美的實驗室分數重要。
為什麼我的 PageSpeed 分數每次都不一樣?
實驗室測試在模擬的裝置和網路上執行,伺服器響應、第三方指令碼和測試條件的細微差異都會讓結果發生變化。請關注多次執行的趨勢,以及真實使用者資料。
資料來源
- Milliseconds make millions,Deloitte 與 55 為 Google 開展的研究,來源:web.dev
- Site speed is (still) impacting your conversion rate,Portent,2022 年 4 月
- The business impact of Core Web Vitals,web.dev 案例研究
- About Quality Score for Search campaigns,Google Ads 幫助中心
- Web Almanac 2025: Performance,HTTP Archive,2026 年 1 月
- Web Vitals,web.dev
- Understanding Core Web Vitals and Google search results,Google 搜尋中心
- An image format for the web (WebP),Google for Developers
- Prerender pages in Chrome for instant page navigations,Chrome for Developers
本文在 AI 的協助下撰寫,並經 Brielgio 團隊審閱和完善。