「アニメーション コンテンツでの動画フォーマットの使用」とは？改善方法も解説【PageSpeed Insights】
Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「アニメーション コンテンツでの動画フォーマットの使用」とはどういう意味か、また診断結果を改善する方法についても解説します。
「アニメーション コンテンツでの動画フォーマットの使用」とは？
自社ウェブサイトの通信速度を計測してくれて、問題がある場合にはその改善策も提案してくれる便利かつ無料で使用できるツールがPageSpeed Insightsです。計測はとても簡単ですから多くのエンジニアが試していますが、意外と低いスコアが出てウェブサイトの構成を考え直す必要に迫られることもあります。その中に「アニメーションコンテンツでの動画フォーマットの使用」という項目があります。これは高画質のアニメーションや動画をサイトに掲載していて、それが原因で読み込み速度が遅くなっていると判断された場合に指摘される項目です。
「アニメーション コンテンツでの動画フォーマットの使用」の改善方法
この項目を改善して読み込み速度をあげるためには、アニメーションなどの動画コンテンツのフォーマットを変更することが有効です。ウェブユーザーの好みに応える高画質なマルチメディアコンテンツを犠牲にすることなく、読み込み速度も向上させるためのフォーマットを確認していきます。まず有効なフォーマットは高画質な動画ファイルをコンパクトなサイズにまとめてくれるMP4やWebMです。多くの動画サイトのプラットフォームでも標準フォーマットとして採用されています。ただしMP4はほとんどのブラウザでサポートされている形式ですが、WebMをサポートしているブラウザは限定されます。
実際の作業は二段階に分けて考えます。第一段階はアニメーションファイルの最適化を行うことです。第二段階はそのファイルを埋め込むウェブページの最適化を行うことです。両方を正しく整えなければ表示速度の改善は見込めませんので注意が必要です。まずアニメーションファイルを最適化するためにはファイルの圧縮を行います。圧縮ツールを使うので特に難しいことはありませんが、注意することは画質を落とさないということです。次に圧縮したデータをHTML5に準拠したファイル形式にフォーマットします。前述のようにMP4かWebMが望ましい形式です。またアニメーションファイルから音声データを消去するとファイルのサイズがダウンします。さらにアニメーションファイルを直接サイトに埋め込むのではなく、サーバーからストリーミングさせたり、コンテンツ配信サイト経由で視聴できるようにするとウェブページそのものが軽くなり表示が早くなります。
ウェブサイトを最適化するためには、アニメーションファイルのサイズを規定したり、ファーストページが読み込まれるまで動画データの読み込みを延期させたりといった工夫が必要になります。ただ、一番大切な対策は「そのアニメーションコンテンツが本当にサイトにとって必要不可欠なものかどうかを再検討すること」です。アニメーションなどの動画がサイトに掲載されているとアイキャッチにはなりますが、必ずしも必要とは限りません。そこに多量のリソースを割いた結果、もっと大切な表示速度を犠牲にしてしまっているなら、根本的な解決はアニメーションファイルを多用しないということになります。
