ブログ運営・ライフハック

WordPressでスライドショーが表示されない原因は「レンダリングをブロックするJavaScriptの排除」だった

2020年3月5日

WordPressでスライドショーが表示されない原因は「レンダリングをブロックするJavaScriptの排除」だった(私の場合)

 

WordPressでスライドショーを表示しようとしたところ、なぜか「一部のブラウザのみ表示されない」という事象に見舞われました。

原因究明の経緯を備忘として記事にします。

 

本記事の信頼性

 

大手IT企業に所属する、文系卒のビジネス支援型データサイエンティスト。

国内大企業へのAI活用コンサルや定着支援・人材育成・講演活動を行っています。

ヤエリ(@yaesuri_man

ブログ歴は約1年半。

おかげさまで当サイトもそれなりの副収入が発生しています。

 

結論

原因は「レンダリングブロックJavaScriptの排除」でした

 

WordPressでスライドショーが表示されない 現象

 

私の環境は以下です。

  • WordPress4.9.8
  • AFFINGER5 WING

 

当ブログのトップページに、以下のようなスライドショーを表示させようとカスタマイズ。

Chromeでは問題ありませんが、一部のブラウザやtwitterプロフィールのリンクから飛んだ時、スライドショーが表示されない事に気づきました。

 

 

◀スマホは左スクロールで表示できます

デバイス ブラウザ スライドショー表示
PC Chrome
PC Edge
スマホ(iPhone) Chrome
スマホ(iPhone) Safari ×
スマホ(iPhone) twitterアプリ内リンクから ×

 

なぜか、スマホのSafariとtwitterアプリ内のリンクから開いたときのみ、スライドショーが表示されないのです。

こちらの原因究明と対策を行いました

 

原因究明①プラグインの特定

 

「プラグインの競合が原因ではないか」というweb検索結果があり、プラグインを調べることに。

やり方はかなり地道ですが、以下です。

使用しているプラグインの記録

 

WordPress左側のメニュー内「プラグイン」→「インストール済みプラグイン」を開き、現在の設定を記録しておきます。

ページ内を右クリックして「印刷(P)」から、出力先をプリンタではなくPDFにすれば、PDFファイルとして保存できます。

 

全プラグインの使用停止

 

「プラグイン」一覧のチェックボックスにチェックを入れれば、全てのプラグインが選択されます。

その状態で「一括操作」→「停止」→「適用」です。

 

 

私の場合、全てのプラグインを停止した状態ではスライドショーが表示されました。

これで、原因はいずれかのプラグインにあることが分かりました。

 

プラグインを一つずつ有効にする

 

次に、原因となっているプラグインの特定です。

保存しておいたPDFと見比べながら、

  • プラグインを1つ有効にする
  • キャッシュを削除する
  • ブラウザで該当ページを開き、確認する

を1つずつ、地道に繰り返していきます。

 

全てのプラグインでこれを試したところ、原因は有料プラグインの

  • WP Faster Cache Premium

にあることが分かりました。

 

原因究明②設定の特定

 

原因となるプラグインが分かりましたら、あとは原因となる設定の特定です。

ここでもプラグイン特定とやることは同じ。

一旦全ての設定を無効にし、ひとつずつ設定をオンにし、ブラウザで表示を確認していきます。

 

 

原因はWP Faster Cache Premiumの「Render Blocking Js(レンダリングをブロックする JavaScript を除去してください)」

 

上記を地道に試していったところ、以下設定にたどり着きました。

「Render Blocking Js(レンダリングをブロックする JavaScript を除去してください)」

 

 

こちらの、

  • チェックボックスをオンにすると、スライドショーが表示されない
  • チェックボックスをオフにすると、スライドショーが表示される

のです。

 

サイト表示スピードを改善するためにJavaScriptをoffにすると、それを利用してスライドショーを表示させている一部のブラウザが影響を受ける、ということでしょうか。

こちらにチェックボックスを入れた時とそうでない時のサイトスピードをチェック。

私の場合はそれほどスピードに変化がなかったため、このチェックは外してしまい、スライドショー表示を取りました。

 

WordPressでスライドショーが表示されない原因は「レンダリングをブロックするJavaScriptの排除」だった(私の場合) まとめ

 

以上、私の環境の場合、一部ブラウザでスライドショーが表示されなかった原因は「レンダリングをブロックするJavaScriptの排除」でした。

私と同じようにスライドショーが表示されない人の参考になれば幸いです。

 

その他、ブログ運営関連の記事のまとめはこちら。

【2020年版】ブログ運営関連の記事まとめ

続きを見る

 

-ブログ運営・ライフハック

Copyright© 営業アップデート , 2020 All Rights Reserved.