「合成されていないアニメーションは使用しないでください」とは？PageSpeed InsightsでのCLS改善について

「合成されていないアニメーション」を問題視する理由

WEBサイトの表示速度改善に取り組んでいる方なら、一度は目にしたことがあるかもしれません。Lighthouseのパフォーマンス項目で表示される「合成されていないアニメーションは使用しないでください」というメッセージ。

実際、この警告メッセージを目にした時、多くの開発者が「一体何が問題なんだ？」と困惑してしまいます。特に、今回ご紹介する事例のように、実際には何も問題がないケースで誤った警告が表示されることもあるんです。

事例：background-position-xプロパティの誤判定

あるブログでは、background-position-xプロパティを使用してグラデーション背景を横方向にアニメーションさせる効果を実装していました。しかし、Lighthouseのパフォーマンス検証で「合成されていないアニメーションは使用しないでください」という警告が表示され、具体的には「サポートされていない CSS プロパティ: background-position-x」が原因として指摘されました。

ところが、これは明らかに誤判定でした。Can I useで確認すると、background-position-xプロパティは2022年当時も現在も、ほぼ全てのモダンブラウザでサポートされています。

これは、Lighthouseのアルゴリズムが完璧ではないことを示している典型的な例です。しかし、この警告の背後にある重要な概念を理解することで、本当に効果的な表示速度改善が可能になります。

「合成されていないアニメーション」とは何か？基本概念を理解する

ブラウザのレンダリングパイプライン

まず、なぜLighthouseが「合成されていないアニメーション」を問題視するのかを理解するために、ブラウザのレンダリングパイプラインについて説明します。

ブラウザがHTMLやCSSを画面に表示するプロセスは、以下の5つの段階に分かれています：

1. JavaScript実行
2. スタイル計算（Style）
3. レイアウト計算（Layout）
4. ペイント（Paint）
5. コンポジット（Composite）

この中で、アニメーションがどの段階で処理されるかによって、パフォーマンスが大きく変わります。

理想的なのは「コンポジット層」でのアニメーション

最もパフォーマンスが良いのは、**コンポジット層（Composite Layer）**でのアニメーション処理です。これは、GPUを使って効率的に処理される層で、メインスレッドに負荷をかけません。

一方、「合成されていないアニメーション」とは、スタイル計算、レイアウト計算、ペイント段階で処理されるアニメーションのことです。これらの処理はCPUで行われるため、特に低スペックのデバイスでは動作が重くなってしまいます。

パフォーマンスに影響する理由：CPUとGPUの違い

CPUでの処理（非合成アニメーション）

非合成アニメーションは、以下のような問題を引き起こします：

• メインスレッドの負荷増加：JavaScriptの実行や他の重要な処理と競合
• 60FPSの維持が困難：滑らかなアニメーションが実現できない
• バッテリー消費の増加：特にモバイルデバイスで顕著
• CLS（Cumulative Layout Shift）の悪化：要素の実際の移動により発生

GPUでの処理（合成アニメーション）

対照的に、合成アニメーションは以下の利点があります：

• 専用ハードウェアによる高速処理：GPUの並列処理能力を活用
• メインスレッドの負荷軽減：他の処理に影響を与えない
• 60FPSの安定した維持：滑らかなアニメーションが実現
• 低消費電力：効率的な処理により電池の持ちが向上

実際にパフォーマンスに影響するCSSプロパティ一覧

避けるべきプロパティ（非合成）

以下のプロパティをアニメーションで使用すると、レイアウト計算やペイント処理が発生し、パフォーマンスが悪化します：

レイアウトを引き起こすプロパティ：

• width, height
• top, left, right, bottom
• margin, padding
• border-width
• font-size

ペイントを引き起こすプロパティ：

• color
• background-color
• background-image
• background-position（今回の事例のように、場合によっては誤判定される）
• box-shadow
• border-radius

推奨するプロパティ（合成）

