非合成アニメーションの問題の回避

Web サイトをクリックした後、スクロールするとカクカクしたり遅れたりしたことはありませんか?

イライラしますよね。

では、これらの障害の背後にある秘密が、非合成アニメーションと呼ばれるものにあると言ったらどうなるでしょうか?

これらのアニメーションはブラウザーによって効率的に処理されず、コンピューターのメイン プロセッサに余分な負荷がかかり、パフォーマンスの問題を引き起こします。

しかし、心配しないでください。これを修正する方法があります。

このブログでは、合成されていないアニメーションとその修正方法について説明します。 これらのぎくしゃくしたアニメーションを滑らかにして、Web サイトを高速化するだけでなく、訪問者にとって快適なナビゲートを実現するための簡単な手順を説明します。

さぁ、始めよう。

非合成アニメーションとは何ですか?

非合成アニメーションは、GPU (グラフィックス プロセッシング ユニット) ではなく主に CPU によって処理される Web アニメーションの一種です。

この処理アプローチは多くの場合、レンダリング効率の低下につながり、特に複雑な Web ページや性能の低いデバイスでは、フレーム レートの低下やユーザー インターフェイスの遅延などのパフォーマンスの問題を引き起こす可能性があります。

Cumulative Layout Shift (CLS) をトリミングすると、Lighthouse パフォーマンス スコアの向上が約束されます。

Web パフォーマンスに非合成アニメーションの回避が不可欠なのはなぜですか?

非合成アニメーションを避けることは、いくつかの理由から Web パフォーマンスにとって不可欠です。 まず、CPU によって処理される非合成アニメーションは、GPU によって処理されるアニメーションよりも効率が低く、遅くなる可能性があります。

この非効率性によりフレーム レートが低下することが多く、アニメーションが途切れたり遅れたりする原因となり、ユーザー エクスペリエンスに悪影響を与える可能性があります。 アニメーションがスムーズな Web ページは応答性が高く、一般に操作が快適です。

次に、CPU を大量に使用するアニメーションは、特にスマートフォンや古いコンピュータなどの性能の低いデバイスでは、システムのリソースに負担をかける可能性があります。 この負荷により、アニメーション自体だけでなく、Web ページ上で実行されている他のプロセスも遅くなる可能性があります。

その結果、Web サイトの全体的なパフォーマンスが低下する可能性があります。 これだけでなく、Web サイトのパフォーマンスが低下すると、デジタル マーケティングの成功に悪影響を及ぼす可能性があります。 その方法については、このブログ「ウェブサイトの速度がデジタル マーケティングの成功に与える影響」を参照してください。

注: ここでは、 WordPress サイトを高速化してパフォーマンスを向上させるための簡単なヒントをいくつか紹介します。

非合成アニメーションはページのパフォーマンスとブラウザのレンダリングにどのような影響を与えますか?

非合成アニメーションは、ページのパフォーマンスとブラウザーのレンダリングの両方に大きな影響を与える可能性があります。 パフォーマンスの面では、Web サイトの速度が低下する傾向があります。 これは、コンピュータのメイン プロセッサ (CPU) が他のタスクに加えて複雑なアニメーションを処理しようとして過負荷になるために発生します。

その結果、Web サイトはクリックやスクロールなどのユーザー操作に対する反応が鈍くなります。 これは、携帯電話などの処理能力が低いデバイスで特に顕著です。

ブラウザのレンダリングに関しては、合成されていないアニメーションでは、画面上で動きが途切れ途切れになって不均一になることがよくあります。 CPU はこれらのアニメーションの描画と管理において GPU よりも効率が低いため、アニメーションが途切れたり、滑らかでなくなったりすることがあります。

これは視覚的な魅力に影響を与え、ブラウザーがこれらの要求の厳しいアニメーションのレンダリングに追いつくのに苦労するため、Web サイトの速度が遅く感じる可能性があります。 さらに、アニメーション要素の処理と表示に時間がかかるため、CPU に負担がかかり、Web ページの読み込み時間が長くなる可能性があります。

合成されていないアニメーションを検出するにはどうすればよいですか?

非合成アニメーションの検出は、Google PageSpeed Insights や GTmetrix などのパフォーマンス分析ツールを使用して行うことができます。 ここでは、合成されていないアニメーションを検出するために使用できるWordPress スピード テスト ツールのベスト 10 を紹介します。

これらのツールは、アニメーションのレンダリング方法など、Web サイトのパフォーマンスのさまざまな側面を分析します。

使用方法は次のとおりです。

Google PageSpeed Insights

