サイトスピードで「第三者コードの影響を抑えてください」と言われたときのプリフェッチ制御

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です