【サイト高速化】読み込み速度が改善!WordPressブログに貼り付けた動画(YouTube)を軽くする方法。

動画軽量化

表示速度が「また」遅くなりました。

何でって??

ぼく

動画を貼りまくったからだよ!!

 

 

しかも表示速度の低下だけではありません。

「記事の更新」すらまともにできなくなりました。

ぼく

文字を入力しても即反映されない。反映されるのは3〜4秒後。(但し、全体ではなく上記の記事限定)

 

動画ってかなり魅力的だと思うんですよ。(他人がアップした動画だと、後々消さたりとか色々問題はあるけど・・・)

「この曲いいよ!」、「この芸人オモロイよ!」と言葉で伝えるのは大変。

 

動画だと一発です。

ぼく

百聞は一見に如かず

 

ただ、1つの記事に対して「1つ・2つ」ならまだしも「5つ」以上貼り付けるとかなり重くなります。

 

じゃあ、どうすればいいのか…?

 

簡単です。動画を軽くすればいいんです。

 

ぼく

だ・か・ら !どうすればいいんじゃー!(# ゚Д゚)

 

はい!そんなあなたにオススメしたいのが・・・

今回ご紹介する「Youtube SpeedLoad」だー!

注意

詳細は下記に記述していますが、表示速度はこのプラグイン導入前の方が早い上、スマホで見た場合、表示が適切にされないなど、導入してもいいことがありませんでした。(WordPressテーマとの相性の問題かも。)その為、 ぼくは導入を断念しました。

 

– 2017年8月 追記 –


↓最終的にこちらの記事に書かれている内容を採用しました。コレ、めっちゃいいよ。

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった – NO TITLE

/* YouTube埋め込み用 */ .youtube-light { display: inline-block; position: relative; overflow: hidden; width: 320px; height: 180px; } .youtube-light::before { position: absolute; content: “Click to Play”; color: #fff; text-align: center; font-size: 22px; font-weight: bold; line-height: 180px; background: …


 

 

YouTube動画 表示速度改善プラグイン「Youtube SpeedLoad」について

このプラグインの仕様は以下の通り。


  1. 記事(ページ)に貼り付けているYou Tube動画を「動画」ではなく、「画像」として表示させる。
  2. 「画像」をクリックすると「動画」が再生される。
  3. 2度クリックしなければ、動画が再生されず、2度手間になるが「表示速度」は改善される。

動画は重い。なので、一旦画像で表示させようぜ!ってのが今回ご紹介するプラグインの特徴です。

ぼく

表示される画像はサムネイル画像(※)だよ。

MEMO

※YouTube動画の再生前、(動画内の1シーンを切り取った or アップロードしたユーザーが自分で作成した)静止画像が表示されている筈。その画像のことを「サムネイル画像」といいます。

 

 

一度入れて設定さえすれば、今後You Tube動画の埋め込みに関しては無問題!

 

You Tube動画を大量に貼りたい時に欠かせないプラグインといえるでしょう。

ぼく

逆に1つ・2つしか貼り付けないよ!って方は今のままでOKです。プラグインは増やせば増やすほど重くなるしね。入れないに越したことはない。

 

それではまず設定方法からいってみましょー!

 

Youtube SpeedLoadの初期設定

EWWW Image Optimize_プラグインに追加

WordPress管理画面から「プラグイン」→「新規追加」ボタンをクリックします。

 

Youtube SpeedLoadの追加

キーワードに「Youtube SpeedLoad」と入力後、「今すぐインストール」をクリック

 

Youtube SpeedLoadの有効化

「有効化」をクリック 。

 

Youtube SpeedLoadの設定ページへ

WordPress管理画面 「設定」に「Youtube SpeedLoad」が追加されているのでクリック

 


すると「Youtube SpeedLoad」の設定画面へ辿りつきます。

必要な作業はたった一つ。

Youtube SpeedLoadの設定

「Responsive embeds」にチェックをつけ、「Save Changes」をクリックします。


ぼく

これにて設定は終了!次は、動画を貼り付ける作業。

 

 

Youtube SpeedLoadを利用して記事内にYouTube動画を貼り付ける方法

通常の方法と若干違います。

 

①:「YouTube」にアクセス。

②:貼り付けたい動画のページにアクセス。

 


ここまでは一緒 。


 

③:ここからが分岐点となります。

記事内にYouTube動画を貼り付けるだけなら、下記の方法になりますが・・・


・通常の貼り付け方

Youtube動画の貼り付け方(通常)

「埋め込みコード」を選択し、下に表示される「コード」をコピーします。

 

Youtube動画の貼り付け方2(通常)

コピーした「コード」を記事投稿画面の「テキストエディタ」に貼り付けます。

この方法で、記事内に「YouTube動画」が埋め込まれます。

 

ただ、今回したいのは、埋め込んだ「YouTube動画」を画像として表示させることです。


 

・「Youtube SpeedLoad」の貼り付け方

YouTube」にアクセスし、貼り付けたい動画のページにアクセスした後、

 

「埋め込みコード」ではなくURLを直接コピーしてください。

YoutubeのURLをコピー

 

続いてコピーしたURLを記事投稿画面に貼り付けます。

YoutubeSpeedLoadでの貼り付け方

ぼく

貼り付ける画面は「ビジュアル or テキスト」のどちらでも構いません

 

youtubespeedloadを使用した場合の再生ボタン

「プレビュー」で確認してみてください。

貼り付けたYouTube動画が通常の再生ボタンとは違う色で表示されている筈です。

ぼく

通常はグレーで表示されます。

 

再生ボタンが「濃い緑」で表示されていたら、OK!

「動画」ではなく「画像」で表示されている証拠です。

ぼく

これにて完了。

 

 

「Youtube SpeedLoad」のデメリット

貼り付けた動画は記事画面一杯で表示されます。

youtubespeedloadのデメリット

ぼくの使っているWordPressテーマはPCで見た場合、横幅728pxの為、とにかくでかい。てかうざい。

 

デザイン的にNGだよ!って方は、このプラグイン(Youtube SpeedLoad)は導入しない方が無難です。

 

 




Youtube SpeedLoad導入前と導入後の表示速度の比較

表示速度の判定は、Googleの表示速度チェックサービス「PageSpeed Insights」を利用しました。

↓判定ページは、動画を貼りまくった下記の記事。

 

↓動画を貼りまくったページ_導入前後の速度比較


スマホ_比較

youtubespeedload導入前後_スマホの表示速度比較

導入前:44点 / 導入後:43点


 


PC_比較

youtubespeedload導入前後_PCの表示速度比較

導入前:52点 /  導入後:51点


 

ぼく

えっ、評価下がった…

ふざけんなよ……(-。-) ボソッ

 

サ、サイト全体の評価は改善されている筈 ((゚Д゚;))ガタガタ

 

↓サイト全体_導入前後の速度比較


スマホ_比較

youtubespeedload導入前後_スマホの表示速度比較2

導入前:49点 / 導入後:50点


 


PC_比較

youtubespeedload導入前後_PCの表示速度比較2 

導入前:56点 /  導入後:55点


ぼく

スマホの評価は上がったけど、PCの評価は下がった。

ぼく

…どゆこと??

 

表示速度は改悪。さらに・・・

 

スマホの表示がバグる。

スマホ表示のバグ

これは、ぼくが使用しているWordPressテーマ(ハミングバード)との相性の問題かもしれませんが、スマホで見ると、うまく表示がされません。

ダメだこりゃ…

ぼく

導入は断念しました。

 

– 2017年8月 追記 –

↓最終的にこちらの記事に書かれている内容を採用しました。コレ、めっちゃいいよ。

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった – NO TITLE

/* YouTube埋め込み用 */ .youtube-light { display: inline-block; position: relative; overflow: hidden; width: 320px; height: 180px; } .youtube-light::before { position: absolute; content: “Click to Play”; color: #fff; text-align: center; font-size: 22px; font-weight: bold; line-height: 180px; background: …

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください