Webパフォーマンス虎の巻 - Qiita という記事を見ていて、Request Map Generator というツールを知りました。
Resouce Hints API で 先読みするドメインの判断に使えそうでしたので、数ページデータを取得してみました。
使い方と、結果を記載します。

Request Map Generator について

Request Map Generator にアクセスして、解析したい URL を入力すると、以下のような図が生成されます。
2019-03-09 19.05.23.png - Google ドライブ

解析対象のサイトから、どのドメインへのアクセスがあるのかが視覚化されます。
円の大きさ、ドメイン間の線の種類、円の色 にはそれぞれ以下の意味があります。

  • 円の大きさ
    コンテンツのバイト数のが大きければ、円のサイズ大きくなります。

  • ドメイン間の線の種類
    link による単純なリソース読み込み、リダイレクト、iframe による読込などが示されます。

  • 円の色
    読み込み先のドメインがどのようなカテゴリのドメインかが示されます。
    Google Analytics であれば、Web Analytics になります。

Resouce Hints API を付与するドメインの選定、HTML タグの追加

計測対象ページ、計測データ、追加した HTML タグについて記載します。

計測対象ページ

Request Map Generator では図以外に CSV でデータが取得できます。
以下、3 URL を対象に Request Map Generator を実行し、CSV を取得、どのページでもアクセスがあるドメインに対して dns-prefetch meta タグを付与します。

計測データ

上記の 3 URL の CSV を取得、Gist に UP しました。
Request Map Generator の実行結果

CSV ファイルをディレクトリに配置して、以下のコマンドを実行すると、共通して含まれるドメインのみ抽出することができます。 

cat *.csv | cut -d "," -f 1 | sort | uniq -d

 adservice.google.com
 ampcid.google.com
 cdnjs.cloudflare.com
 fonts.gstatic.com
 googleads.g.doubleclick.net
 pagead2.googlesyndication.com
 stats.g.doubleclick.net
 uh.nakanohito.jp
 www.google-analytics.com
 www.google.com
 www.googletagmanager.com
 www.googletagservices.com
 host
www.monotalk.xyz
host は CSV のヘッダ、www.monotalk.xyz は自サイトなので除去し、dns-prefetch するドメインは以下になります。 

 adservice.google.com
 ampcid.google.com
 cdnjs.cloudflare.com
 fonts.gstatic.com
 googleads.g.doubleclick.net
 pagead2.googlesyndication.com
 stats.g.doubleclick.net
 uh.nakanohito.jp
 www.google-analytics.com
 www.google.com
 www.googletagmanager.com
 www.googletagservices.com

追加した HTML タグ

以下のタグを追加しました。 

<meta content="on" http-equiv="x-dns-prefetch-control"/>
<link crossorigin="anonymous" href="//adservice.google.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//ampcid.google.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//cdnjs.cloudflare.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//fonts.gstatic.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//googleads.g.doubleclick.net" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//pagead2.googlesyndication.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//stats.g.doubleclick.net" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//uh.nakanohito.jp" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//www.google-analytics.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//www.google.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//www.googletagmanager.com" rel="preconnect dns-prefetch"/>
<link crossorigin="anonymous" href="//www.googletagservices.com" rel="preconnect dns-prefetch"/>

これでどれくらいパフォーマンスに寄与したかは、スケジュール実行しているパフォーマンス計測結果で確認しようかと思います。

参考

以下、記事作成中に参考にしました。

以上です。

コメント

カテゴリー

最近の投稿