以下のプロパティは、コンポジット層で処理されるため、高パフォーマンスなアニメーションが実現できます：

最適化されたプロパティ：

• transform（translate, scale, rotate, skew）
• opacity
• filter（一部制限あり）

例えば、要素を移動させたい場合：

Copy/* 非推奨：レイアウト計算が発生 */
.element {
  animation: moveLeft 1s ease-in-out;
}

@keyframes moveLeft {
  from { left: 0; }
  to { left: 100px; }
}

/* 推奨：コンポジット層で処理 */
.element {
  animation: moveLeftOptimized 1s ease-in-out;
}

@keyframes moveLeftOptimized {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

will-changeプロパティを活用した事前最適化

will-changeプロパティとは

will-changeプロパティは、ブラウザに対して「この要素のこのプロパティがこれから変化する予定です」という事前通知を行うCSSプロパティです。

Copy.element {
  will-change: transform, opacity;
}

will-changeの効果的な使用方法

使用タイミング：

• アニメーション開始前に設定
• アニメーション終了後にautoに戻す
• ホバーエフェクトなどの短時間アニメーション用

実装例：

Copy.card {
  transition: transform 0.3s ease;
}

.card:hover {
  will-change: transform;
  transform: translateY(-5px);
}

.card:not(:hover) {
  will-change: auto;
}

will-changeの注意点

will-changeプロパティは強力ですが、使いすぎると逆効果になることもあります：

• メモリ使用量の増加：GPU層の作成によりメモリを消費
• すべての要素に適用は禁物：必要な要素にのみ限定使用
• アニメーション終了後は必ず解除：不要な最適化は避ける

実践的な最適化テクニック

1. 3D変換を活用したGPUアクセラレーション

ブラウザにGPU処理を強制させるテクニックとして、3D変換を使用する方法があります：

Copy.element {
  transform: translateZ(0);
  /* または */
  transform: translate3d(0, 0, 0);
}

これにより、2Dアニメーションでも強制的にGPU層で処理されます。

2. アニメーションタイミングの最適化

Copy.smooth-animation {
  animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

3. バッチ処理による効率化

複数のアニメーションを同時に実行する場合は、開始タイミングを調整して処理を分散させます：

Copy.element-1 { animation-delay: 0s; }
.element-2 { animation-delay: 0.1s; }
.element-3 { animation-delay: 0.2s; }

Lighthouseでの検証と改善方法

Lighthouseでの確認手順

1. Chrome DevToolsを開く（F12キー）
2. Lighthouseタブを選択
3. Performance項目にチェック
4. 分析開始

「合成されていないアニメーション」の解決方法

Lighthouseで指摘された場合の対処法：

1. 該当するCSSプロパティを確認
2. transformやopacityに変更可能か検討
3. will-changeプロパティの追加
4. 再度Lighthouseで検証

パフォーマンススコアの改善事例

実際の改善事例では、以下のような改善が見られました：

• パフォーマンススコア：70点 → 95点
• First Contentful Paint：2.5秒 → 1.2秒
• Largest Contentful Paint：3.8秒 → 1.8秒
• Cumulative Layout Shift：0.15 → 0.05

landinghubでのパフォーマンス最適化サービス

ここまで説明してきた表示速度の改善は、技術的な知識がない方には複雑に感じられるかもしれません。そんな時は、landinghubのようなサービスを活用することで、プロフェッショナルなサポートを受けることができます。

landinghubの特徴

landinghubでは、以下のような包括的なパフォーマンス最適化サービスを提供しています：

技術的な最適化：

• CSSアニメーションの最適化
• 画像の最適化と遅延読み込み
• JavaScriptの最適化
• サーバーサイドの高速化

Lighthouse対応：

• 定期的なパフォーマンス監視
• 問題点の早期発見と解決
• 継続的な改善提案

実際に、多くのクライアントでLighthouseスコアの大幅な改善を実現しており、その結果としてコンバージョン率の向上も達成しています。

モバイルデバイスでの最適化

モバイル特有の課題

モバイルデバイスでは、デスクトップ以上にパフォーマンスの最適化が重要になります：

• CPUの処理能力が限定的
• バッテリー消費への影響が大きい
• ネットワーク速度の制限
• メモリ容量の制約

モバイル向け最適化テクニック

Copy/* モバイル向けアニメーション */
@media (max-width: 768px) {
  .element {
    animation-duration: 0.2s; /* 短縮 */
    will-change: transform;
  }
}

/* 低スペック端末での配慮 */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

実際のコード例とベストプラクティス

Before（非最適化）

Copy.sliding-element {
  position: relative;
  left: 0;
  animation: slideIn 1s ease-in-out;
}

@keyframes slideIn {
  from { left: -100px; }
  to { left: 0; }
}

After（最適化済み）

Copy.sliding-element {
  will-change: transform;
  animation: slideInOptimized 1s ease-in-out;
}

@keyframes slideInOptimized {
  from { 
    transform: translateX(-100px);
    opacity: 0;
  }
  to { 
    transform: translateX(0);
    opacity: 1;
  }
}

/* アニメーション終了後のクリーンアップ */
.sliding-element.animation-complete {
  will-change: auto;
}

トラブルシューティングと解決策

よくある問題とその解決法

問題1：アニメーションがぎこちない

Copy/* 解決策：easing関数の調整 */
.element {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

問題2：アニメーション中にレイアウトが崩れる

Copy/* 解決策：固定サイズの指定 */
.element {
  width: 200px;
  height: 100px;
  transform: translateX(50px);
}

問題3：複数のアニメーションが重い

Copy/* 解決策：アニメーションの段階的実行 */
.element-1 { animation-delay: 0s; }
.element-2 { animation-delay: 0.1s; }
.element-3 { animation-delay: 0.2s; }

デバッグツールの活用

Chrome DevToolsの「Performance」タブを使用して、アニメーションの詳細な分析が可能です：

1. フレームレートの確認
2. CPU使用率の監視
3. レイアウト計算の頻度チェック
4. ペイント処理の分析

2025年最新の動向と今後の対策

Core Web Vitalsの変化

Googleは継続的にCore Web Vitalsの指標を更新しており、2025年現在では以下の点が重要視されています：

• **Interaction to Next Paint（INP）**の重要性向上
• アニメーションの滑らかさがユーザー体験に与える影響
• バッテリー消費への配慮

新しい技術への対応

CSS Container Queries

Copy.element {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .element {
    animation: complexAnimation 1s ease-in-out;
  }
}

CSS Scroll-driven Animations

Copy.element {
  animation: scrollAnimation linear;
  animation-timeline: scroll();
}

まとめ：効果的なアニメーション最適化の実践

「合成されていないアニメーションは使用しないでください」というLighthouseの警告は、時に誤判定を含むことがありますが、その背後にある原理を理解することで、真に効果的な最適化が可能になります。

重要ポイントの再確認

1. transformとopacityを優先的に使用
2. will-changeプロパティの適切な活用
3. アニメーション終了後のクリーンアップ
4. モバイルデバイスへの配慮
5. 定期的なパフォーマンス監視

継続的な改善のために

WEBサイトのパフォーマンス最適化は、一度行えば終わりではありません。定期的な監視と改善が必要です。特に、新しいコンテンツを追加する際や、デザインを変更する際は、常にパフォーマンスへの影響を考慮することが重要です。

もし、これらの最適化作業が複雑に感じられる場合は、landinghubのような専門サービスを活用することで、プロフェッショナルなサポートを受けながら、効果的にサイトの表示速度を改善することができます。

表示速度の改善は、ユーザー体験の向上だけでなく、SEO効果やコンバージョン率の向上にも直結する重要な要素です。今回ご紹介したテクニックを活用して、より高速で快適なWEBサイトを実現してください。