行動至上的未來：流量變現進化的多元體驗

行動至上的未來：流量變現進化的多元體驗

為什麼我們要重視網站體驗？

網站的成長在過往通訊協定的幫助下呈現爆發性的成長，且網頁是免費的資訊來源，在這個時代每個人透過網站都可以是內容創作者。另一方面，網頁的流動性非常高、無國界空間時間限制，資訊的傳遞已呈現前所未有、無遠弗屆的流通。

使用者期待快速、流暢與個性化的使用者體驗（Fast、Seamless、Personal）

Web Ecosystem Consultant , Google
  • 74% 的使用者期望在手機上獲得即時資訊
  • 65% 的使用者表示，他們會跳離設計不良的行動體驗
  • 63% 的使用者期望能獲得個人化的資訊

全新的 Google Search 運作機制

Google Search Team 計畫在 2021 年 5 月推出全新的運作機制，調整為以 Page Experience Ranking Signals 為主，將會影響 SEO 排名上會參考的因素。

Page Experience Ranking Signals

  • Google Search 將提高對使用者體驗的考量與重視
  • 重整過去的搜尋機制，使網站發佈商與擁有者更容易理解與優化
  • 新機制將於 2021 年 5 月發佈（參考資料：bit.ly/page-experience-timing）
  • Core Web Vitals（使用者體驗核心指標 → 主要為網站效能的指標）：
    • 檢測載入速度（LCP）：Loading（Largest Contentful Paint , LCP）
      • 檢測頁面繪製首屏的 Largest Content（大標題或圖片）元素所需時間
        • Good：建議低於 2.5 sec
        • Needs Improvement：建議低於 4 sec
      • 一般多為 Hero Image（最有意義的元素）
      • 幫助使用者快速理解這篇的內容是否為用戶所需要的
    • 檢測互動性（FID）：Interactivity（First Input Delay, FID）
      • 測量從使用者第一次與頁面進行互動到瀏覽器能夠回應的時間
        • Good：建議低於 100 ms
        • Needs Improvement：建議低於 300 ms
      • 瀏覽器在背景執行的服務（像是追蹤程式碼需崁入的 javascrpit）
      • 如果瀏覽器帶過於忙碌去執行背景任務，就會導致無法回應使用者互動
    • 檢測視覺穩定度（CLS）：Visual Stability（Cumulative Layout Shift, CLS）
      • 檢測頁面中非預期（非使用者與頁面互動造成的）Layout Shifts 的總和
        • Good：建議低於 0.1
        • Needs Improvement：建議低於 0.25
    • 如果可以達成上述指標的要求，Google 內部數據統計將可能降低 24% 的跳出率
  • 其他參考要素：
    • Mobile Friendly
    • Safe Browsing
    • HTTPS
    • No Intrusive Interstitials

什麼是 Web Vitals ？

Google 預計推出的網站體驗指標，起初用意是 Google 為了簡化網頁開發的流程與開發上的 Loading，便彙整了最重要的網站瀏覽體驗指標並歸納成為新的參考要素（因為過往的許多指標往往有許多指標的意義並不那麼明確）。

參考資料：web.dev/vitals

  • 幫助網站擁有者改善使用者體驗
  • 簡化網站效能評估流程
  • 專注於最重要的指標
  • 每年審查指標與標準

推想一下使用者的瀏覽歷程

  1. 載入過程（happening）：網頁讀取速度將影響用戶體驗導致跳離（持續轉圈 loading 中）
  2. 互動過程（responsive）：載入網頁後可觸發捲動、點擊、事件等互動，但瀏覽器很多時候初載入時可能在處理背景任務，導致網頁沒有反應。
  3. 瀏覽過程（delightful）：如果成功載入網頁、與觸發互動，也可能在讀取到某個段落，導致後續的渲染（插入圖片、插入廣告）導致原本用戶要瀏覽的內容被往下推或空白，使用者將可能跳離原本的瀏覽過程。

Google 推薦用於 Core Web Vitals 的檢測工具

  1. PageSpeed Insights
    • PageSpeed Insights and PSI API
    • Lab & Field Data
      • Lab Data（Synthetic）：在模擬的環境中進行檢測（ex. Lighthouse、WebPage Test、PageSpeed Insights），致命的缺點是沒有辦法實際反應原本使用者的感受。
      • Field Data（Real User Measurement, RUM）：匯集實際的使用者數據進行檢測（ex. Chrome UX Report、Analytics Data – e.g. GA、PageSpeed Insights）
    • Core Web Vitals with blue ribbon
  2. Chrome UX Report
  3. Search Console（左側欄位的網站體驗核心指標）
  4. Chrome DevTools
  5. Lighthouse
  6. Web Vitals Extension

網站採用 AMP 的優勢和好處

舉例來說，蘋果仁科技自媒體導入 AMP 提昇網站效能（採用 WordPress 的 Plugin ），創造了 +20% 的流量增長和 +40% 的 eCPM。

  • User Expectations（UX / Speed）
  • Reach ＆ Engagement
  • Business Impact

Google 提供新興的內容格式：Web Stories

類似於 Instagram 的限時動態或 Facebook 的 Stories，透過手上有的影音素材集結成一串媒體創作內容，使用者只需要透過左右點擊的方式便能瀏覽，過去只能在 APP 才能使用的功能 Web Stories 也能同樣提供這樣的 Full Screen 瀏覽體驗，且觸及率比 Instagram 或 Facebook 更高，只要有瀏覽器和網址便能瀏覽，頁跟頁之間也能穿插廣告作為額外的新興廣告版位和收益來源。（Web Stories 範例：蘋果仁）

如何製作 Web Stories ?

stories.google/create