公開前のページでもPageSpeed Insightsする .htaccess の記述例

自社ブログのネタの再掲です。

公開前サイトでも PageSpeed Insights したい！ リリース前から計測するためのWebサーバー設定テクニック (Apache編) - アイデアマンズブログ

関係者とPageSpeed Insightsからのアクセスを許可する方法

公開前のページにはBasic認証を設置したり、IPアドレスの制限を設けますが、それだと PageSpeed Insights での計測もできません。

LighthouseやChrome DevToolsのLighthouseタブのPerformanceカテゴリで同様の計測はできますが、スコアが測定端末やネット環境に左右されるので、安定させるにも一苦労です。

そこでサイト自体は公開前の段階でもWebサービスの PageSpeed Insights にはアクセス許可を与えて計測する方法を考えてみたという記事です。

アクセス元IP

PageSpeed Insightsのアクセス元IPアドレスについては、次のページに案内があります。

Frequently Asked Questions  |  PageSpeed Service  |  Google Developers

次のコマンドで接続元ネットワークを取得できるようです。

nslookup -q=TXT _netblocks.google.com 8.8.8.8
nslookup -q=TXT _netblocks2.google.com 8.8.8.8
nslookup -q=TXT _netblocks3.google.com 8.8.8.8

User Agent

2020年7月現在、モバイル端末としての計測は

Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse

デスクトップPCとしての計測は次のUser-Agentリクエストヘッダを伴って実行されます。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse

共通するキーワードは Chrome-Lighthouse です。

.htaccess の記述例

以上の条件を組み合わせます。つまり、

1. GoogleのIP帯域からのHTTPリクエストで、
2. User-AgentにChrome-Lighthouseを含む

ならばPageSpeed Insightsによる計測だからある程度安全だろう、という判断です。

この時点ではまだ、URLを知る悪意のある第三者がPageSpeed Insightsを通してページの一部を窃視する可能性はあります。パスワード代わりのGETパラメータも判定要素に付加するとよいかもしれません。

接続元ネットワークの部分は変更される可能性があります。元記事 は定期的に自動更新されるので、この記事が古くなったときはそちらを参照ください。

  AuthType Basic

  # パスワードファイルのパスやメッセージは変更してください。
  AuthUserFile /path/to/.htpasswd
  AuthName "Enter username and password."

  # LIGHTHOUSE環境変数を経由してUser-AgentがChrome-Lighthouseを含むか判定します。
  SetEnvIf User-Agent "Chrome-Lighthouse" LIGHTHOUSE

  <RequireAny>
    # 基本認証を通過したユーザーは許可します。
    Require valid-user

    # 関係者の固定IPアドレス解放は必要に応じて記述してください。
    # Require ip xxx.xxx.xxx.xxx

    # Googleからのアクセスで、かつ、User-Agent が Chrome-Lighthouse を含む場合は許可します。
    <RequireAll>
      Require env LIGHTHOUSE
      <RequireAny>
         Require ip 108.177.8.0/21
         Require ip 108.177.96.0/19
         Require ip 130.211.0.0/22
         Require ip 136.112.0.0/12
         Require ip 172.217.0.0/19
         Require ip 172.217.128.0/19
         Require ip 172.217.160.0/20
         Require ip 172.217.192.0/19
         Require ip 172.217.224.0/19
         Require ip 172.217.32.0/20
         Require ip 172.253.112.0/20
         Require ip 172.253.56.0/21
         Require ip 173.194.0.0/16
         Require ip 208.81.188.0/22
         Require ip 209.85.128.0/17
         Require ip 216.239.32.0/19
         Require ip 216.58.192.0/19
         Require ip 35.190.247.0/24
         Require ip 35.191.0.0/16
         Require ip 64.233.160.0/19
         Require ip 66.102.0.0/20
         Require ip 66.249.80.0/20
         Require ip 72.14.192.0/18
         Require ip 74.114.24.0/21
         Require ip 74.125.0.0/16
        </RequireAny>
    </RequireAll>
  </RequireAny>

これでリリース前からPageSpeed Insightsでフロントエンドの実装を機械的に監査できますね！