WordPress｜CocoonとJetpackの組み合わせで投稿一覧が重たい時に確認したいこと

2022年07月22日

2022年11月22日

WordPressテーマ「Cocoon」は高性能なため利用されている人も多いと思います。私が運営しているブログでも利用しています。

私はCocoonを使う中、簡易アクセス解析としてJetpackプラグインを導入しサイトの統計情報を確認しています。

Cocoon設定の管理者画面にはPVの表示という設定項目があり、アクセス集計方法をJetpackと設定することができます。

ただし、このCocoon設定でアクセス集計方法をJetpackと設定してしまうと投稿一覧画面の表示がとても重たく（遅く）なってしまいますので、特別な理由がなければPV数設定はCocoonのテーマ独自に設定することがおすすめかと思います。

今回はCocoonとJetpackのPV設定について記載していきます。

Cocoon設定の管理者設定（PVの表示）

WordPressテーマ Cocoon を使用しているとWordPressメニューにCocoon設定があります。

設定項目は多数存在しますが、今回は管理者画面を確認します。

管理者画面を開き、画面中程に進むとPVの表示という箇所があります。

下記の例では、PVエリアを表示する・インデックスにPV数を表示にチェックが入っており、アクセス集計方法にJetpackが選択されていました。

Jetpackをインストールした段階でこの設定になってしまうのか？それとも自分で変更した（変更したことをわすれた💦）のか？どのタイミングでアクセス集計方法をJetpackに設定したか記憶にないのですが、、、

理由はどうであれ、Cocoonの設定画面にも記載されているようにアクセス集計方法がJetpackの場合、初回アクセス時に情報取得に時間がかかりますと解説されています（解説ページにも詳しく説明がなされていました）。

CocoonとJetpackを使っている場合、アクセス集計方法をJetpackとすると管理者者向け投稿一覧画面やログイン時のインデックス画面（PV数が表示される画面）でのページ表示速度がとても遅くなることがわかりましたので、アクセス集計方法をテーマ独自に変更します。

この設定に切り替える前・切り替えた後でどのように表示速度が変わったのか、実際に確認してみます。

上記で記載してきた通りですが、Cocoon PV数のアクセス集計方法をテーマ独自とJetPackではどれくらい処理が重たく（ページの表示が遅く）なってしまうのか、WordPressプラグイン「Query Monitor」で可視化してみます。

まずはじめに、「アクセス集計方法 = Jetpack」と設定した状態での投稿一覧画面を表示してみます。

Query Monitorの結果で、ページの表示に21.54秒、PHPエラー（1 Notice）、重複クエリ（147）、HTTP API Calls（69）が気になります。

中でも赤枠で記したページの表示に21秒もかかるのは大問題ですね。投稿を編集するテンションが下がります（これは気持ちの問題なのでどうしようもありませんが）。

次にHTTP API Calls（69）の箇所。画面下にAPI Callsの一覧が表示されており、https://stats.wordpress.com/csv.php?…というアドレスで複数回のアクセスを行なっていることがわかります。

この部分でJetpackのサーバー（https://stats.wordpress.com/csv.php?…）からJetpackのPV数を取得していますので、一覧に表示する投稿数分のURLアクセスが発生してページの読み込みに時間がかかっている事がわかります。

続いて、「アクセス集計方法 = テーマ独自」と設定した状態での投稿一覧画面のロードした画面です。

Query Monitorの結果です。

ページの表示に0.32秒！！
HTTP API Calls（0）！！

HTTP API Calls（Jetpackのサーバーへのアクセス）がなくなり、ページの表示も体感で爆速！

今まで投稿画面が重たいな〜と思いながらも「少し待てば投稿一覧は問題なく開くし、投稿編集もできるし、まぁ仕方ないか」と諦めながら使っていましたが、WordPressプラグイン「Query Monitor」を導入する事で時間がかかっている処理を調べる事ができます。

今回の例では、HTTP API Calls https://stats.wordpress.com/csv.php?…というアドレスに何度もアクセスして重たくなっているような感じで関わりのあるプラグインはJetpackという目星はついていました。

しかしながら、Cocoon設定のPV数のアクセス集計としてJetpackを設定していると重たくなる事とは知らず、、、解決するまでかなりの時間を要しました。

CocoonとJetpackの組み合わせで投稿一覧が重たい時はCocoon設定 > 管理者画面 > PVの集計方法を確認してみてください。Jetpackに設定されていたら重たい原因はそれの可能性が高いです。PVの集計方法をテーマ独自として設定しておきましょう。