男子大学生のひとりよがりブログ

名前:わたMAN   職業:大学生  時事ネタや自分の趣味などさまざまなジャンルを書くかもしれませんがお許しください。

はてなブログでyoutubeの埋め込みを軽くする方法を試したら表示速度が早くなった件

スポンサードリンク

f:id:herawata:20171121030350j:plain

こんにちは!わたMANです!

 

僕は普段はてなブログでyoutubeの動画を紹介する記事をいくつか書いています。

例えばこれらの記事です。

www.herawata.com

www.herawata.com

 youtubeの動画を貼って毎回思うことは

「ページ開いてから動画が表示されるのめっちゃ遅い!!」

ということでした。

そこで今回は、はてなブログでyoutubeの動画の埋め込みを軽くする方法を調べて実践してみたので紹介します。

 

参考にした記事

シロマさんの記事を参考にさせていただきました。

ありがとうございました。

www.notitle-weblog.comyあれば

基本的にはこちらの記事を参考にしながらやれば、youtubeの動画を軽くすることができます。

本当に軽くなっているのか確認

軽くする前の埋め込み↓

www.youtube.com

軽くした後の埋め込み↓

画面を押したら動画を再生させることができます。

 動画を2つ貼ったぐらいではあまり大きな差は見られないと思いますが、動画を沢山貼る記事の場合だと明らかに表示速度が違います。

「タップして再生」という文字のところは自分で変えることができるので、詳しくはシロマさんの記事を参考にしてみてください。

 

下記の記事も動画を10個貼っていますが、ページを開いた瞬間に動画が表示されています。(僕のPCとスマホの場合です)

www.herawata.com

これは僕的には大変ありがたいことです。はてなブログはそもそもページの表示速度が他のサイトに比べても遅く、youtubeの動画を貼るともっと重くなってしまいます。ですので、はてなブログは特に表示速度を早くすることを意識する必要があります。

今回はシロマさんがソースコードを公開してくれたおかげで、利用することができたので本当に感謝しかないです。

まとめ

  • はてなブログのyoutubeの埋め込みは表示速度が非常に遅い
  • それを解決するために他の方の記事を参考にして改良した
  • 結果、だいぶ軽くなり表示速度が速くなった

 

これからもyoutubeに関する記事をどんどん書いていきたいと考えているので、動画を埋め込む際は今回の方法でしっかりやっていきたいと思います。

 

最後まで読んでくれてありがとうございました。

よかったら読者登録よろしくお願いします。

 

関連記事

www.herawata.com