今回は、PageSpeed Insightsでウェブサイト本来のパフォーマンスを調べる方法です。
何だか中二くさいタイトルになりましたが、単に「外部ツールリソースの影響を排除したパフォーマンス能力を測る方法」の紹介です。
目次
通常のPageSpeed Insights
通常のPageSpeed Insightsだと、サイトのコンテンツにJavaScript、CSS、画像などのリソースファイルが含まれていると、それを含めたパフォーマンスが算出されます。
こんな感じで。
通常のPageSpeed Insightsでは、こういった外部リソースも含めた形でパフォーマンスが表示されます。
こういったものは、実際にサイトに表示されているので、これらを含めたパフォーマンスが算出されるのは当然です。加えて、このような外部ファイルは、対策がしようがないので基本無視してよいものです。
けれど、こういった対策できない外部リソースが常に表示されていると、「自サイト内の対策可能なパフォーマンス改善」を行っている時に、結果を見えにくくします。
サイト高速化のためのチューニングを行っているときは、自サイト内のみのパフォーマンスを表示してチェックしたいものです。
そういった場合のために、PageSpeed Insightsでは、ちょっとした設定で「外部サイトリソース問題」を排除したパフォーマンスを計測することができます。
外部リソース問題を排除する方法
外部サイトのリソース問題を排除するには、「filter_third_party_resources=true」というパラメータを付けたPageSpeed Insights URLにアクセスすると自前のリソースのみを検証することができます。
具体的に言うと、以下のようなURLでアクセスします。
https://developers.google.com/speed/pagespeed/insights/?filter_third_party_resources=true
赤字部分が付け加えたパラメータです。
以下のリンクにアクセスするとパラメータを付け加えたページにアクセスすることができます。
PageSpeed Insights（外部リソースフィルタ＆日本語化パラメータ）
外部リソースが排除されたことによって、管理しているサイトの正確なパフォーマンスが表示され、数値が上がることもあります。
参考 [PageSpeed Insights]アナリティクスを代表とする外部ファイルのブラウザキャッシュ設定について – Google プロダクト フォーラム
動作テスト
外部リソースを除外したことによって、どれほどパフォーマンス数値が変わるものか、当サイトを計測して試してみました。
モバイル
外部リソースを排除前
52/100
外部リソースを排除後
65/100
数値52→65とは13ポイントも上がり、合格も4→7になっています。
パソコン
外部リソース排除前
79/100
、
外部リソース排除後
85/100
パフォーマンス数値は、79→85に、合格したものは4→7になっています。
外部リソース
外部リソースも、排除前は以下のように表示されていたのが、
全く表示されなくなったり、表示されたとしても、以下のように少なくなりました。
まとめ
このように、パラメータをつけたPageSpeed Insightsからアクセスすることで、サイト本来のパフォーマンスを計測することができます。
サイト表示スピードの高速化チューニングなどを行っているときは、この方法を利用することで、効果をより見やすくできます。
