予算内でメディアのパフォーマンスを向上させる方法
公開: 2022-03-10この記事は、Cloudinaryの親愛なる友人たちに親切にサポートされており、コミュニティがあらゆるブラウザ、デバイス、帯域幅でデジタルエクスペリエンスをすばやく簡単に作成、管理、提供できるように支援しています。 ありがとう！
アメリカの学者メイソン・クーリーは、人生の難しい事実を巧みに説明しました。「予算はお金から楽しみを奪います。」 間違いなく、メディアはWebサイトを活気づけ、魅力、興奮、陰謀を加え、ページにとどまり、頻繁に再訪するように誘惑することは言うまでもありません。 ただし、長期的には制御不能な支出が悪化するのと同じように、予算のないデジタルメディアもサイトのパフォーマンスを低下させます。
その好例：ページの読み込みがわずか1秒遅くなると、Amazonの年間売上高は16億ドルになる可能性があります。 ページの読み込み速度に影響を与える多くの要因の中で、メディアは重要なものです。 したがって、メディアの最適化を優先することが切実に必要です。 そのタスクに適切にお金を費やし、メディアの予算を立てることで、長期的には大幅な節約と利益を得ることができます。
パフォーマンス予算
「パフォーマンスバジェットは'...まさにそのように聞こえます。ページに'バジェット'を設定し、ページがそれを超えないようにします。 これは特定の読み込み時間である可能性がありますが、通常、予算をリクエストの数やページのサイズに分割すると、会話がしやすくなります。」
—ティム・カドレック
Webエクスペリエンスを計画し、パフォーマンスの低下を防ぐためのメカニズムとしてのパフォーマンスバジェットは、次の基準で構成されている可能性があります。
- 全体のページの重み、
- HTTPリクエストの総数、
- 特定のモバイルネットワークでのページ読み込み時間、
- 最初の入力遅延（FID）
- First Contentful Paint（FCP）、
- 累積レイアウトシフト（CLS）、
- 最大のコンテンツフルペイント（LCP）。
Vitaly Friedmanには、Webパフォーマンスに影響を与えるコンポーネントと、最適化手法に関する役立つヒントを説明する優れたチェックリストがあります。 これらのコンポーネントに精通することで、パフォーマンスの目標を設定できるようになります。
明確に文書化されたパフォーマンス目標により、さまざまなチームがコンテンツの最適な配信について有意義な会話をすることができます。 たとえば、予算は、ページに5つの画像（または3つの画像と1つのビデオ）を含めるかどうかを決定するのに役立ちますが、それでも計画された制限内にとどまります。
ただし、スタンドアロンのメトリックとしてパフォーマンスバジェットを設定しても、あまり役に立たない場合があります。 そのため、パフォーマンスを組織の目標に関連付ける必要があります。
業績
最適でないビデオや画像に大量のバイトを散りばめた場合、リッチメディアエクスペリエンスはそれほどリッチではなくなります。 人々に購入を促す、教育する、やる気を起こさせる、助けやボランティアを求めるなどの成果を達成するための組織が存在します。 Webプレゼンスを持っている人なら誰でも、さまざまなパフォーマンス測定値がビジネス指標に与える影響の関係を高く評価するでしょう。
WPOStatsは、文字通り何百ものケーススタディを強調しており、パフォーマンスが数百ミリ秒から数秒に低下すると、年間売上が大幅に減少する可能性があることを示しています。 このような関係を描くことは、パフォーマンスがビジネスに与える影響を追跡し、最終的には組織のパフォーマンス文化を構築するのに大いに役立ちます。
同様に、遅いサイトはコンバージョンに劇的な影響を与える可能性があります。 オンラインビジネスが直面する困難な課題は、パフォーマンス予算内にとどまりながら、視聴者を引き付けることの間の適切なバランスを見つけることです。
視聴者エンゲージメントの重要なコンポーネントが最適化されたビジュアルメディアであることは驚くことではありません。たとえば、関連性があり、興味深く、魅力的なビジュアルとともに、製品やサービスに関するストーリーを織り交ぜた魅力的なビデオです。
MITの神経科学者によると、私たちの脳は13ミリ秒未満で視覚メディアを吸収して理解できますが、テキストは平均的な読者が理解するのに3.3分以上かかることがあります。多くの場合、テキストを読み直して他の場所を相互参照した後です。 マイクロビデオコンテンツ（通常はわずか10〜20秒の長さ）が多くの場合、大きなエンゲージメントとコンバージョンの向上をもたらすのも不思議ではありません。
動画の魅力
オンラインで買い物をしている間、私たちは詳細な製品画像を見ることを期待しています。 何年もの間、私は、たとえば、製品の使用方法や組み立て方法、または実際の使用例を示すビデオで補完される製品を閲覧することを好むようになりました。
私の個人的な経験とは別に、多くの研究がビデオコンテンツの重要性を証明しています。
- 消費者の96％は、オンラインでの購入を決定する際に動画が役立つと感じています。
- オンライン買い物客の79％は、Webページのテキストを読むよりも、製品に関する情報をビデオで見ることを好みます。
- 適切な製品ビデオは、コンバージョンを80％以上増やすことができます。
ウェブ上での動画配信について言えば、
「平均的なビデオの重みは毎年劇的に増加しており、デスクトップよりもモバイルで増加しています。 場合によっては、モバイルデバイスには高解像度の画面があることが多いため、これが保証される場合もありますが、HTMLのみを使用してさまざまなビデオサイズを提供する機能がないことが原因である場合もあります。 ウェブ上の多くの大きな動画はマーケティングページに手動で配置されており、適切なサイズを配信するための高度なメディアサーバーがありません。したがって、将来的には、レスポンシブ画像で見られるような動画配信用のシンプルなHTML機能が表示されることを期待しています。 」
—スコット・ジェール
同じ感情がConvivaの2020年第4四半期のストリーミング状態（登録が必要）によって伝えられ、携帯電話では他のデバイスよりもバッファリングの問題が20％多く、ビデオ開始の失敗が19％高く、開始時間が5％長くなっています。
レンダリングの問題は別として、特にブラウザの最適なフォーマットを配信できない場合、ビデオ配信は帯域幅のコストを上昇させる可能性があります。 また、コンテンツ配信ネットワーク（CDN）または複数のCDNを使用してユーザーを最も近いエッジ領域にマッピングして遅延を減らす場合（最適ではないルーティングと呼ばれる方法）、ビデオの開始が遅くなる可能性があります。
同様に、最適化されていない画像がページの肥大化の主な原因でした。 Web Almanacによると、モバイルデバイスまたはデスクトップデバイスに送信されるイメージバイトの差は非常に小さいため、余分なバイトをすべて必要としないデバイスでは、帯域幅がさらに浪費されます。
間違いなく、魅力的でありながら最適化されていないコンテンツで船外に出ると、ビジネスの目標が損なわれます。そこで、バランスの芸術が活躍します。
パフォーマンスとメディアコンテンツのバランスをとる技術
リッチメディアはユーザーエンゲージメントを促進できますが、それらを配信するコストとWebサイトのパフォーマンスおよびビジネス目標とのバランスを取る必要があります。 1つの代替手段は、YouTubeやVimeoなどのサードパーティを介してビデオをホストおよび配信することです。
ただし、帯域幅の節約にもかかわらず、そのアプローチにはコストがかかります。 コンテンツ所有者として、完全にカスタマイズされたブランドエクスペリエンスを構築したり、パーソナライズを提供したりすることはできません。 そしてもちろん、画像をホストして配信する必要があります。
コンテンツをオフロードする必要はありません。 利用可能な他のオプションもあります。 次の手順を実行して、最適なメディア配信のためにシステムを刷新することを検討してください。
現在の使用法を理解する
あなたのウェブページの重みとそれらのメディア資産のサイズを研究してください。 Webリサーチの専門家であるTammyEvertsは、ページのサイズがモバイルの場合は1 MB未満、その他の場合は2MB未満にすることを推奨しています。 さらに、重要なページに表示されるリソースを特定します。
たとえば、テキストの段落と関連する画像を短いビデオに置き換えることはできますか？ その決定はあなたのビジネス目標にどのように影響しますか？ この段階で、Real User Monitoring（RUM）とAnalyticsを確認し、コンバージョン率とエンゲージメント率の向上につながる重要なページを特定する必要がある場合があります。
また、LightHouseなどのツールを使用して、ツールキットの一部としてGoogleのCore Web Vitals（CWV）を総合的に追跡してください。 CrUXのような実ユーザー監視（RUM）を介してCWVを測定することもできます。 CWVはGoogleからクローラーへのシグナルでもあるため、最大コンテンツペイント（LCP）、最初の入力遅延（FID）、累積レイアウトシフト（CLS）などの指標を監視して最適化することは理にかなっています。
適切な形式で提供する
表示デバイスまたはブラウザのサイズと解像度の観点から、最も適切な形式で画像またはビデオを提供します。 そのためには、イメージCDNが必要になる場合があります。 または、WebM、AVIF、JPEG-XL、HEICなどのバリアントを作成し、要求しているUser-AgentヘッダーとAcceptヘッダーに基づいて適切なコンテンツタイプを選択的に提供します。
1回限りの変換の場合は、Squoosh.appやavif.ioなどのツールを試すことができます。 関連する方法は、アニメーションGIFをビデオに変換することです。 詳細については、このWeb.devの記事を参照してください。 ビデオ公開を処理するワークフローを設定してみませんか？ サイズと品質のためのビデオの最適化の記事の優れたヒントを参照してください。
適切なサイズを提供する
モバイルデバイス上の画像の41％以上が不適切なサイズになっています。 したがって、固定幅を提供するのではなく、Lazysizesなどのツールを使用して、コンテナサイズに合うように画像とビデオをトリミングします。 さらに良いことに、画像をトリミングしながら関心のある領域を検出できるAIツールを使用すると、時間と労力を節約できます。 スクロールしなければ見えない位置にある画像に対して、ネイティブの遅延読み込みを活用することもできます。
動画に字幕を追加する
ビデオのほぼ85％は音声なしで再生されます。 それらに字幕を追加すると、アクセスしやすいエクスペリエンスが提供されるだけでなく、視聴者の注目を集め、エンゲージメントを高めることができます。 ただし、ビデオの文字起こしは面倒な作業になる可能性があります。 AIベースの文字起こしサービスを使用して、ワークフローを自動化する代わりにそれを改善することができます。
複数のCDNを介して配信
CDNは、ラストワンマイルの遅延を軽減し、ビデオの開始時間を短縮し、バッファリングの問題を減らす可能性があります。 Citrixの調査によると、マルチCDN戦略により、遅延をさらに削減し、CDNのエッジノードでローカライズされた停止が発生した場合でも継続的な可用性を提供できます。
複数の目立たないツールを活用する代わりに、CloudinaryのMedia Optimizerのような製品を探索することができます。これは、メディアを効果的かつ効率的に最適化し、マルチCDNエッジノードを通じて適切なフォーマットと品質を提供します。 つまり、Media Optimizerは品質とサイズの両方を最適化し、小さなファイルで高い視覚的忠実度を提供します。
ビデオを段階的にレンダリングする
YouTubeでプレビュー動画を自動再生すると、動画の総再生時間が90％以上増加することが示されています。 ビデオの自動再生には利点がほとんどなく、欠点もたくさんあるため、使用する場合と使用しない場合は注意することが重要です。 少なくともビデオを一時停止するオプションがあることが重要です。
ページサイズの予算のバランスをとる良い方法は、最初にAIで作成されたビデオプレビューとポスター画像のみを提供し、ユーザーがビデオをクリックした場合にのみ完全なビデオをロードすることです。 そうすれば、不要なダウンロードを排除し、ページの読み込みを高速化できます。
または、最初にプレビュービデオをロードして、プレーヤーにフルバージョンを自動再生させます。 プレビューが完了すると、プレーヤーはネットワーク接続APIを使用してデバイスの接続タイプを確認し、ユーザーの接続が良好な場合は、ソースをプレビューから実際のビデオに交換します。
デモのサンプルページを確認できます。 ヒントは次のとおりです。CDNはネットワーク接続タイプをより確実に検出できるため、本番品質のコードはCDNを利用してネットワーク速度を検出し、それに基づいてクライアントコードが長編ビデオを段階的に読み込むことができます。
まとめ
今後も、言葉では言い表せない方法でストーリーを伝える優れた能力のおかげで、ビジュアルメディアはウェブサイトやモバイルアプリの主要な要素であり続けるでしょう。 ただし、配信する適切なコンテンツを決定することは、ビジネス戦略とサイトのパフォーマンスの両方に依存します。
「パフォーマンス予算は、どのコンテンツを表示するかについての決定を導くものではありません。 むしろ、それはあなたがそのコンテンツをどのように表示するかについてです。 ページの重みを減らすために重要なコンテンツを完全に削除することは、パフォーマンス戦略ではありません。」
—ティム・カドレック
それは心に留めておくべき健全なアドバイスです。