WordpressでYoutubeを入れたら空白が！それってWP ROCKETのせいかも！

自分のWordpressのページに動画を埋め込んだら謎の空白ができて見栄えが悪い。いわゆるレイアウト崩れと呼ばれるものです。無意味な空白は見てい違和感の残るものです。

今までは問題なく表示されていたのにいきなりなんで？

と驚いたのは昨日の私です。

PC表示では問題はなくSP（スマホ）表示のみに起こったというのもタチが悪いです。平気だった）もっともユーザービリティを高めないと行けないデバイスの不具合はかなり問題です。

原因を調べた結果、WP ROCKETというプラグインの一部の機能が悪さをしていたことがわかりました。この記事ではWP ROCKETを使っているときに起きる動画空白問題の解決方法と、それ以外の環境で起こった場合の対処方法について解説しています。

動画挿入　空白問題が起きたブログ制作環境

WordPress5.8.1

SWELL最新

WP ROCKET 3.10.2

サーバー Conoha WING

ブログ制作環境はこんな感じだよ

WP ROCKETとは？

WP ROCKETとは、キャッシュ関連のワードプレスのプラグインです。これは表示速度を高速にしてユーザーにストレスを与えないサイト運営をするうえで重要なものです。

近年では速度に限らず内容も充実したページこそがユーザーの満足度を満たすものとしてGoogleは高く評価するようになりました。この指標はユーザービリティと呼ばれています。

DTMブログでは画像はもちろんのこと、Twitterリンクや、音声ファイルや、Youtube動画のリンクまで貼ってユーザービリティを高め傾向にあります。

しかし、必要以上の画像や、動画はサイトを貼るとページは重くなります。

高速化を取るかわかりやすさをとるかはサイト運営の課題です。

そこで需要なのはわかりやすいサイトを高速化するという考えです。それに必要なのが高速表示のためのキャッシュ系プラグインと呼ばれるもの。

キャッシュ系プラグインは有料、無料と色々な種類がありますが、現在で最強と呼ばれているのが、WP ROCKETです。WP ROCKETは年間＄49なので月々400円ちょっとで使用します。

「でも高速キャッシュ系プラグインって結局速くならないんだよね」という疑問を持っている人も多いかもしれません。

実際は私もこのプラグインを紹介されたとき「かなり怪しい」と思っていましたが、導入した結果は次の通りです。

とにかく入れて少し設定するだけで高速化完了です。そしてその結果は速度のでないモバイル系でも95点を叩き出します。PC環境では100を出すことも珍しくありません。

（Youtbe)動画、Twitterのリンク、音声ファイル、これらを入れているモバイルページでも90点を叩き出すわけですからさすが有料高速キャッシュプラグインと言えます。これで月々400円ちょいは安いです。

WP ROCKETの何が問題なのか？

Youtube（動画）を入れたときの空白はDelay Java Scripts executionが原因

本題に入ります。PCでは特に問題はなかったのですが、見出しと動画の間や動画と動画の間に不必要な空白が入るようになってしまいました。原因をしらべるためにプラグインを1つずつ外して検証していたら、高速化キャッシュプラグインであるWP ROCKETを外したときにその問題がとまりました。

さらに、問題は空白だけではなく。ブログのトップページの記事内アンカーリンクを押しても無反応というきつい不具合になりました。

原因となったのはFile Optimizeの一番下のDelay Java Scripts executionという項目でした。デフォルトではチェックは入っていないのですが、この機能はJavascriptを高速化してくれる機能なのでできれば外したくない項目です。

今回不具合があったのはバージョン3.3.10.2の最新番、WordPressのバージョンも最新の5.8jです。WP ROCKETは以前のバージョンのときから「互換性不明」とい少し怪しかっただけに両方のバージョンをアップしたら見事に問題だったという話です。

ではここをチェックしたままではいられないのか？という話ですが、実は「もしエラーが起きたらこれを上のウィンドウにコピペしてね」という対策用のコードがあります。

