【網站 SEO】使用 WebP 格式圖片，就可大幅提升使用者體驗

如果想從 Google 搜尋引擎獲得更多的自然搜尋流量 (Organic Search)，網站就必須符合「行動裝置友善」(Mobile Friendly) 和「使用者體驗 (User Experience)」這兩個優先條件！

不過，你知道只要把圖片改成 WebP 格式，就能馬上提升使用者體驗嗎？

先來測試網頁的使用者體驗

關於網站、網頁的「使用者體驗」，Google 提供了一個非常實用的輔助工具 PageSpeed Insight，協助我們瞭解頁面是否有些問題需要排解。(你可以馬上試試自己的部落格或網站)

▲ 透過 PageSpeed Insight，就能立即瞭解「使用者體驗」問題

經過測試完畢後，它就會提出一份 網站使用體驗核心指標報告，主要檢測項目區分為三項：LCP (Largest Contentful Paint)、FID (First Input Delay)、CLS (Cumulative Layout Shift)

LCP (最大內容繪製)：

當網站頁面載入完畢後，裡面的最大內容就被稱呼為 LCP，它們通常會是圖片、影片、SVG 向量圖片。由於這些內容佔據了相當程度的資料量，所以非常考驗「網站載入速度」的效率，也被視為使用者體驗的重要環節。

Google 解釋載入速度的重要性：「網頁載入時間越長，對跳出率的影響就會越大。」

舉例來說：如果網頁載入時間從 1 秒增加到 3 秒，跳出率就會增加 32%。如果網頁載入時間從 1 秒增加到 6 秒，跳出率就會增加 106%。換言之，載入過多圖片可能就是使用者體驗的最大障礙！

FID (首次輸入延遲時間)：

在網站內容裡可能會有連結、按鈕、跳出式內容 (Pop-up)，使用者必須透過它們產生點選、查詢之類的「網頁互動性」，但肥大的 JavaScript 功能或第三方程式碼則會拖慢它們出現的速度。

CLS (累計版面配置位移)：

CLS 可以被解讀為「版面穩定性」，頁面可能因為圖片、連結按鈕載入的速度較慢，讓最初和最終的網頁版面產生位移。CLS 可能會造成使用者的功能誤觸，或是正在閱讀的內容突然跑掉，進而造成使用者體驗不佳。(它和 LCP、FID 都緊密關係著)

▲ 我們以知名內容網站，來做一個「使用者體驗」的跑分

為了符合 Google 對使用者體驗的期待，就必須同時優化「網站載入速度」、「網頁互動性」、「版面穩定性」這三個項目。

在測試完畢後，PageSpeed Insight 除了會提供行動版、桌機版的量化數據，也會幫我們列出相關解決方案，但對於網站經營者而言，很多技術問題還是要仰賴專業人員來協助。

▲ 使用者體驗相關的 LCP、FID、CLS 都能有效量化

不過在現有的架構下，我們還是可以從最大宗的「圖片」問題開始著手。像是圖片數量比較多的「內容網站」，載入速度很容易被圖片數量綁架，我們上述的 LCP、FID、CLS 問題很多就是因為圖片載入太慢而產生的。

Google 的解決方案就是改用「WebP 格式圖片」，透過它超強的檔案壓縮能力，能大幅減輕網頁傳輸的負擔。不僅更快速，而且畫質不減，還帶來更棒的使用者體驗。

▲ 只要透過次世代格式圖片，就能優化部分的使用者體驗

關於 WebP 圖片格式

WebP 是 Google 開發的「次世代圖片格式」(Next-Gen Image Format)，主要目的就是為了大幅減少圖檔大小，但依舊保留圖片的高品質、高相容性，並用來替代 GIF、JPEG (JPG)、PNG 這些網路圖片的老學長們。

WebP 是集所有學長特色於一身，同樣有 PNG 圖檔的透明背景 (Alpha 通道)、GIF 圖檔的動畫模式 (Animated WebP)、JPEG 圖檔的檔案減重 (有損壓縮)，還支援 ICC 色彩組態、XMP 詮釋資料等功能。

如果將圖片轉換或儲存為 WebP 格式，至少可以有效減少 30-50% 的檔案大小，讓網頁傳輸變得更有效率。而且 WebP 還可以選擇「有損壓縮」或「無失真壓縮」(可逆壓縮)，不僅減了重還不掉畫質，讓它更具有不同面向的使用彈性。

Google 在 2018 年 4 月正式發布了 WebP 1.0 版本，截至 2021 年 5 月已經有 94% 的瀏覽器支援 WebP 格式，包含 Chrome、Safari、Firefox、Edge、Opera 都能開啟有 WebP 圖片的網頁。

(如果能看到本文的圖片，就代表你的瀏覽器也支援 WebP)

▲ WebP 即將取代 GIF、JPEG、PNG 的網路圖片地位

將圖片轉換為 WebP 格式使用

雖然目前 WebP 圖片還在普及過程中，不過當你開始使用後，肯定也會喜歡上它的短小精幹，而且藉此還能提升「使用者體驗」、「搜尋引擎優化」何樂而不為呢？

不過，在你開始使用 WebP 圖片前，最好先確認一下你的網站或發佈平台有支援它。另外，轉存 WebP 圖片暫時是比較麻煩的地方，目前有這兩個解決方案：

1 - Adobe Photoshop 套用外掛插件

是的，你沒看錯！

Photoshop 暫時還不能將圖片轉存成 WebP 格式，解決方法 就是加入 Google 開源的 WebP 外掛插件來處理，不過相信再晚些應該會改善！(安全性沒問題，也請放心)

▲ Adobe Photoshop 目前要安裝外掛插件，才能轉存 WebP 圖片

2 - 線上 WebP 轉換服務

要是你平時沒有使用 Adobe Photoshop，也不需要特別處理圖片，或許可以考慮使用線上的 WebP 轉換服務，一樣可以將圖片順利轉換為 WebP 格式。

▲ 使用線上服務也能將圖片順利轉換 WebP 格式

延伸閱讀：

【網站 SEO】想提高搜尋排名，要先寫出 Google 喜歡的文章
【網站 SEO】內容行銷就靠 Google Trends，精準切入時下核心話題
【網站 SEO】善用 Google Search Console 加速網站曝光效率
【網站 SEO】利用 Disavow 移除有疑慮的反向連結，避免成為 SEO 受害者
【網站 SEO】網站更換網址、網域後，需要注意的 SEO 轉移設定
【網站 SEO】優化圖片設定，讓網頁 SEO 神進步
【網站 SEO】使用 WebP 格式圖片，就可大幅提升使用者體驗
【網站 SEO】為什麼需要提升 Google 搜尋排名？

-------------------------------

更多內容，歡迎關注『布蘭特大叔』

部落格：http://bit.ly/UB-WebSite
FB 專頁：http://bit.ly/UB-FB
YouTube 頻道：http://bit.ly/UB-YouTube