「アニメーション コンテンツでの動画フォーマットの使用」の直し方｜原因と改善方法を解説【PageSpeed Insights】
Googleの無料診断ツール「PageSpeed Insights」で「アニメーション コンテンツでの動画フォーマットの使用」という指摘を見つけて、どう対応すればいいか迷っていませんか。結論からいうと、これはサイト内のアニメーションGIFなど容量の大きい動画的コンテンツが原因で表示速度が落ちていることを示す指摘で、対処法は「GIFをMP4やWebMといった動画フォーマットに変換する」、もしくは「そもそもそのアニメーションが本当に必要かを見直す」ことです。この記事では、指摘の意味と具体的な改善方法を解説します。
「アニメーション コンテンツでの動画フォーマットの使用」とは?
PageSpeed Insightsは、自分のWebサイトの表示速度を計測し、改善のヒントを示してくれる無料ツールです。計測自体はURLを入力するだけと簡単ですが、思ったより低いスコアが出て、サイト構成の見直しを迫られることも少なくありません。
「アニメーション コンテンツでの動画フォーマットの使用」は、Lighthouse(PageSpeed Insightsの診断エンジン)の項目のひとつで、英語では「Use video formats for animated content」と表示されます。サイト内に高画質なアニメーションGIFや動画が置かれていて、それが原因でページの読み込みが遅くなっていると判断されたときに表示される指摘です。特に、容量の大きいアニメーションGIFを使っている場合に指摘されやすくなります。
改善方法:アニメーションを動画フォーマットに変換する
この指摘を解消して読み込み速度を上げる基本的な方法は、アニメーションのファイル形式を、より効率の良い動画フォーマットに変更することです。画質を大きく落とすことなく、ファイルサイズだけを抑えられるのがポイントです。
具体的には、「MP4」や「WebM」が有効なフォーマットとして挙げられます。どちらも高画質な動画をコンパクトなサイズにまとめられる形式で、多くの動画プラットフォームでも標準的に使われています。MP4はほぼすべてのブラウザでサポートされている一方、WebMに対応していないブラウザも一部あるため、可能であれば両方のファイルを用意し、ブラウザに応じて出し分けるのが理想的です。
改善作業は2段階で考える
実際の作業は、大きく2段階に分けて考えるとスムーズです。第一段階は「アニメーションファイル自体の最適化」、第二段階は「そのファイルを埋め込むウェブページ側の最適化」です。どちらか一方だけでは表示速度の改善効果は限定的で、両方をあわせて行う必要があります。
ファイル側の最適化では、まず圧縮ツールでアニメーションファイルの容量を小さくします。画質を落としすぎないよう、圧縮率を確認しながら調整しましょう。次に、圧縮したデータをHTML5に対応したMP4やWebM形式に変換します。あわせて、アニメーションに音声データが含まれている場合は削除しておくと、ファイルサイズをさらに小さくできます。
また、アニメーションファイルをページに直接埋め込むのではなく、サーバーからストリーミング配信したり、CDN(コンテンツ配信ネットワーク)経由で配信したりする方法も有効です。ページ自体が軽くなり、表示速度の改善につながります。
ページ側の最適化と「そもそも必要か」の見直し
ウェブページ側の最適化としては、アニメーションファイルの表示サイズをあらかじめ指定しておくことや、ファーストビューの表示が完了するまで動画データの読み込みを遅延させる「遅延読み込み」を設定することが挙げられます。
ただ、もっとも根本的な対策は「そのアニメーションコンテンツが、サイトに本当に必要かどうかを見直すこと」です。アニメーションや動画はアイキャッチとしては効果的ですが、必須のコンテンツとは限りません。表示速度という大切な指標を犠牲にしてまで掲載する価値があるかどうか、一度立ち止まって考えてみる価値があります。
なお、ここで紹介したのは動画・アニメーションまわりの対策です。静止画については、近年Chrome・Firefox・Safari(16以降)で利用できるようになった「AVIF」など、より新しい画像フォーマットへの最適化も効果的です。画像まわりの具体的な改善方法は「適切なサイズの画像」とは？改善方法も解説【PageSpeed Insights】を、ページ全体の重さについては「過大なネットワーク ペイロードの回避」とは？改善方法も解説【PageSpeed Insights】もあわせてご覧ください。
表示速度はサーバー環境にも左右される
動画フォーマットや画像の最適化を行っても表示速度が思うように改善しない場合は、サーバーそのものの性能がボトルネックになっている可能性があります。コンテンツをいくら軽くしても、サーバーの応答が遅ければページ全体の表示は遅くなってしまうからです。表示速度に本気で取り組むなら、サーバー環境の見直しも選択肢のひとつです。どのサーバーが速いかは、レンタルサーバー速度比較｜WordPressが速いサーバーおすすめ5選で詳しく比較されているので、参考にしてみてください。
