網站使用體驗核心指標是什麼？

作者： -

Core Web Vitals（CWVs；網站使用體驗核心指標）

Google 發表新的網站品質評估指標 Core Web Vitals，目的是提供具有代表且一致性的網站品質數據，這些指標分別為：LCP、FID、CLS 與2022年新增的 INP。但在2024年，FID將正式被INP取代。

因為評估網頁速度體驗的方法百百種，而且很難把 UX 數據量化，而因為 CWVs 會成為 Google 搜尋排名 SEO 的因素之一，一些網頁檢測工具勢必會跟上這次提出的標準。

LCP、FID、CLS
指標的檢測標準。圖片來自 blog.chromium.org

什麼是 LCP？

LCP是最大內容繪製元素(Largest Contentful Paint)，視窗可見範圍內最大內容元素的渲染時間。根據 LCP API 考慮的元素類型有：

  • img 元素
  • 在svg 裡面的 image 元素
  • 有 poster image 的 video 元素
  • 使用 CSS url() 載入圖片的元素
  • 包含文字節點的 Block-level 元素

什麼是 CLS？

CLS是累計版面配置位移(Cumulative Layout Shift)，可以想成頁面載入時的穩定度。CLS 會測量在頁面整個生命週期中發生的每個意外排版位移（layout shift），並將所有單獨排版位移的分數加總，分數在0到1之間。比如使用者才剛閱讀完一句話，突然上面跑出廣告把剛才閱讀的文字往下擠，或是想點擊取消按鈕，卻在下一秒位移按到確定，造成非常糟糕的使用體驗，都會讓分數增加。

什麼是 FID？

FID是首次輸入延遲(First Input Delay)，用戶首次與頁面互動（點擊連結、輸入欄、下拉選單、按鈕或 JavaScript 驅動的元件）到瀏覽器能夠回應該互動的時間。而當量測工具無法測量 FID 時，可以換成評估與 FID 關係密切的總阻塞時間（TBT）指標，因此優化 TBT 也可直接提高 FID 的品質。

但在 INP 出現之後，基本上就被其取代了，Google也宣布將在2024年3月由INP取代之。

什麼是 INP？

Interaction to Next Paint

INP是與下一次的互動渲染(Interaction to Next Paint)，基本上可以想成 FID 的替代品，它涵蓋了頁面的整個生命週期，會累積頁面上所有的互動延遲，例如 pointerup、pointerdown 和 click 這些都可能導致整體互動的延遲。簡單來說，著重的點在用戶體驗和使用者的設備可變性。


看看 Google 在 web.dev LIVE 2020 的線上研討會怎麼說：


另外，Google 也有做一個解釋 INP 的影片：


網站使用體驗核心指標對SEO的影響


來自 Simplifying the Page Experience report(2021-08-04)

Google 將源自 Core Web Vitals 的信號與現有的頁面體驗搜索信號結合，包含 mobile-friendliness、safe-browsing、HTTPS-security 和 intrusive interstitial guidelines。新的網頁 UX 信號會在 2021 年 6 月之後成為 Google 搜尋的排名因素，並在 2022 年 2 月之後納入桌機版的排名（區別手機與桌機的使用者）。


數值標準

當然，各指標會有其標準：

  • LCP：小於等於 2.5 秒才算良好，超過 4 秒代表不良。
  • FID：小於等於 100 毫秒才算良好，超過 300 毫秒為不良。
  • CLS：小於等於 0.1 才算良好，超過 0.25 代表不良。
  • INP：小於等於 200 毫秒才算良好，超過 500 毫秒代表頁面響應能力較差。

前三項你可以在此處查看 Google 的說明，而 INP 可以看這篇文章。

*2021-02-18 從「小於」改成「小於等於」

輕鬆改善圖片載入

圖片、影片和 iframe 通常是網頁中容量最大的東西，若要無損壓縮圖片的話，網路上可以找到很多工具，例如 Squoosh、TinyPNG、SVGOMG，又或者可以使用 WebP、WebM、AVIF 等較輕量的檔案格式。

另外，還可以用瀏覽器原生的延遲載入方法「loading="lazy"」增加效能，若再寫上寬、高的話，還能改善 CLS。

若是背景圖片的話，則可以使用 JavaScript 的 IntersectionObserver，讓該元素出現在可見視窗時再載入，降低使用者剛進入頁面時的負擔。

然而，並不是所有圖片都要加上「loading lazy」，若是一開始就在使用者的畫面中，加上「loading="lazy"」只會拖慢載入時間，這些一開始就在畫面上的圖片、影片或iframe，加上「fetchpriority="high"」增加其載入優先度會是比較好的選擇。


如何改善CLS？

圖片CLS

各測速工具基本上都會點出哪裡有問題與基本的改善方案。而 Google 也分享了 Yahoo JAPAN News 的 CLS 改善方法，成功讓網頁流量增加 15%：

  1. 給每一張圖片的 HTML 都加上寬和高。
  2. 使用 CSS 的 aspect-ratio 和 object-fit。

