WordPress にビデオを埋め込む最も効率的な方法
公開: 2024-03-04ああ、ダイヤルアップやエッジ (2G) 接続が贅沢で、YouTube でビデオを見ることが忍耐力を試されているように思えた時代を覚えていますか?
超高速のインターネットがなかったら、お気に入りのビデオの再生ボタンをクリックし、一時停止を押して、ロードしてバッファリングするでしょう。 その間、あなたはコーヒーを淹れに行きましたが、戻ってくる頃には、運が良ければビデオが一度にシームレスにストリーミングされるか、バッファリングに苦しむ必要があるかもしれません。
しかし、今一番良かったことは、そのようなことが起こらなくなり、高速インターネット接続が新たな常態になったことです。 5G テクノロジーのおかげで、人々は 4K 解像度でも YouTube ビデオをシームレスに視聴できるようになりました。
Webサイトにおける動画利用の現状
この事実により、Web サイトにビデオを埋め込むことさえも普及しています。 結局のところ、ビデオは、ユーザー エクスペリエンスを向上させ、コミュニケーションを図るためのより魅力的な方法を提供します。
一部の人々は、Web サイトの背景全体としてビデオを使用して、Web サイトのデザインに動的で視覚的に魅力的な要素を追加することで、さらに進化しています。
この戦略は訪問者の注意を引きつけて維持するのにより効果的であることが判明したため、個人が自分の WordPress サイトにビデオを埋め込むのが標準的な方法であることが判明しました。
しかし実際には、誰もがそれを正しく行っているわけではありません。 彼らのほとんどは、WordPress にビデオを埋め込む正しい方法を知らず、その結果、ウェブサイトの速度が遅くなってしまいます。
これは捏造された発言ではありません。 私たちは数字と結果が真実を伝えることを好みます。
ビデオ付き WordPress: Core Web Vital テスト
これ以上引きずったり自慢したりせずに、テストと結果に直接行きましょう。
まず、テスト目的で、ビデオやグラフィックのないシンプルで基本的な WordPress Web サイトを作成し、試してみました。
結果は次のとおりでした。
- スコアは緑色の信号で 100 % であり、すべてのメトリクスがモバイルとデスクトップの両方で肯定的な応答を示していることがわかります。
しかし、WordPress サイトのホームページに YouTube ビデオを追加し、再度テストを実行したときのことです。 結果は驚くべきものでした。
- 1 つのビデオだけでスコアは 65% に低下し、他のすべての指標も同様でした。 35% も大幅に低下しましたが、動画の追加により傾向はさらに悪化する可能性があります。
さて、解決策は何だろうと考えているかもしれません。
これを修正するには何が必要ですか?
あなたが考えている直接的なアプローチは、サイトでビデオを使用しないことですが、これは正しいアプローチではありません。 動画には価値があり、Web サイトのユーザー エクスペリエンスも向上します。 したがって、Web サイトの速度を上げるためだけにそれらを無視することはできません。
1. 評判の良いビデオホスティングプラットフォームを選択してください
まず、Web サーバーでビデオをホストするのではなく、YouTube、Vimeo、Wistia などの無料ビデオ ホスティング プラットフォームでビデオをホストまたはアップロードできれば素晴らしいでしょう。 サーバーのリソースを節約するだけでなく、サーバーへの負担も軽減され、サーバーの速度には影響しません。
これらのビデオ ホスティング プラットフォームはビデオ配信用に十分に最適化されており、ビデオのストリーミングに必要な帯域幅を処理できます。
注:無料のビデオ ホスティング プラットフォームを除けば、WordPress を使用して独自のビデオ チューブ Web サイトを作成したい場合、ほぼすべての点で WPOven の専用ビデオ ホスティング プラットフォームに勝てるプライベート ビデオ ホスティング プラットフォームはありません。
2. Cookie を使用せずに YouTube 動画を埋め込む
標準の YouTube 埋め込みの他に、youtube-nocookie.com と呼ばれる特別なバージョンも利用できることを知って驚かれるかもしれません。
標準バージョンから YouTube ビデオを埋め込むと、Cookie やスクリプトなど、不要な要素が多数組み込まれます。 したがって、これをより効率的にするために、YouTube は youtube-nocookie.com バージョンを導入しました。これは軽量で、ページ速度スコアに大きな影響を与えません。
Youtube-nocookie.com に関する興味深い事実をいくつか紹介します。
- これは、YouTube 動画を埋め込むための代替ドメインです。
- このドメインは、追跡目的で Cookie を設定せずにビデオを埋め込むために使用されます。
- 通常の YouTube 埋め込み (youtube.com) では、視聴者のブラウザに Cookie が設定される場合があります。
- 「youtube-nocookie.com」ドメインは、Cookie を設定せずに埋め込みプレーヤーにサービスを提供します。
- ユーザーのプライバシーを優先し、Cookie の使用を最小限に抑えたい Web サイトに役立ちます。
- 「youtube-nocookie.com」を使用すると、埋め込みビデオがサイト訪問者の不必要な追跡に寄与しないことが保証されます。
「youtube.com」を「youtube-nocookie.com」に置き換えて YouTube 動画の URL を変更するだけで準備完了です。
3. LazyLoad プラグインを使用する
遅延読み込みは、Web サイトの特定の要素を延期するだけで Web サイトの速度を最適化するための最良の手法の 1 つです。 このプラグインは、ユーザーがスクロールするかビューに表示されるまで、画像やビデオなどの要素の読み込みを遅らせます。
それは次のようにして起こります。
- 遅延読み込みプラグインは、初期化時に Web ページのコンテンツをスキャンします。
- Web サイトのユーザーに表示される部分を継続的に監視します。
- 遅延読み込み用にマークされた要素がユーザーのビューポートに入ろうとすると、プラグインはその読み込みをトリガーします。
- ユーザーがビューポートに入ると、要素は多くの場合 JavaScript を使用して動的にロードされ、ページ全体をリロードする必要はありません。
- 遅延読み込みプラグインは、JavaScript を使用して、ユーザーが Web ページを操作するときにコンテンツを Web ページに動的に読み込みます。
- プラグインは要素の位置や重要性に基づいて読み込みに優先順位を付け、初期読み込み時間と帯域幅の使用量を削減しながらシームレスなユーザー エクスペリエンスを保証します。
注:このアプローチには特定の制限があります。 遅延読み込みプラグインは、ビデオが最初のフォールド内に配置されている場合は機能しませんが、ビデオが最初のフォールドの下に表示されている場合に最適に機能します。
読む: WordPress のパフォーマンスを高速化する 22 の最良の方法
4. ファサード技術
Facade アプローチは、遅延読み込み手法を実装するための賢い方法の 1 つです。 このアプローチでは、最初にビデオの代わりに静的画像のプレースホルダーを使用します。 この画像は通常、再生ボタンがオーバーレイされたビデオのサムネイルに似ています。
ユーザーが再生ボタン オーバーレイをクリックすると、ポップアップ ウィンドウが表示され、同じポップアップ ウィンドウで実際のビデオの読み込みが開始されます。
ご参考までに、また理解を深めるために例を示します。
このアプローチは非常に効果的であり、必要でない限り YouTube ビデオで WordPress サイトに負担をかけることはありません。
このライトボックスのアプローチが合わない場合は、「LazyLoad Plugin」という名前の人気のある WordPress プラグインを利用してください。 oEmbed と連携して動作し、埋め込まれた YouTube および Vimeo ビデオをクリック可能なプレビュー画像に置き換えます。
まとめ
さて、上の記事で述べたことをまとめてみましょう。 間違いなく、ビデオは情報を共有するための最良かつ最もインタラクティブな方法の 1 つです。 しかし、Web サイトの速度を低下させるためにこの代償を払いたい人はいません。
しかし幸いなことに、Web サイトの速度とパフォーマンスを犠牲にすることなく、Web サイトに驚異的な効果をもたらす、すでに述べたヒントとテクニックがいくつかあります。 したがって、これらのヒントに従って、Web サイトの速度を上げてスコア 100 を達成してください。ぜひ試して、レースに勝ちましょう。
Rahul Kumar は Web 愛好家であり、WordPress と Web ホスティングを専門とするコンテンツ ストラテジストです。 長年の経験と業界のトレンドを常に最新の状態に保つことに注力し、トラフィックを促進し、エンゲージメントを高め、コンバージョンを増やす効果的なオンライン戦略を作成しています。 ラーフル氏は、細部へのこだわりと魅力的なコンテンツを作成する能力により、オンラインでの存在感を向上させようとしているあらゆるブランドにとって貴重な人材となっています。
関連記事：
