• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / WP Rocketを利用していて不具合が発生するときはJavaScriptを疑う

WP Rocketを利用していて不具合が発生するときはJavaScriptを疑う

池田祐太郎 | 2021年12月17日 公開 2 コメント

度々当ブログでも取り上げている高速化プラグインの WP-Rocket ですが、強力故に不具合や挙動への影響を与えることがよくあります。

そういった不具合時にWP-Rocketが関係していた場合、どの部分を対処すれば解決できるのかご紹介します。

目次

  • 1 不具合が起きたらまず WP-Rocketを確認
  • 2 たいていはJavaScriptの影響
  • 3 一部のスクリプトだけ除外する
  • 4 テストできる検証用環境があると安全

不具合が起きたらまず WP-Rocketを確認

  • モバイルデバイスで閲覧しているときにリンクをクリックしても動作しない。2回目のクリックで動作する。デスクトップでは問題ない。
  • ウェブフォントを利用しているが、スクロールしないとウェブフォントが適用されない。

上記は例ですが、いずれの不具合が発生した時も WP-Rocket が原因でした。

このような不具合が発生したら利用しているプラグインにもよりますが、優先的に確認するべきは WP-Rocketです。

稼働中の本番環境のサイトよりも、一般公開していない検証用のテスト環境があると望ましいです。テスト環境の作り方は以下をご参考ください。

WordPressのテストサイト・検証用環境の作り方

まずは WP-Rocket プラグインを一旦無効化してみます。

無効化の理由を聞いてくるので、デバッグとして一時的に無効化する選択肢を選択する

無効化した状態で、ログインしていない状態でブラウザのプライベートウィンドウ(シークレットモード)等のキャッシュが残っていない状態で確認してみましょう。

念の為ソースを表示し、最終行に WP Rocket が読み込まれていないか確認。読み込まれていると、上記のようなコメントアウトされた文言が表示される。

サーバーや設定によっては別のキャッシュが効いていて WP-Rocket を無効化にしているにも関わらず WP-Rocket が読み込まれている場合もあるので、その場合はサーバーのキャッシュをクリアするといった対処を行います。

これで問題が解消されていれば犯人は WP-Rocket となります。もし解消されていない場合は他の原因が考えられるので、検証用環境でプラグインを無効化したり、テーマをデフォルトテーマに変えたりして原因を探ります。

たいていはJavaScriptの影響

WP-Rocketが原因というのがわかったところで、それだけでプラグインを無効化するという選択肢はちょっともったいない。こういう不具合の場合は JavaScript が影響している可能性が高いので、CSS と JavaScript の最適化設定ができる WP-Rocket の「File Optimization」画面を確認します。

「JavaScript Files」内にある、「Load JavaScript deferred」「Delay JavaScript execution」機能にチェックが入っていたらオフにします。

「Load JavaScript deferred」を有効にすると全ての script タグに defer 属性が付与されます(除外設定したファイルや reCAPTCHA 等の指定ファイルを除く)。これは PageSpeed Insights 改善に効果があります。無効化にした場合はデフォルトととなり defer 属性は付与されません。defer や async についてもっと知りたい方は以下を参照してください。

<script> タグに async / defer を付けた場合のタイミング – Qiita

「Delay JavaScript execution」はマウスを動かす、画面にタッチする、スクロールするといったユーザー側の操作があるまで JavaScript の読み込みを遅らせてパフォーマンスを改善するメリットがあります。JavaScriptに対する LazyLoad のようなイメージです。

これらを無効化し保存。先程と同じ用に未ログイン状態のシークレットモードのブラウザで確認します。これで改善されているようならこの機能を無効化した状態で WP Rocket を使うというのは選択肢の一つです。

一部のスクリプトだけ除外する

難易度は上がりますが、対象のスクリプトだけ遅延しないように記述すると、「Load JavaScript deferred」「Delay JavaScript execution」機能は有効化しつつも、不具合を解消できます。プラグインを一つずつ無効化する、テーマ側で読み込んでいるスクリプトを一つずつ探るというように、原因となるスクリプトが何か一つずつ探す手間と、除外するスクリプトの記述する必要があります。

「Exluded JavaScript Files」に除外したいスクリプトを記述した例

除外方法は正規表現も利用できるので、気になる人は公式のドキュメントもご参考ください。

Delay JavaScript Execution compatibility exclusions – WP Rocket Knowledge Base

Exclude files from Load JavaScript Deferred – WP Rocket Knowledge Base

テストできる検証用環境があると安全

以上、WP Rocketの不具合対象方法でした。今回紹介した箇所以外の項目の場合もあるケースもあります。

WP Rocketを有効化するだけで500 エラーが出るケースもあります。(.htaccessファイルが上書きされるため、それによるケース等)

そういったケースにも備え、テスト実施は検証用環境で確認できると一番安全です。今はレンタルサーバーでも簡単にサブドメインの設定や無料で別ドメインの追加等も行えたりしますので、今後運用を続けていくならば一度テスト環境を構築しておくことをお勧めします。

WordPressのテストサイト・検証用環境の作り方

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WPRocket

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメント

  1. 十川 泰 says

    2023年1月16日 at 2:14 PM

    Shortcodes Ultimate WP Rocket 不具合
    上記キーワードで2位にヒットして読ませて頂きました。

    Shortcodes Ultimateという無料プラグインを使っていて、一度プラグインの更新をしたところショートコードがそのまま公開記事に出てしまう不具合が発生。
    いろいろと探った結果、WP Rocketとの相性が原因と判明しました。

    WP Rocketを無効化しても不具合が治らず、バックアップから復元という面倒な作業を冷や汗をかきながら実施し、怖くてShortcodes Ultimateの更新が出来ない状態です。

    どのように対処するのがよいのかご教授いただけないでしょうか?
    Shortcodes Ultimateは多くの記事でコードを使ってしまっているのもあり「使わない」選択はありません。WP Rocketは有料ということもあり、使わない選択を考えたくない状況です。

    テーマ「アフィンガー6」使用

    返信
    • 池田祐太郎 says

      2023年1月16日 at 3:24 PM

      Shortcodes Ultimate を更新したところショートコードがそのまま表示されてしまい、WP Rocket を無効化しても治らないということであれば、これらのプラグインの干渉によるところが原因かもしれません。
      一度、テスト環境でこれらのプラグイン以外を無効化した状態で再度ご確認されることをおすすめします。また、テーマもアフィンガーから Twenty Twenty-three 等の WordPress デフォルトテーマに変更し確認してみてください。

      テスト環境の作成方法参考: WordPressのテストサイト・検証用環境の作り方

      返信

コメントを残す コメントをキャンセル

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定
2022年12月21日
タグ: WPRocket
カテゴリー: TIPS
WP Rocket で文字化けが発生する場合はページキャッシュ無効化で解決
2022年12月14日
タグ: WPRocket
カテゴリー: TIPS
パフォーマンス改善プラグインのWP Rocketのウェブサイトが日本語化
2021年10月21日
タグ: Webサイト高速化, WPRocket
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressプラグインのAI Engineを使ってコンテンツを自動生成してみる
  • ChatGPT の Webpilot プラグインを使って YouTube動画の内容を瞬時に把握
  • Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整
  • 一つのバナーサイズで複数デバイスをカバーし、サイト運営を効率化させる
  • 注意。wp-config.php ファイルのバックアップはサーバーに置いてはいけない

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール デザイン ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 効率化 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.