• PageSpeed Insights の Web サイトにアクセスし、Web ページの URL を入力して、[分析] をクリックします。 このツールは、モバイルとデスクトップの両方のパフォーマンスについてページを評価します。

• 分析後、PageSpeed Insights はスコアと詳細なレポートを提供します。 レポートの「診断」セクションを確認してください。
• 「非合成アニメーションは避けてください」のような警告を探してください。 これは、パフォーマンスを向上させるために最適化できるアニメーションがページに含まれていることを示しています。

GTメトリックス

• GTmetrix Web サイトにアクセスし、サイトの URL を入力してテストを開始します。 GTmetrix は、サイトの読み込みパフォーマンスの包括的な分析を提供します。

• 分析が完了すると、詳細なレポートが表示されます。 GTmetrix は一般的なパフォーマンス指標に重点を置いているため、PageSpeed Insights のような非合成アニメーションを直接指摘することはできない可能性があります。
• 「合計ブロック時間」や「インタラクティブまでの時間」など、レンダリング時間と CPU 負荷メトリクスを探します。
• GTmetrix は非合成アニメーションについて明示的に言及していない可能性がありますが、これらの領域の値が高い場合は、非合成アニメーションが原因である可能性がある非効率なレンダリング プロセスを示している可能性があります。

さらに、ストレス テストを実行して Web サイトのパフォーマンスを判断することもできます。

ブラウザはアニメーションをどのように処理しますか?

アニメーションを処理する場合、ブラウザはコンピュータの 2 つの主要部分、CPU (中央処理装置) と GPU (グラフィックス処理装置) を使用します。 色やテキストの変更などの単純なアニメーションは、通常、CPU によって管理されます。

ただし、より複雑なアニメーション、特に動きや変形を伴うアニメーションの場合、ブラウザーは GPU を使用しようとします。 GPU はグラフィックスを処理するように設計されており、滑らかで滑らかなアニメーションを作成できるため、これらのタスクには適しています。

ただし、アニメーションが正しく設定されていない場合、ブラウザはそのために CPU を使用し続ける可能性があり、アニメーションのスムーズさが低下し、Web サイト全体の速度が低下します。 そのため、Web 開発者は、アニメーションが GPU に適しており、最高のパフォーマンスが得られるように努めています。

非合成アニメーションの原因

非合成アニメーションの問題の解決に向けて進むには、まずその原因を理解することが重要です。 一般的な理由は次のとおりです。

非複合プロパティのアニメーション化

非合成プロパティをアニメーション化すると、多くの場合、非合成アニメーションが生成されます。 これは、ブラウザに多くの再計算と再描画を必要とする「幅」、「高さ」、「マージン」などのプロパティがアニメーションで使用されている場合に発生します。

これらのプロパティは GPU によって効率的に処理されないため、CPU への負荷が増大し、アニメーションがスムーズでなくなります。

JavaScript を使用したアニメーション化

JavaScript を使用してアニメーション化すると、問題が発生する可能性もあります。 JavaScript ベースのアニメーションは、特に最適化されていない場合、CPU に多くの要求を与える可能性があります。 JavaScript ではアニメーションをより詳細に制御できますが、アニメーションが複雑であったり、効率的にコーディングされていない場合には、パフォーマンスの問題が発生する可能性があります。

複雑な塗装領域

アニメーション内の複雑なペイント領域も別の原因となる可能性があります。 アニメーション中に頻繁に再ペイントする必要がある広い領域がある場合、システムに大きな負担がかかります。 これは、複雑なグラフィックスや急速に変化する高解像度の画像に特に当てはまります。

非効率的なグラフィックスまたはメディア

アニメーションでの非効率的なグラフィックスやメディアの使用も、よくある原因です。 Web での使用に最適化されていない高解像度の画像、ビデオ、グラフィックスを使用すると、アニメーションの速度が低下する可能性があります。 ブラウザーは、特にアニメーション シーケンスの一部である場合、これらの重い要素をレンダリングするのにさらに苦労します。

シャドウとフィルターの過度の使用

最後に、CSS でシャドウやフィルターを過度に使用すると、アニメーションが合成されなくなる可能性があります。 これらの効果は、見た目は魅力的ですが、リソースを大量に消費します。 これらを移動要素に適用すると、ブラウザーに多くの追加処理が必要となるため、パフォーマンスに大きな影響を与える可能性があります。

注: Web サイトが遅くなる他の原因については、こちらをご覧ください。

非合成アニメーションを回避する方法

