Webノートデス

YouTube埋め込み動画が重いのでYoutube SpeedLoadというプラグインを使ってみる

      2015/01/21

ワードプレスを使用している別ブログで、YouTube動画を埋め込んだまとめ記事を書いたのですが、動画の数が多すぎて、ページを開くのに重くてどうにもなりません。

記事を分割しようかとも思ったんですが、今後のために何か対策をしてみようと言うことで動画ページが重いのを解決してみましたと言うお話。

埋め込み動画の表示を画像にする

YouTubeの埋め込み動画を読み込むのはブラウザに非常に負荷がかかるようです。数が多ければ多いほど負荷が多くなるのは当たりまえで、この負荷を軽減しなくてはなりません。

対策としては埋め込み動画の表示をサムネイル画像にして、クリックしたら動画を呼び出すという方法が良さそうです。

この方法を第一候補としていろいろと調べていたら、同じブログに表示速度改善のプラグインが紹介されているのを発見しました。

この二つの方法を試して表示速度を比較してみました。

GTmetrixで表示速度を計測

webページの表示速度を計測する方法はいくつかありますが、オンライン上のサービスを使うのが簡単です。GTmetrixがおすすめですね。


URLを入力して「GO!」をクリックすれば計測が始まります。

まずは何も対策しない状態で表示速度を計測してみました。

赤枠で囲った部分が表示時間ですが、35.48秒っていうのはひどいですね。3秒以上で離脱率が上がるといわれる中で、この数字はもはや見てもらう気が無いくらいのレベルでしょう。何とか改善しなくてはいけません。

埋め込み動画表示速度改善のためのコードを追記してみる

CreativeTipsの記事を参考にして、functions.phpとfooter.phpにコードを追記してみました。計測した結果はコチラ↓

表示速度は30.99秒、改善されているのかどうなのか、判断が微妙な数字です。計測するたびに数字が上下するので、ある程度の誤差はあるにしても30秒は許容範囲外ですね。

YouTube埋め込み動画速度改善プラグイン「Youtube SpeedLoad」

それならば次はプラグインを試してみようと言うことで、Youtube SpeedLoadというプラグインをインストールして使ってみました。有効化して計測した結果がコチラ↓

28.84秒ということで。これも判断が微妙な数字ですね。効果はあるんでしょうけど改善と言えるのかどうか…

表示速度改善の道のりは長くなりそうだ

YouTube埋め込み動画が重いということで今回試した表示速度対策は以上になります。このままではおそらくアクセスがあっても誰も見てくれない可能性がありますが、まだアップロードしたばかりのアクセスがあるかどうかわからない記事のためにこれ以上の手間をかける必要は無いと判断しました。

アクセスがあるようならまた改善を試みようと思っています。記事自体はけっこう自信作だったんですけどね…

なにかやるたびにトラブルに見舞われているような気がするんですが、それもまたこういうネタになるのでいいのかなと思ってます。スキル不足が原因なのは明白ですけどね。

 - WordPress プラグイン

ad

ad

Message

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

  関連記事

WPXユーザーにおすすめ|ShortPixel Image Optimiserで画像圧縮

「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます …

Crayon Syntax Highlighterでソースコードを表示するとカッコいい

前記事の「ブログの動画をスマホで見たら幅がでかすぎて困った話」でCSSの記述をし …

記事投稿時のAll in One SEO Packの設定の方法

All in One SEO Packをインストールすると、投稿の編集画面に以下 …

All In One WP Security & Firewallでワードプレスのセキュリティ強化

このブログも立ち上げて数ヶ月が経過、まだ記事数も少ないですがポツポツとコメントが …

Crazy Lazyの使い方|画像読み込み遅延プラグインは数あれど…

「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます …

記事タイトルの後ろにサイトタイトルを表示しない設定方法

記事タイトルの後ろにサイトタイトルが表示されてしまうのは嫌? All in On …

Browser Shotsのサムネイルが縦長になっちゃった

Browser Shotsについてはワードプレスでサムネイル付きリンクを表示する …

All in One SEO PackのXML Sitemap設定

Googleウェブマスターツールにサイトを登録したら、サイトマップを送信します。 …

初心者がAll in One SEO Packを使う時の設定はどうする?

ブログやサイト運営をやっていく中で、検索経由のアクセスアップを狙うならばSEOは …

ワードプレスの記事をツイッターにランダム投稿したくてやったこと

ワードプレスの記事をツイッターに投稿すればちょっとアクセスが増えるんじゃね?なん …