IEとEdgeで動画のランダム読み込み「PHP rand」が動かなかった際の解決方法

今回は、クライアント様のホームページ改修で、IEとEdgeのみ動画のランダム読み込みがうまくいかなかったバグの解決方法についてメモしておきたいと思います。

 

▼バグ内容

背景動画をランダムで読み込む処理をPHP randで実現していたのですが、IEとEdgeのみ、何度再読込しても最初に開いた動画で固定されてしまう。

 

作業01：プラグインを疑ってみた

プラグインがなにか悪さをしている可能性を疑い、キャッシュ系のプラグイン「WP Fastest Cache」をキャッシュを切ってみたとこ・・・。

はい、案の定！

WP Fastest Cacheをオフにすれば、IE・Edgeでもランダム読み込みが動く事を確認。

 

原因は何となくわかったけど、サイト高速化のためにはキャッシュは切れないし、どうしよう・・。

 

作業02：WP Fastest Cacheの設定をイジってみる

今度はWP Fastest Cacheの設定を検証してみることに。

すると「ブラウザキャッシュ」の部分のチェックを外すと、正常に動作することを確認。

でも、ブラウザキャッシュは高速化のためには必要だし、、どうしたものか・・。

 

作業03：IE・Edgeのみブラウザキャッシュを効かせないようにできないか？

IE・Edgeは正直主流ではないし、少し妥協して、IE・Edgeのみブラウザキャッシュが効かないようにする方法はないか？

それを検証してみることにしました。

function.phpで実現する方法や、動画の読み込みを行っているトップページのテンプレート側での調整を試みましたが、うまくいかず。。

困った・・・。

そうこう悩んでいるうちに、なんとお問い合わせフォーム「MW WP Form」のエラーチェック機能も正常に動作しない事を確認。

そして、結局これも、WP Fastest Cacheが原因でした。

 

作業04：WP Fastest Cache以外のキャッシュプラグインを試そうと思っていたところ・・・

もうこれはWP Fastest Cache自体を諦めて、バグを起こさない別のキャッシュプラグインを見つけるしか無いな・・・

と思い始めた頃、クライアント様のサーバーがXserverだという事を思い出しました！

 

そうです。Xserverにはアクセレレーターといいう高速化機能の他に、キャッシュ機能もあるんです。

 

作業05；WP Fastest Cacheをオフにして、Xserverのキャッシュ機能をオンに！

ここで僕は、WP Fastest CacheをオフにしてXserverのキャッシュ機能にする事を試してみました。

無事に動く！

動画のランダム読み込みがIEとEdgeでも正常に動作しました。

「MW WP Form」の方はと言うと、こちらも正常にエラーチェックが動作する！！

 

作業06：サイトのスピードチェック

いよいよ最終チェックです。

サイトの表示速度をチェックするGoogleの「PageSpeed Insights」と「GTmetrix」を実施してみたところ、GoogleはPC80点以上、スマホ90点以上、GTmetrixの方もしっかりキャッシュも認識されAランク評価。

何の妥協もなく、バグを解決することができました。

 

まとめ

サイト高速化のためキャッシュプラグインを切る判断はなかなか難しいと思います。

今回は、Xserverのキャッシュ機能を使うという、サーバー環境に依存する解決方法で申し訳ないですが、レンタルサーバーによっては、サーバー側にキャッシュ機能があるケースがあるため、WordPressのプラグインだけに頼らず、サーバーの機能との組み合わせも試してみると、バグが解決するケースがあるという事を知っておいて頂ければと思います。