避免非合成動畫問題

您是否曾經點擊過某個網站，卻發現它在滾動時卡頓和滯後？

令人沮喪，不是嗎？

好吧，如果我們告訴您這些障礙背後的秘密在於所謂的非合成動畫呢？

這些動畫不能被瀏覽器有效地處理，為電腦的主處理器帶來額外的負載並導致效能問題。

但別擔心，有辦法解決這個問題。

在本部落格中，我們將討論非合成動畫以及如何修復它們。 我們將引導您完成簡單的步驟來平滑那些不穩定的動畫，使您的網站不僅速度更快，而且為訪客帶來愉快的導航體驗。

讓我們開始。

什麼是非合成動畫？

非合成動畫是一種主要由 CPU 而非 GPU（圖形處理單元）處理的網頁動畫。

這種處理方法通常會導致渲染效率較低，可能會導致幀速率較慢和使用者介面滯後等效能問題，尤其是在複雜的網頁或功能較弱的裝置上。

減少累積佈局偏移 (CLS) 有望提高您的 Lighthouse 效能得分。

為什麼避免非合成動畫對於 Web 效能至關重要？

出於多種原因，避免非合成動畫對於 Web 效能至關重要。 首先，由 CPU 處理的非合成動畫可能比 GPU 處理的動畫效率更低且速度更慢。

這種低效率通常會導致幀速率降低，導致動畫斷斷續續或滯後，這可能會對使用者體驗產生負面影響。 動畫更流暢的網頁感覺響應更靈敏，通常互動起來也更愉快。

其次，CPU 密集型動畫可能會導致系統資源緊張，尤其是在智慧型手機或舊電腦等功能較弱的裝置上。 這種壓力不僅會減慢動畫本身的速度，還會減慢網頁上運行的其他進程的速度。

因此，網站的整體效能可能會受到影響。 不僅如此，網站表現受損還會對數位行銷的成功產生負面影響。 請參閱此部落格「網站速度對數位行銷成功的影響」以了解具體方法。

注意：這裡有一些簡單的技巧，可幫助您加快 WordPress 網站的速度，從而獲得更好的效能。

非合成動畫如何影響頁面效能和瀏覽器渲染？

非合成動畫會嚴重影響頁面效能和瀏覽器渲染。 在效能方面，它們往往會減慢網站的速度。 發生這種情況是因為電腦的主處理器 (CPU) 過度工作，試圖在其他任務之上處理複雜的動畫。

結果，網站對使用者互動（例如點擊或滾動）的回應變得不那麼敏感。 這在處理能力較低的設備（例如手機）上尤其明顯。

關於瀏覽器渲染，非合成動畫通常會導致螢幕上的動作不連貫且不均勻。 由於 CPU 繪製和管理這些動畫的效率低於 GPU，因此動畫可能會出現斷斷續續且不流暢的情況。

這會影響視覺吸引力，並可能使網站感覺更慢，因為瀏覽器很難跟上渲染這些要求較高的動畫。 此外，CPU 的負擔可能會導致網頁載入時間更長，因為處理和顯示動畫元素需要更多時間。

如何檢測非合成動畫？

可以使用 Google PageSpeed Insights 和 GTmetrix 等效能分析工具來偵測非合成動畫。 以下是10 個最佳 WordPress 速度測試工具，可用於偵測非合成動畫。

這些工具分析網站效能的各個方面，包括動畫的渲染方式。

以下是如何使用它們：

谷歌頁面速度洞察

• 造訪PageSpeed Insights 網站，輸入您的網頁 URL，然後按一下「分析」。 該工具會評估您頁面的行動和桌面效能。

• 分析後，PageSpeed Insights 會提供分數和詳細報告。 查看報告的“診斷”部分。
• 尋找類似「避免非合成動畫」的警告。 這表明您的頁面具有可以優化以獲得更好性能的動畫。

GT矩陣

• 造訪GTmetrix網站，輸入您網站的 URL，然後開始測試。 GTmetrix 提供網站載入效能的全面分析。

• 分析完成後，您將獲得詳細報告。 GTmetrix更著重於一般效能指標，因此可能不會像PageSpeed Insights那樣直接指出非合成動畫。
• 尋找渲染時間和 CPU 負載指標，例如「總阻塞時間」或「互動時間」。
• 雖然 GTmetrix 可能沒有明確提及非合成動畫，但這些區域中的高值可能表明渲染過程效率低下，這可能是由於非合成動畫造成的。

此外，您還可以執行壓力測試來確定網站的效能。