/jquery-?[0-9].(.min|.slim|.slim.min)?.js
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)

これをコピペすれば、動画の上に起こる空白問題も解消することが可能です。

追記2022年4月2日

再び同じ問題は起きてしまいました、今回も色々と調べた結果、

Replace YouTube iframe with preview imageのチェックを外すと治りました。このあたりは、wordpressや使っているテーマのバージョンによって変わってくるので定期的にチェックしておくことをおすすめします。

プラグインを読み込むときの基本注意点

一番重要なのはそもそも現状のWordpressのバージョンに対応しているのかです。WP ROCKETの最新のバージョンはWordprssの5.7.3であっても対応は不明と記載されていました。

それをさらに私がWordpressのバージョンを最新5.8にしてしまったのが問題の1つです。

バージョンアップが必要ないのであればWordpressも各プラグインのバージョンも上げる必要はありませんし、上げたところで表示速度等が劇的に改善されることもないです。

プラグインの設定変更でうまく行かない場合

WP ROCKET内で変更したものがうまく反映されていないと感じたときに必要なのはキャッシュの削除です。ただ、テーマのキャッシュをクリアするのではなく、サーバーのキャッシュをクリアするのが一番効果的です。

エックスサーバーの場合

サーバーパネル→高速化→サーバーキャッシュ設定→選択する→キャッシュ削除で削除可能です。

Conoha Wingsの場合はサーバーキャッシュプラグインがwordpressにインストール可能なのでそこから削除できます。

WordpressメニューからConoha WING→設定でキャッシュクリアをクリックし次に設定を更新するの順番です。

これでサーバー内のキャッシュをクリアできるのでプラグインの設定が反映されない場合は一度を試してみることをオススメします。

ブログの動画空白問題　WP ROCKETが原因でない場合でも…

WP ROCKETを使っていない状態で動画を差しこみ空白が発生した場合は、一番疑うべきなのはjava Scriptsの可能性が大きいということがわかりました。

高速キャッシュ系のプラグインはCSSやJava Scriptsの読み込み等を変更することが多いので、もし似たような問題が発生した場合は、Java Scripts関係をみなおすのがオススメです。

WP ROCKETを入れるメリット・デメリット

WP ROCKETメリット　簡単操作で超高速なブラウジング環境の構築

個人ページであっても今ブログやサイトを閲覧するデバイスはスマホが主流です。そのためスマホで快適に見れるページがユーザーが楽しめるわけですね。

DTMブログを立ち上げたけど、ページがすごく重たい。こんな悩み持っていませんか？そこでオススメできるのがWP ROCKET、1年49ドルのプラグインですが、DTMブログをやっている人にはかなりの価値があります。

とくにサーバーが貧弱なところであれば余計にユーザービリティが下がるサイトになってしまい。あなたがエネルギーを注ぎ込んだサイトも誰も見なくなってしまうかもしれません。

このようなトラブルを解決するのがWP ROCKETの得意とするところです。

WP ROCKETデメリット　バージョンアップで最新Wordpressの対応が不明

2つ前のバージョンからWP ROCKETを使っていますが。最新のWordpressの対応を表明していなかったり、CSSやJavaScript系による小さいエラーが見られることがありました。ただ、サイトの爆速化に影響するほどではないので、デメリットというほどのモノではありません。

まとめ

ユーザービリティのために高速化キャッシュプラグインは必要不可欠です。その中でも今回紹介したWP ROCKETはプロ御用達のプラグインです。しかし、WordPressのバージョンやWP ROCKET本体のバージョンによっては私のような不具合に悩まされることもあるでしょう。

今回のトラブルはFile Optimizeの一番下のDelay Java Scripts executionが原因で起きた問題です。

これ以外のパラメーターでも不具合が起こるか可能性はありますが、そういうときは1つずつチェックマークを外して、キャッシュを削除して再度ページをブラウザに読み込ませることで問題を解決できるかもしれません。

多少のトラブルはありながらもWP ROCKETの高速化はかなり便利です。これが月々400円程度ならコスパは高いですね