PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=JA
サイトスピードで「第三者コードの影響を抑えてください」と言われたとき
ヘッダ内に記載しておくとよい、プリフェッチ制御
x-dns-prefetch-control
プリフェッチのオン・オフ
オフ
<meta http-equiv="x-dns-prefetch-control" content="off">
オン
dns-prefetch
特定のホスト名の名前解決を強制する
特定のホスト名に対する DNS の事前解決を強制することができます
使用例
Webフォント (googleフォント､Adobeフォント 等)
SNS (Twitter､Facebook 等)
CDN (Cloudflare､CloudFront 等)
解析 (googleアナリティクス 等)
広告 (Googleアドセンス､Amazonアソシエイト 等)
preconnect
TCP接続まで確立
「クライアントとサーバーの間のDNS解決」「TCPのハンドシェイク開始」「TLSトンネルのネゴシエーション」といったネットワーク接続に必要な動作を、必要になる前に行えるようにする。
「preconnect」を3つ以上指定するとPageSpeed Insightsで警告が表示されます｡
「preconnect」には､特に重要なものだけを指定したほうがよさそうです｡
prefetch
リソースをあらかじめダウンロード
ページと画像などのリソースをすべて非表示タブに読み込ませておく
as属性の値とリソース種別
media … audio､videoなどのメディア
script … スクリプト
style … CSSファイル
font … フォント
image … img､picture､srcsetなどの画像
worker … Worker､SharedWorkerなどのワーカ
embed … embed要素でロードされるオブジェクト
object … object要素でロードされるオブジェクト
document … iframe､frameなどのドキュメント
まとめ
つまりheadの中身はこんな感じ
<!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="preconnect" href="//www.google.com/analytics/analytics/"> <link rel="preconnect" href="//www.yahoo.com/"> <link rel="preconnect" href="//marketingplatform.google.com/about/tag-manager/"> <link rel="dns-prefetch" href="//developers.google.com/speed/libraries/"> <link rel="dns-prefetch" href="//www.doubleclickbygoogle.com/"> <link rel="dns-prefetch" href="//developers.google.com/apis-explorer/#p/"> <link rel="dns-prefetch" href="//fonts.google.com/"> <meta name="format-detection" content="telephone=no"> </head>