就是這麼簡單，成功讓 CLS 改善 0.2 分。當然使用常見的 CSS position 和 padding-top 也可以解決，但用 aspect-ratio 相對簡便一些。

文字CLS

在載入網頁字體時(font-face)，雖然 CSS 的 font-display:swap 解決了字體閃爍的問題，但字體變換的瞬間因不同字體有不同的軸、字重、字寬，所以依然會造成一瞬間的抖動(CLS 0.001~0.01 分左右)。

網路上常見的解答是：不改變(少量分數割捨)、改回瀏覽器原本就支援的字體、使用 CSS（size-adjust、ascent-override）校正、使用可變字體(variable fonts)、font loading API。

避免非合成動畫(non-composited animation)

你可以查看 High Performance Animations、Stick to Compositor-Only Properties and Manage Layer Count 這兩篇文章的說明，盡量選擇高效的動畫方式（transform），並避免過多的層級變化。


另外，web.dev 也簡單寫了一篇改善使用體驗核心指標的方法，讓大家有輕鬆優化網頁的應對方式。

網頁效能測量工具

  • PageSpeed Insights：Google 推薦使用的網頁測速工具，內容完整，也有針對 Core Web Vitals 更新指標，例如會寫出 LCP 是指哪一個網頁元素、哪些元素使 CLS 分數增加。
  • Lighthouse：若使用 chrome 或 edge 的話非常方便，直接打開 DevTools 就可以使用。
  • WebPageTest：有提供 LCP 和 CLS 的數值。
  • web vitals chrome 插件
  • 用 Screaming Frog 大量檢測
  • 其它

另外，一些工具像是 PageSpeed Insights 會用 TBT（總阻塞時間，Total Blocking Time）來取代 FID。TBT 是使用者在頁面被阻止響應（例如點擊、鍵盤輸入）的總時間，計算方式是 FCP 和 TTI 之間所有執行超過 50 毫秒的任務的阻塞時間總和。例如，一個功能耗時 70 毫秒，阻塞時間就是 20 毫秒。雖然 TBT 和 FID 的測量內容不同，但改進 TBT 通常都能改進 FID。


其實光是前2個工具就已經很夠用了，它們還能順便查看文字顏色對比度、PWA等各種問題。


留言

張貼留言

這個網誌中的熱門文章

用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！只要設定字體的最大值和最小值就可以辦到。 文章目錄： vw 基本運用 極限問題 Media Query max()、min() If you just want the best solution, just click "max()、min()" . 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; }
READ THIS »

10 steps to Create「Lil Yachty meme」AI generated Video (Viggle AI)

作者： -
圖片
日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片一步一步做，完全不用動腦。 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). Select any of these rooms named "animate" and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template" . finetune: select "On" . Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 沒畫面的話可能還是會不太清楚呢，沒關係，我直接把操作步驟拍成教學影片了，只要照著這些步驟做，連從沒接觸過AI的人都能成功產出一個成品： 教學影片 為什麼會紅到日本？ 這個不斷被二創的影片其實來自美國歌手 Lil Yachty 在演唱會的一段影片： Lil Yachty with the HARDEST walk out EVER 。 在「Viggle AI」出現之後，就從歐美紅到日本去了。大多人使用的素材都是動漫人物、Vtuber、親友或自己。 Viggle AI 的官網有提供 許多 motion_prompt 指令 給想要玩的人使用，「$lil_yachty_stage_entrance」這個就是其中之一。目前使用他們的動畫生成功能還是免費的，之後
READ THIS »

運用資料層 dataLayer.push 建立 GTM 自訂事件

作者： -
圖片
GTM（Google Tag Manager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。但現實往往沒那麼簡單，通常都會遇到一堆 ajax、history 或 cache 要處理，這時候就要請到自訂事件出馬了。 若只用 GA，沒有使用 GTM 的話，自訂事件要這樣寫： gtag('event', ..., { 'event_category' : ..., 'event_label' : ... }); 那如果用 GTM 的話該如何操作呢？ 將資料 push 進 dataLayer 首先我們要知道什麼是 dataLayer：一個 GTM 內部的全域變數，它能動態存取網頁的使用者行為數據。 更進一步探索它的   JSON   架構，可以在網頁上使用開發者工具(F12)的 console 欄，輸入 dataLayer，其實跟它的名字一樣就是層層分明的資料層 (Data Layer)。 在 F12 中查看 dataLayer 你會發現 GTM 測試欄位左邊有幾個事件，dataLayer 裡面就有幾個 object。 再把 object 點開（這裡以 Window Loaded 為例），會有 event 和 GTM 給的事件 id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。 因此，我們可以依樣畫葫蘆用 dataLayer.push 自己寫一段觸發條件把資料送進 dataLayer ，就可以在 GTM 裡面操作了： 開始設定自訂事件 先宣告 dataLayer，避免發生 undefined error 再設定你要 push 進去的數據 這裡我們用「 nav a 點擊偵測」和 ajax 事件舉例（jQuery）： var dataLayer = window.dataLayer || []; // example 1: detect nav a tag click $('nav a').click(function(){ var $text = $(this).text(); dataLayer.push({ 'event'
READ THIS »