合成されていないアニメーションは Web サイトのパフォーマンスに大きな影響を与え、ユーザー エクスペリエンスの低下につながる可能性があります。 この問題を解決する鍵は、アニメーションの処理方法を最適化することにあります。

この問題を解決するための段階的なアプローチを次に示します。 修正に進む前に、このエラーが発生した場合の Web サイトのスコアがどのように表示されるかを示します。

• 診断に進むと、「非合成アニメーションを避ける」エラーが見つかりました。

この問題を解決するには次の手順に従う必要があります。

• WordPress ダッシュボードに移動します
• 外観 > カスタマイズを選択します
• CSS コードは「追加 CSS」セクションにあります。 このコードでは最適化された CSS アニメーションが使用されていないため、このエラーが発生する可能性があります。

• 開発者であれば、このコードが最適化されていないことはすでにご存知でしょう。 あなたのウェブサイトに驚くべき変化をもたらします。

変更 1: Will-Change プロパティの追加

この変更は、レンダリング パフォーマンスの最適化に役立つ、今後のアニメーションの変更についてブラウザーに通知することに関するものです。

 .my-アニメーション {

    幅: 100ピクセル;

    高さ: 100ピクセル;

    背景色: 赤;

    位置: 絶対;

    will-change: 変換、不透明度; /* 行を追加 */

    アニメーション: complexMove 5 秒リニア無限。

}

/* 残りのキーフレームは変更されません */

変更 2: アニメーションの複雑さを軽減する

ここでは、50% でのスケール変換がscale(2)からscale(1.5)に変更されています。 これにより、アニメーションの複雑さと強度が軽減されます。

 .my-アニメーション {

    /* ... その他のプロパティ ... */

    will-change: 変換、不透明度; /* 変更 1 が保持されていると仮定します */

    アニメーション: complexMove 5 秒リニア無限。

}

@keyframes complexMove {

    /* ... 0% および 100% のキーフレーム ... */

    50% {

        変換: 移動X(300%) 回転(180度) スケール(1.5); /* 変更された行 */

        不透明度: 0.5;

    }

    /* ... 100% キーフレーム ... */

}

最終的なコードは次のようになります。

 .my-アニメーション {

    幅: 100ピクセル;

    高さ: 100ピクセル;

    背景色: 赤;

    位置: 絶対;

    will-change: 変換、不透明度; /* 今後の変更をブラウザに通知します */

    アニメーション: complexMove 5 秒リニア無限。

}

@keyframes complexMove {

    0%、100% {

        変換: 変換X(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 (グラフィックス プロセッシング ユニット) にオフロードすることは、Web アニメーションを最適化し、アニメーションをよりスムーズにし、CPU (中央処理装置) への負担を軽減する手法です。

このアプローチは、グラフィック タスクをより効率的に処理する GPU の機能を活用するため、非合成アニメーションの問題を解決するのに特に効果的です。

アニメーションの Transform プロパティと Opacity プロパティを使用してアニメーションを GPU にオフロードできます。これは、幅、高さ、上、左などのプロパティをアニメーション化するよりも効率的であるためです。

left と right の代わりに、transform プロパティと opacity プロパティを使用できます。 以下に例を示します。

最適化されていないコード:

 @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>

<頭>

    <title>あなたのウェブページ</title>

    <!-- その他の head 要素 -->

</head>

<本文>

    <!-- HTML コンテンツがここに入ります -->

    <!-- 本文の最後にある GSAP CDN スクリプト -->

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

</body>

</html>

Cloudways ホスティングが最適化されたアニメーションをどのように補完できるか

Cloudways Hosting は、 DigitalOcean、AWS、Google Cloud などのトップ クラウド プロバイダーからの高速速度と高い稼働時間を提供することで、最適化されたアニメーションで Web サイトを強化します。 Memcached、Varnish、Redis などの高度なキャッシュ ソリューションにより、アニメーションの迅速な読み込みが保証されます。 プラットフォームの最適化されたスタックと Cloudflare の Enterprise CDN により、特にピークトラフィック時のアニメーションのパフォーマンスがさらに向上します。 Cloudways は、堅牢なセキュリティ機能と組み合わせて、アニメーションが豊富な Web サイトに理想的でコスト効率の高いホスティング環境を提供します。

まとめ

以上です。 Web アニメーションのベスト プラクティスに焦点を当て、非合成アニメーションを回避するための重要な戦略を検討しました。

また、合成されていないアニメーションが発生する原因と、それが Web パフォーマンスやブラウザーのレンダリングにどのような影響を与えるかについても説明しました。

このトピックに関してご質問がございましたら、お気軽にお問い合わせください。