サイト高速化のために <link rel="preconnect"> を使っている人は多いですが、 実は preconnect を入れすぎると逆にページが遅くなります。
以下のGoogle の公式ドキュメントにも以下のように記載されています。
- preconnect は重要な第三者ドメインに対してのみ使うべき
- 使いすぎると CPU 時間を消費し逆効果になる
- 10秒以内に使われない接続はブラウザが閉じてしまうため無駄になる
Cocoon は初期設定のままだと preconnect に設定されているURLが多いため、 PageSpeed Insights のスコアに大きく影響します。
この記事では、 preconnect の最適化＋Cocoon 初期設定の見直しをまとめてみました。
１．結論：preconnect は「重要な4つ」だけ残せばよい
先に結論からですが、以下の4つのURLだけ残せばよいと思います。
- https://pagead2.googlesyndication.com
→AdSense の広告配信サーバー。広告を使うなら必須。 - https://googleads.g.doubleclick.net
→AdSense の入札・広告表示に関わる重要サーバー。 - https://www.googletagmanager.com
→Google Tag Manager（GTM）。計測タグを使うなら必須。 - https://fonts.gstatic.com
→Google Fonts の実体ファイル。Webフォント使用時のみ必要。
２．Cocoonの初期設定と設定変更
Cocoon側の初期設定の値と実際の設定変更をしていきます。
2-1. Cocoonの初期設定
Cocoon設定 > 高速化 > 事前読み込み で設定されているCocoonの初期設定は以下のようになっていました。
※Cocoonを使い始めた時期によって変わっているかもしれません。
具体的には以下です。
www.googletagmanager.com
www.google-analytics.com
ajax.googleapis.com ×
cdnjs.cloudflare.com ×
pagead2.googlesyndication.com
googleads.g.doubleclick.net
tpc.googlesyndication.com ×
ad.doubleclick.net ×
www.gstatic.com
cse.google.com ×
fonts.gstatic.com
fonts.googleapis.com ×
cms.quantserve.com ×
secure.gravatar.com ×
cdn.syndication.twimg.com ×
cdn.jsdelivr.net ×
images-fe.ssl-images-amazon.com ×
completion.amazon.com ×
m.media-amazon.com ×
i.moshimo.com ×
aml.valuecommerce.com ×
dalc.valuecommerce.com ×
dalb.valuecommerce.com ×ここで「×」マークをつけているのは、PageSpeed Insight の指摘事項で出てくる「ネットワークの依存関係ツリー」の部分で以下のように記載がされていたものです。
未使用の事前接続。preconnect は、ページでリクエストされる可能性が高いオリジンにのみ使用してください。
具体的な画面は下部の 3-1. 初期設定状態でのPageSpeed Insightの評価 を見てください。
この「×」マークを除くと、実際に利用されている６つのURLがあるので、このうち４つに絞ります。
2-1-1. www.google-analytics.com は preconnect から削除
結論、www.google-analytics.com は preconnect にしなくてよいです。
理由は、Analytics の通信は「計測用」であり、ページ表示のクリティカルパスに関係しないためです。
なので、preconnect する必要がありません。
2-1-2. www.gstatic.com は preconnect から削除
結論、www.gstatic.com も preconnect にしなくてよいです。
理由は、www.gstatic.com は Googleサービス全般の静的ファイル置き場であり、 ページ初期ロードでは使われないためです。
また、Google Fonts の配信には使われていないので、こちらもページ表示のクリティカルパスに関係しないため preconnect 不要となります。
2-3. 設定を変更する
設定変更は簡単で、Cocoon設定 > 高速化 の「事前読み込み」の欄のURLを上記で絞った４つにするだけです。
これで設定完了です。
３．設定前後のPageSpeed Insightのスコアを比較
最後に設定前後でPageSpeed Insightのスコアが変わるかどうかを確認してみます。
3-1. 初期設定状態でのPageSpeed Insightの評価
初期設定状態では以下のスコアでした。
また、 preconnect に関連する具体的な指摘箇所として「ネットワークの依存関係ツリー」も以下のようになっており、４つ以上 preconnect が使われていることと、未使用のURLに対して指摘されています。
3-2. 設定変更後のPageSpeed Insightの評価
次に設定変更後のスコアを確認します。
若干ですが改善されていました。
また、Total Blocking Time の項目が特に改善されて、赤（590ミリ秒）→黄色（260ミリ秒）に変わっていました。
また、「ネットワークの依存関係ツリー」の指摘はあるものの、４つ以上 preconnect が使われていることと、未使用のURLに対しての指摘はなくなっていることが確認できました。
４．まとめ
preconnect の最適化と、Cocoon 初期設定の見直し、見直し前後の PageSpeed Insight の評価の比較結果をまとめてみました。
preconnect は以下の４つのみでＯＫです。
www.googletagmanager.com
pagead2.googlesyndication.com
googleads.g.doubleclick.net
fonts.gstatic.comこの設定変更によって PageSpeed Insight の評価が劇的に改善することはなかったですが、指摘事項には対応できたのでその点はよかったと思います。
