ブログが重すぎる!② (リダイレクト対策とYoutube埋め込み偽装)

ブログが重い2

①に続いて、
今回のダイエットは外部への重たいリンクやリダイレクトを見直しました。
前回紹介したPageSpeed Insightsは、更に詳細な結果を得られるChromeの拡張機能版をインスト-ルしました。

スポンサーリンク

PageSpeed Insights のインストール

web版の使い方はこちら 

↑が気に入ったらプラグインとしてインストールすることをお薦めします。

PageSpeed Insights (by Google) – Chrome Web Store  

PageSpeed Insights (by Google)

Chromeに追加後に、調べたいページを開いた状態で
右クリック→要素を検証
上部のタブからPageSpeedを選択。
分析を開始をクリックします。

重たすぎる「忍者おまとめボタン」を削除

忍者おまとめボタンをずっと使ってましたが、見た目も機能も申し分なかったけど重すぎるためWEBフォントで作った自作ボタンへ変更しました。(約2秒ほど速くなりました)

 過去記事はこちら 

 

Youtube埋め込みプレーヤーを画像で偽装する

PageSpeed Insightsで分析するとボトムバーに配置したYoutube動画4つのリダイレクトの連鎖を削除して下さい。と書かれてました。

リダイレクト

とはいえ、Youtubeのリダイレクトを止める方法なんて分かりません。

複数のYoutubeを埋め込むことでページが重くなることは間違いないようなので、それらのキーワードで検索するうちに良さそうな方法を見つけました。

YouTubeの埋め込み動画をページと一緒に読み込ませない方法 | もちもちはーふむーん

 

このボトムバーの4つのYoutube動画はプレーヤーでなく画像なんですよ♪

(引っ越ししたので現在は非表示です。)

Youtube埋め込みプレーヤー

画像をクリックすることで動画プレーヤーが起動します。

ページ読み込み時は画像として読み込まれるため、リダイレクトの連鎖も発生しなくなりました。

このソースコードは↓に記載しています。

Youtubeのサムネイルを簡単に取得する方法

自分のYoutube動画なら自分が作ったサムネイルがありますが、WEB上から誰のサムネイルでも手に入れる方法があります。

http://img.youtube.com/vi/動画のID/●.jpg

↑動画のIDと、●部分には画像サイズを入力します。

動画のIDとは?

再生ページのURL
https://www.youtube.com/watch?v=6CMH1FkNpJQ
v=の後ろの文字列です。

動画に再生リストが含まれている場合は、
https://www.youtube.com/watch?v=6CMH1FkNpJQ&list=UUEYKbnM1ytlDWdRDcx6XJUQ
IDの後ろに&list=・・・・・とありますが、それは含めないで下さい。

画像サイズには5種類の大きさが取得できます。
  1. mqdefault.jpg – 320×180px(デフォルト)
  2. 0.jpg – 480×360px(デフォルト)
  3. 1.jpg – 120×90px
  4. 2.jpg – 120×90px
  5. 3.jpg – 120×90px

http://img.youtube.com/vi/6CMH1FkNpJQ/mqdefault.jpg
トカゲ酒飲んで変身!!

http://img.youtube.com/vi/6CMH1FkNpJQ/0.jpg
トカゲ酒飲んで変身!!

http://img.youtube.com/vi/6CMH1FkNpJQ/1.jpg
トカゲ酒飲んで変身!!

http://img.youtube.com/vi/6CMH1FkNpJQ/2.jpg
トカゲ酒飲んで変身!!

http://img.youtube.com/vi/6CMH1FkNpJQ/3.jpg
トカゲ酒飲んで変身!!

↑のように「1.2.3」では設定したサムネイルとは別の画像が取得されるようでした。

いずれにしても、WEB上でサムネイルを取得できて便利なようですが、プレーヤーの代わりの画像としては再生ボタンがないためプレーヤーだと判別しにくいことと、mqdefaultサイズ以外は上下に黒帯があるのが気になります。

結局、手間だけど自分で再生ボタン付きの画像を作り直しました。

その画像URLを元に、ガジェットへ貼ったソースがこちら。

4つのガジェットにそれぞれ動画を埋め込んでるため、
class名にthumb1と番号を振りました。

6行目まではhtml部分で、7行目からは画像からyoutubeを呼び出すJSになっています。

どんな動作か知りたい場合は、↓のボトムバーのサムネイルをクリックしてみて下さい。

1度に複数の動画を並べる場合のソースは上記で紹介したサイトで紹介されています。

あとがき

1つの埋め込み動画では気になりませんが、4つの動画を埋め込んでた状態から比べると確かに少し速くなったような気がします。(^_^)v

1ページに複数のYoutube動画を掲載してる方は
ぜひ試してみて下さいね。

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る