PageSpeed Insightsで秘められし真の能力を測る方法(他サイトのリソースを除外)

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

今回は、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からアクセスすることで、サイト本来のパフォーマンスを計測することができます。

サイト表示スピードの高速化チューニングなどを行っているときは、この方法を利用することで、効果をより見やすくできます。