Google Analytics有でGooglePageSpeedを100点にする方法

f:id:tkosuga:20150904135325j:plain 写真はうちのみーこ。

PageSpeed Insightsで100点を取るためには「Google Analytics を外しましょう！」という情報をよく見かけるので、

Google Analyticsを外さずにちゃんと100点を取る方法を説明します。Bootstrap等のよくある普通のサイトを高速化してPage Speed Insightsで100点を取る方法も参考にしてください。

王道編

analytics.jsをサーバーにホスティングする

サーバーにホスティングして、そこでキャッシュの設定を行えば解決ですが、定期的に更新しているから保存して使わないようにと警告されています。

そのためサーバー内でcron等を利用して定期的にanalytics.jsをダウンロード、そのファイルに変更があった場合にはパラメーターを変更する（ファイルのハッシュ値をパラメーターに利用しても良い）、と言ったanalytics.jsの更新に対応できれば問題ありません。

CDNを経由させる

analytics.jsをCDN経由で取得するようにすればCDNのキャッシュが有効になるため「キャッシュの有効期限が短い」と警告が出る問題が解決します。

WordPressでは、WordPress内で使われるcss/js/imgをCDN経由で取得するプラグインが幾つかあります。CDN EnablerやJackpotのプラグイン Photon等です。

番外編

ga-lite を使う

Analytics.jsのキャッシュ可能なサブセットga-liteを使うと機能制限がありながらも解決できます。

github.com

100行ほどの小さいjsにまとめられています。PVだけ取れれば良い人向けです。

外道編

PageSpeedInsightsのオプションでサードパーティーのリソースを除外する

PageSpeed ToolsのPagespeedapi: runpagespeedを見ると以下の通りで、Page Speed InsightのURLに?filter_third_party_resources=trueを付け加えるとGoogle Analyticsのjsファイルが評価から除外されます。

filter_third_party_resources     boolean     Indicates if third party resources should be filtered out before PageSpeed analysis. (Default: false)

analytics.js等のサードパーティーリソースを除外したPageSpeedInsightsを使う場合は以下のリンクからアクセスしてしてください。

https://developers.google.com/speed/pagespeed/insights/?filter_third_party_resources

PageSpeedInsightsからのアクセスだったらGoogleAnalyticsを外す。

以下はPHPのコード例です。ユーザーエージェントを見てPageSpeedInsightsのアクセスであればGoogleAnalyticsのコードをHTMLに含めません。

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
// your analytics code here
<?php endif; ?>

おちついて編

PageSpeedInsightsの測定中はanalytics.jsを外す。

ストレートにanalytics.jsを読み込むscriptタグを外すと減点０になります。

サイトTOPからanalytics.jsを外す。

PageSpeedInsightsで測定するのはサイトTOPが多いと思います。サイトTOPだけanalytics.jsを読み込まなければ減点がありません。

まとめ

このanalytics.jsがあるために1点減点され、99点になっているサイト管理者もいると思います。

「気にするな」と言われれば、そこまでの問題ですが様々な解決方法があるので必要に応じて参考にして下さい。

webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