瀏覽器如何處理動畫？

在處理動畫時，瀏覽器使用電腦的兩個主要部分：CPU（中央處理單元）和 GPU（圖形處理單元）。 簡單的動畫（例如更改顏色或文字）通常由 CPU 管理。

然而，對於更複雜的動畫，尤其是涉及行動或變換的動畫，瀏覽器會嘗試使用 GPU。 GPU 更適合這些任務，因為它設計用於處理圖形並且可以創建流暢的動畫。

但是，如果動畫設定不正確，瀏覽器可能仍會使用 CPU，從而使動畫不太流暢並減慢整個網站的速度。 因此，Web 開發人員努力確保他們的動畫適合 GPU，以獲得最佳效能。

非合成動畫的原因

為了解決非合成動畫的問題，首先必須了解導致它們的原因。 以下是一些常見原因：

動畫非複合屬性

對非複合屬性進行動畫處理通常會導致非複合動畫。 當動畫中使用「寬度」、「高度」或「邊距」等需要瀏覽器進行大量重新計算和重繪的屬性時，就會發生這種情況。

GPU 無法有效處理這些屬性，因此會為 CPU 帶來更多負載，使動​​畫不太流暢。

使用 JavaScript 製作動畫

使用 JavaScript 製作動畫也會導致問題。 基於 JavaScript 的動畫，尤其是在未最佳化的情況下，可能會對 CPU 提出很高的要求。 雖然 JavaScript 提供了對動畫的更多控制，但如果動畫複雜或編碼不高效，則可能會導致效能問題。

複雜的塗漆區域

動畫中複雜的繪製區域可能是另一個罪魁禍首。 當您在動畫過程中需要頻繁地重新繪製大面積區域時，會對系統造成很大的壓力。 對於快速變化的複雜圖形或高解析度影像尤其如此。

低效率的圖形或媒體

動畫中圖形或媒體使用效率低下是另一個常見原因。 未針對 Web 使用進行最佳化的高解析度圖像、影片或圖形可能會減慢動畫速度。 瀏覽器在渲染這些重元素時會更加困難，尤其是當它們是動畫序列的一部分時。

過度使用陰影和濾鏡

最後，在 CSS 中過度使用陰影和濾鏡可能會導致非合成動畫。 這些效果雖然在視覺上很吸引人，但卻是資源密集的。 將它們應用於行動元素會顯著影響效能，因為它們需要瀏覽器進行大量額外的處理。

注意：了解網站緩慢的其他原因。

如何避免非合成動畫

非合成動畫會顯著影響網站的效能，導致使用者體驗不佳。 解決這個問題的關鍵在於優化動畫的處理方式。

以下是解決此問題的逐步方法。 在進行修復之前，我將向您展示出現此錯誤時網站得分的樣子：

• 進行診斷時，我們發現了「避免非合成動畫」錯誤。

以下是解決此問題所需執行的步驟。

• 前往您的 WordPress 儀表板
• 選擇外觀 > 自訂
• 您可以在「其他 CSS」部分下找到 CSS 程式碼。 此程式碼很可能沒有使用最佳化的 css 動畫，從而導致發生此錯誤。

• 如果您是開發人員，您就會知道這段程式碼沒有經過最佳化。 以下是將為您的網站帶來奇蹟的更改。

更改 1：新增 Will-Change 屬性

此更改是為了通知瀏覽器即將發生的動畫更改，這有助於優化渲染效能。

 .my-動畫{

    寬度：100px；

    高度：100px；

    背景顏色：紅色；

    位置：絕對；

    will-change：變換、不透明度； /* 新增行 */

    動畫：complexMove 5s線性無限；

}

/* 其餘關鍵影格不變 */

變化 2：降低動畫複雜度

這裡，50%的比例變換已從比例(2)修改為比例(1.5)。 這降低了動畫的複雜性和強度。

 .my-動畫{

    /* ...其他屬性... */

    will-change：變換、不透明度； /* 假設更改 1 被保留 */

    動畫：complexMove 5s線性無限；

}

@關鍵影格複雜移動{

    /* ... 0% 和 100% 關鍵影格 ... */

    50% {

        變換：平移X（300％）旋轉（180度）縮放（1.5）； /* 修改後的行 */

        不透明度：0.5；

    }

    /* ... 100% 關鍵影格 ... */

}

最終程式碼如下所示：

 .my-動畫{

    寬度：100px；

    高度：100px；

    背景顏色：紅色；

    位置：絕對；

    will-change：變換、不透明度； /* 通知瀏覽器即將發生的變更 */

    動畫：complexMove 5s線性無限；

}

