Webパフォーマンス虎の
Resouce Hints API で
使い方と、
Request Map Generator に ついて
Request Map Generator に
解析対象の
円の
円の
大きさ
コンテンツのバイト数のが 大きければ、 円の サイズ大きくなります。 ドメイン間の
線の 種類
link による 単純な リソース読み込み、 リダイレクト、 iframe に よる 読込などが 示されます。 円の
色
読み込み先の ドメインが どのような カテゴリの ドメインかが 示されます。
Google Analytics であれば、Web Analytics
になります。
Resouce Hints API を 付与する ドメインの 選定、 HTML タグの 追加
計測対象ページ、
計測対象ページ
Request Map Generator では
以下、
- https://www.monotalk.xyz
- https://www.monotalk.xyz/blog/Calculate-the-gamma-distribution-with-Python/
- https://www.monotalk.xyz/about/
計測データ
上記の
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
はwww.monotalk.xyz
は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"/>
これで
参考
以下、
- Resource Hints
- Resource Hintsで
preconnectと DNS-Prefetchを 併記 - Qiita - Request Map Generator | Trent Walton
- How to Find the Third-Parties on Your Site – Simon Hearne’s blog
- Resource Hints API で
リソースの 投機的取得 | blog.jxck.io - ソーシャルメディアの
読み込みは DNSプリフェッチの まとめ 設定が お得 | ゆっくりと… - コマンドラインで
和集合とか 積集合とか - てきとうな メモ
以上です。
コメント