momokuri’s blog

アラフォーITエンジニアの雑記ブログ

youtubeが埋め込まれたページの表示が重いので改善してみた

[Sponsored Link]




f:id:momokuri777:20180115223316j:plain

先日、収益化条件が大きく変更になることがgoogleからクリエイターに通達されたyoutube

ショックだったけど、動画のアップロードをやめるつもりはありませんぜ。

元気出していこう。

 

今日はブログでyoutubeを埋め込んだときに読み込みが遅くなる現象を解決する方法を、モチベーション高く紹介。

 

 

youtubeを埋め込むと再生可能状態になるまで時間がかかる

別のブログでプレイ動画の紹介をやっているのだが、youtubeの埋め込みコードをブログに貼り付けると、ページの表示速度に比べて、動画が再生できるようになるまで少し時間がかかる。

PCだとそんなに違和感がないが、スマホだと気になるぐらいに遅いときがある。
f:id:momokuri777:20180121120519j:image

こんな感じで、動画表示エリアがぽっかりあいてることも。

スマホの方がアクセスが多いので、これどうにかならんかなと思っていた。

 

クリックされるまで埋め込みコードを読み込まないタグ

そんな課題を解決するため、以下のサイトを参考にしてみた。

www.notitle-weblog.com

 

ここで紹介されている方法は、cssjavascriptでカスタマイズして、

  • ページ表示時には、youtubeのサムネイル画像のみを表示する
  • サムネイル画像がクリックされたら動画を読み込み、再生する

ということを実現するための方法だ。

 

ページ表示時には動画は読み込まず、サムネイル画像を表示するので、ここで表示スピードをアップさせるという作戦。

動画はクリックされたときに初めて読み込まれるので、たくさんの動画をまとめて配置したとしても、クリックされたものしか読み込まれない。

つまり、たくさん動画を配置しても表示スピードにそれほど影響がない。

そしてスマホにも対応。

 

こりゃすごい!

 

で、やってみた

このやり方が紹介されていた上記のブログを参考に実装してみた。

 

まず、これが埋め込みコードをただ埋めただけのもの。

 

そして、これが今回改善したもの。

「Play Movie」の文字は、cssで変更が可能。

 

スマホだと、こんな感じ。

f:id:momokuri777:20180121122445j:image

スマホ用に調整してないので、テキストの位置が微妙だが。

 

とりあえず、これで表示速度は劇的に改善された。

かなり満足しております。

 

できなかったこと

実は今回あんまりすんなりいかなくて、課題をいくつか積み残している。

  • 共通処理のcssは「デザインcss」、jsは「記事下」におきたかったが、それだとうまくいかなかったため、記事単体にすべてのコードを貼り付けている
  • PCだと1回のクリックで動画再生されるが、スマホだと2回タップしなければならない。(androidchromeの環境で)
  • スマホ向けに見栄えの調整が必要

 

あっしの技術不足もあるだろうが、これらは今後の検討としたい。

 

ちなみにこのカスタマイズは、上記ブログのブロガーさんもよそから参考にしたもののようだが、参考元のブログは現在なくなっている模様。

うまくいかないところは、自力で解決するしかない。

 

投資とカスタマイズは自己責任でお願いします。

ブログランキング・にほんブログ村へ にほんブログ村 サラリーマン日記ブログへ にほんブログ村 サラリーマン日記ブログ 40代サラリーマンへ にほんブログ村 ライフスタイルブログへ にほんブログ村 ライフスタイルブログ セミリタイア生活へ にほんブログ村 サラリーマン日記ブログ インドア派サラリーマンへ