2016.06.09

5,802

埋め込み型YouTube動画が原因で重くなったページを軽くする方法

このエントリーをはてなブックマークに追加

社内のゴミ出しのチェックからお客様窓口まで、
なんでもやるバックエンドの林田です。
今回は最近ゆうちるの心を掴んだ施策をご紹介します。

YouTubeをiframeで埋め込むとページ表示がめっちゃ重い。

1ページに1個くらいの埋め込み動画ならあんまり気にならないんですけど、4つも5つも動画があるとさすがにページ読み込みが重くなってしまう。
ページ読み込みが重いと「百害あって一利なし」何ひとついいことありません。

ページ読み込みが重いことにより想定される弊害

  • ページが全て表示される前にイライラされて帰ってしまう(離脱率↑、直帰率↑)
  • いちいちページが重いと、他のページを見る意欲がそがれちゃう(回遊率↓)
  • 「あのサイトは重いから見たくない」と思われて、二度とサイトに来てくれなくなる(流入↓)

ね?
いいこと何一つないですね。

埋め込み動画が重くなる理由

動画を再生しようがしまいが、ページを取得するたびに動画データを毎回読み込んでいるので重いのです。

そこで思いついたのが「動画のモーダルウィンドウ化」です。

そこで思いついたのが「動画のモーダルウィンドウ化」です。
※ライトボックスのようにクリックするとボヤンと拡大画像が表示される所業がモーダルウィンドウ

 

動画のiframeコードを削除して、替わりにキャプチャした画像を配置。
で、この画像をクリックするとモーダルウィンドウで動画が表示される寸法です。

 

これでYouTubeサイトに遷移することなく、自分のサイトで動画が見れて、且つ、動画を見たい時にだけ通信が発生するのでページも軽くなります。
おまけにモーダルウィンドウなのでちょっと格好いい!

 

モーダルウィンドウはEC-CUBEにディフォルトで入っているjsの「colorbox」を使用しています。
http://www.jacklmoore.com/colorbox/

実装例

[スイッチ断ボールⅢ]
http://switch-dan-ball.jp/

 

ちょっとスクロールしたとこにある動画です。
モーダルウィンドウなのでちょっと格好いいでしょ?

 

これだけでTOPページの表示速度が 14秒 → 3,3秒 に改善されました!

 

どうぞお試しください。

このエントリーをはてなブックマークに追加

株式会社ヘノブファクトリー|バックエンド
この記事の投稿者:

次