網站動畫會拖慢速度嗎？動態效果與載入速度的平衡

網站動畫只有在做法不對時才會拖慢速度。動畫只改變元素的位置與透明度、影片經過壓縮、畫面外的素材晚一點才載入，動態效果與載入速度可以同時達標；反過來說，一張 4 MB 的 GIF 或一支沒壓縮的首頁影片，就足以讓手機使用者等上好幾秒。

先看 Google 怎麼量網站速度

Google 用三個核心網頁指標（Core Web Vitals）衡量網站體驗，動畫好不好，要放回這三個數字來看。依照 web.dev 的說明，良好的標準分別是：

這些數字是以 75% 的造訪次數為準，手機與電腦分開計算。Google 搜尋中心在核心網頁指標說明裡也寫明，建議網站擁有者達到良好的指標，因為它與核心排名系統想獎勵的方向一致。

動畫變慢通常出在素材太大、動到錯的屬性、或是一次載入太多東西。我們檢查店家網站時，最常看到的是下面三件事：

讓動畫順又快，最直接的做法是只改變元素的位置（transform）與透明度（opacity）。web.dev 的高效能動畫指南建議動畫盡量限制在這兩個屬性，因為它們可以交給瀏覽器的合成階段處理，不需要重新排版或重畫整個畫面。

實際設計時可以這樣對照：

同一個視覺效果，換一種做法，手機上的流暢度差別很明顯。

需要循環播放的動態圖，用短影片取代 GIF 通常能省下大部分流量。web.dev 的範例中，一張 3.7 MB 的 GIF 轉成 MP4 後是 551 KB，轉成 WebM 只有 341 KB。

給店家的實用原則：

首頁影片背景可以保留，前提是先放一張封面圖，影片在需要時才下載。依照 web.dev 的影片延遲載入說明，有幾個設定特別有用：

poster 封面圖：影片還沒載好前先顯示一張圖，版面也先佔好位置，畫面不會跳動。
preload="none"：還沒捲到的影片先不下載任何資料。
自動播放的背景影片：加上 autoplay、muted、loop、playsinline，其中 playsinline 是 iPhone 能自動播放的必要設定。

如果影片就在第一屏，它的封面圖會被算進 LCP，這時封面圖要先壓小，並優先載入，影片本身則不要設成延遲載入。

很多精品、建案網站用的「捲動播放」效果，其實是一連串圖片影格隨著捲動切換。影格做得好很有質感，做不好就是幾十 MB 的圖片一起下載。

安排影格時可以先問三個問題：

想看實際效果，可以打開我們的展示範例：建案展示站與腕錶展示站，捲動時留意畫面切換的節奏。

網站應該為開啟「減少動態」的使用者準備一個安靜版本。MDN 的說明指出，prefers-reduced-motion 可以偵測使用者是否要求裝置減少非必要的動態，網站就能移除、減少或替換動畫，照顧容易因畫面縮放或平移而不舒服的人。

使用者可以在這些地方開啟：

開啟後，網站可以停掉視差與自動播放影片，改顯示靜態封面圖，內容一樣完整。

動畫網站上線前，用 Google 的 PageSpeed Insights 跑一次手機版，對照前面三個指標，再逐項確認：

AEL TECH 的動畫網站與一般官網一樣，建置費 0 元，一般官網每月 NT$399 起，附後台網站每月 NT$1,499 起，企業定製依需求報價。我們有 10 年以上經驗、5,000 個網站上線，動畫效果會在設計階段就一起排好載入順序。

不一定。動畫只改變位置與透明度、影片經過壓縮並延遲載入，速度可以維持在 Google 建議的良好範圍內。

可以，但要先放一張壓縮過的封面圖。影片背景加上 muted、loop、playsinline 與封面圖，主要內容就不必等影片下載完才出現。

用 Google PageSpeed Insights 測手機版即可。看 LCP 是否在 2.5 秒內、INP 是否在 200 毫秒內、CLS 是否在 0.1 以下。

傳 LINE 跟我們聊聊你的品牌與想要的效果，我們會先看動畫該放在哪裡、素材怎麼準備。