@關鍵影格複雜移動{

    0%, 100% {

        變換：translateX(0) 旋轉(0) 縮放(1)；

        不透明度：1；

    }

    50% {

        變換：平移X（300％）旋轉（180度）縮放（1.5）； /* 簡化規模以降低複雜度 */

        不透明度：0.5；

    }

}

• 只需刪除先前的程式碼並將此新程式碼複製並貼上到您的附加 css 中即可。 這不會改變動畫，但肯定會消除這個錯誤。

• 您可以看到該錯誤不再存在。
• 好處是，透過優化程式碼，您可以提高效能分數。 我們在本節開始時看到表現得分為 77。
• 這是改進後的性能得分：

因此，為了解決此錯誤，您必須記住一些一般提示：

技巧 1：優化 CSS 動畫

不要使用高度、寬度或左側等可能佔用資源的動畫屬性，而是使用
轉換
和
不透明度。 這些屬性是 GPU 加速的，可以由瀏覽器更有效地處理。

下面是優化前後的範例程式碼：

優化前：

 .animate-left {

    位置：相對；

    動畫：moveLeft 2s線性無限；

}

@keyframes moveLeft {

    由{左：0； }

    到{左：100px; }

}

優化後：

 .animate-left {

    位置：相對；

    動畫：moveLeft 2s線性無限；

}

@keyframes moveLeft {

    來自 { 變換：translateX(0); }

    到 { 變換：translateX(100px); }

}

技巧 2：利用 CSS「Will-Change」屬性的力量

使用will-change屬性通知瀏覽器近期將發生變化的元素。 這允許瀏覽器為更改做好準備和優化。

以下是如何使用 will-change 屬性；

• 在您的程式碼中插入以下行；

 will-change：變換、不透明度； /* 新增行 */

技巧 3：將動畫卸載到 GPU

將動畫卸載到 GPU（圖形處理單元）是一種優化網頁動畫的技術，使動畫更加流暢，並減少 CPU（中央處理單元）的負擔。

這種方法在解決非合成動畫問題方面特別有效，因為它利用 GPU 更有效地處理圖形任務的能力。

您可以使用動畫的變換和不透明度屬性將動畫卸載到 GPU，因為它們比寬度、高度、頂部或左側等動畫屬性更有效。

您可以使用變換和不透明度屬性來代替左和右。 這是一個例子：

未優化的程式碼：

 @keyframes moveLeft {

    由{左：0； }

    到{左：100px; }

}

優化程式碼：

 @keyframes moveLeft {

    來自 { 變換：translateX(0); }

    到 { 變換：translateX(100px); }

}

技巧 4：使用高效率的函式庫和工具

結合 GreenSock 動畫平台 (GSAP) 或 Velocity.js 等高效能函式庫可以非常有效地解決非合成動畫錯誤。

這些函式庫針對效能進行了最佳化，提供比標準 CSS 或 JavaScript 更流暢、更有效率的動畫。

若要合併 GSAP 庫，請依照下列步驟操作；

• 找到 GSAP 的 CDN 連結。
• 開啟要在其中使用 GSAP 的 HTML 檔案。
• 您需要將 CDN 連結放置在 <script> 標籤內。 理想情況下，該標籤應放置在 <body> 部分末尾附近。

 <!DOCTYPE html>

<html>

<頭>

    <標題>您的網頁</標題>

    <!-- 其他頭部元素 -->

</頭>

<正文>

    <!-- 您的 HTML 內容位於此 -->

    <!-- 正文末尾的 GSAP CDN 腳本 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</正文>

</html>

Cloudways 託管如何補充您的最佳化動畫

Cloudways Hosting透過 DigitalOcean、AWS 和 Google Cloud 等頂級雲端供應商提供的快速速度和較長的正常運行時間，透過優化的動畫增強網站。 其先進的快取解決方案（包括 Memcached、Varnish 和 Redis）可確保動畫的快速載入。 該平台的最佳化堆疊與 Cloudflare 的 Enterprise CDN 一起進一步提高了動畫效能，尤其是在高峰流量期間。 加上強大的安全功能，Cloudways 為動畫豐富的網站提供了理想的、經濟高效的託管環境。

概括

就是這樣。 我們探索了避免非合成動畫的關鍵策略，並專注於網路動畫的最佳實踐。

我們也討論了非合成動畫發生的原因以及它們如何影響 Web 效能和瀏覽器渲染。

如果您對此主題有任何疑問，請隨時與我們聯繫。