W3 Total Cache で Google Page Speed APIを利用するための手順

W3 Total Cache(以下「W3TC」) の設定項目の中にある Enable Google Page Speed dashboard widget は、W3TCのダッシュボードやWordPressのツールバーにGoogle Page Speed Insights(以下「PSI」)のスコアや診断結果を表示してくれる一見便利そうなオプションですが、どういうわけかネット上の解説記事では必ずといっていいほどチェックを外すように書かれています。

実際APIキーを設定しなければ何もしないので、わざわざOFFにする必要すらないのですが、デフォルトでONになっているところから、プラグイン作者のアツイ想いみたいのがあるのかと思って、実際に試してみることにしました。

Page Speed API Key を取得する

まず、WordPressから直接PSIにアクセスして、スコア等のデータを読み込むためのアクセスキー(APIキー)を Google APIs ダッシュボードから取得します。まず、Google APIs ダッシュボード(https://console.developers.google.com/apis)にログインしておいてください。

プロジェクトの作成

ダッシュボードからプロジェクトの新規作成リンクをクリック

Google API プロジェクトの新規作成

プロジェクト名を入力して作成ボタンをクリック

プロジェクト名は何でもOK

ここでは Google-PSI という名前にしてみました。

作成したプロジェクトに PageSpeed API を追加

プロジェクト名を確認して「APIとサービスを有効化」をクリック

APIとサービスを有効化

APIライブラリからPageSpeedを検索して有効化

認証情報(APIキー)を作成

Googleの提供するデータにアクセスする権限を証明するための認証情報を設定します。これにより作成したプロジェクト内のAPIサービスが第三者に不正利用されるのを防ぎます。

API有効化後の画面で「認証情報を作成」ボタンをクリック

API有効化後の画面で「認証情報を作成」ボタンをクリック

認証情報作成ウィザード画面で「APIキー」のリンクをクリックしてウィザードをスキップ

認証情報作成ウィザード

APIキー作成画面で必要事項を入力

APIキー作成画面

APIキーの名前を入力したら、アプリケーションの制限でHTTPリファラーを選択してPSIを利用する自分のWebサイトのURLを入力します。参照元となるURLはページごとに異なるので末尾に「スラッシュとアスタリスク」をつけておきます。

URLを1つ入力すると、もう一つ入力欄が出現するので、複数のサイトでAPIキーを利用する場合は同様にURLを追加します。

OAuth同意画面の設定

プロジェクトに組み込まれたAPIによって、自動的にデータがGoogleサービスと連携することになるので、連携するデータの種類によっては、改めて同意を要求する画面を表示できるようになっています。認証情報の作成プロセスでは、この画面の設定が求められています。

W3TCとPSIの間で連携する場合、一般公開されているWEBページのURLとPSIのスコアおよび分析結果だけなので、OAuthの同意画面は表示されませんが、利用するAPIの種類に関わらず、設定だけは必要になっているようです。

同意画面を構成 ボタンをクリック

認証情報作成ボタン

User Typeで「外部」を選択して作成ボタンをクリック

OAuthユーザータイプの選択画面

OAuth同意画面の構成要素(赤枠内)を入力します

OAuth同意画面の構成要素入力画面

アプリケーション名、承認済みドメイン、ホームページURL、プライバシーポリシーURLを自分のサイトに合わせて入力し、保存ボタンをクリックします。

  • 画像内②の承認済みドメインは、入力後にエンターキーを押して確定します。間違って入力した場合は、右側のゴミ箱アイコンをクリックします。
  • サブドメインで運用する場合でも、メインのドメインを入力します。

この画面の右側にも注意書きがありますが、ロゴを設定してしまうと Googleによる確認作業が行われるため、設定によっては確認終了までAPIキーが利用できなくなることがあります。今回の用途では不要なのでロゴをアップロードしないようにしてください。

「スコープを追加」ボタンからPageSpeed Insights を追加することもできますが、これによって同意画面が表示されることはありませんでした。

作成したAPIキーをコピーする

認証情報の作成プロセス(APIキーとOAuth同意画面の設定)が終わったら、Google APIs のダッシュボード左側のメニューから「認証情報」をクリックして、作成したAPIキーをコピーします。

APIキーをコピーするためのボタンアイコン

以上でGoogle APIs側の作業は完了です。

W3 Total Cache 側の設定

WordPressの管理画面でW3TCの General Settings を開き、画面下の方にある Miscellaneous (その他の意)欄を下記画像を参考にして自分のサイトに合わせて設定します。なお、この設定を保存する際にキャッシュをパージする必要はありません。

W3TCのMiscellaneous欄

画像内①~③は必須入力です。④はWordPressログイン中に画面上部に表示されるツールバーに PSIのスコアを表示するオプションです。各ページを表示する際にPSIのスコアを取得します。

表示例

設定が完了すると、W3TCのダッシュボードやWordPressのツールバーにPSIの情報が表示されるようになります。以下に表示例を載せておきました。

W3 Total Cache に Google PageSpeed を設定すべきか?

結論としては、このオプションを有効にする必要はありません(想像はしていましたが)。理由は以下のとおりです。

  • W3TCのダッシュボードウィジェットに表示されるPSIのスコアと分析はサイトトップURLのみ
  • PageSpeed APIの仕様なのかW3TCが取り出すデータが不足しているのかわかりませんが、ツールバーに表示されるスコアは、おそらくデスクトップ版のスコアのみ? しかも、ページを表示する度に計測しなおしている模様。
  • ツールバーのスコア表示を有効にしている場合、ページの描画が完了していてもスコアの取得が終わるまでブラウザのローディングアイコンが止まらない(もちろん、ログインしていない訪問者がページを閲覧する際のページ速度に影響はありません)

ただ、個人的に良いところを挙げるなら、ツールバーにPSIのスコアが表示される機能は便利です。今のところ改良される気配はありませんが、モバイルとデスクトップのスコアが表示されて、計測はツールバーから手動で実行できるようになれば、また使ってみても良いと思いました。

たぶん、この記事を読んだ後に W3TCにPageSpeed APIを設定する方はいないと思いますが、試しにやってみて、「やっぱイラネ」となった場合は、作成したプロジェクトを削除しておきましょう。30日の待機期間を経て、プロジェクト内のAPIキーも一緒に削除されます。

Google API プロジェクトの削除手順については、以下のGoogle公式ヘルプで、プロジェクトのシャットダウン(削除)の項が参考になります。

大雑把に言うと、Google Cloud Platform のリソースの管理画面で、作成したプロジェクトにチェックを入れて画面上部のゴミ箱アイコンをクリックするだけです。