preconnectとは？
link rel=”preconnect”で事前に接続する。
事前接続。
「preconnect」とはその名の通り、「事前接続」のこと。
例えばjQueryやGoogle Analyticsなど、外部からのコードを読み込むときがある。
preconnect。
link rel=”preconnect”
そういうときに、linkタグのrel属性の値に「preconnect」を指定すると、ページの読み込み速度が上がる、と言われている。
確かにPageSpeed Insightsの点数は上がったりするが、体感としてはなかなかはっきりとしたものがなかった。
preconnectの使い方。
事前接続したいドメインを指定する。
rel=”preconnect” href=”事前接続したいドメイン”
たまたま、WordPressの投稿ページに「StatCounter」によるブラウザシェアのコードを導入した際に、その効果が明確に感じられた。
以下、その時の使い方について…
使い方、記述の例。
<link rel="preconnect" href="事前接続したいドメイン">
というように、linkタグに「rel=”preconnect”」を指定し、かつ「href=”事前接続したいドメイン”」を一緒に指定する。
Google Analyticsの場合。
<link rel="preconnect" href="https://google-analytics.com">
となる。
StatCounterの場合。
<link rel="preconnect" href="https://www.statcounter.com">
<link rel="preconnect" href="https://gs.statcounter.com">
となる。
使用時の注意点。
preconnectを一つのページに3つ以上指定すると、PageSpeed Insightsで警告を受ける。必須のドメインへだけにした方が良いとのこと。
MDNでも同様の説明がされている。
参照元：rel=preconnect – HTML: ハイパーテキストマークアップ言語 | MDN
head内へ記述。
今回はStatCounterの例として。
実装例としてこのページに設置。
PHP & HTML
（※このページへ影響が出るので、例ではWordPressの投稿IDによる条件分岐を使用。全ページに適用させたい場合は１行目と４行目のPHPのコードは不要です。）
<?php if(is_single('12345')): ?>
<link rel="preconnect" href="https://www.statcounter.com">
<link rel="preconnect" href="https://gs.statcounter.com">
<?php endif; ?>
body内へ記述。
HTML
スマホのブラウザシェア（日本）。widthとheightの値は変更。
<div id="mobile_browser-JP-monthly-202301-202401" width="1000" height="667" style="width:1000px; height: 667px;"></div><!-- You may change the values of width and height above to resize the chart --><p>Source: <a href="https://gs.statcounter.com/browser-market-share/mobile/japan/#monthly-202301-202401">StatCounter Global Stats - Browser Market Share</a></p><script type="text/javascript" src="https://www.statcounter.com/js/fusioncharts.js"></script><script type="text/javascript" src="https://gs.statcounter.com/chart.php?mobile_browser-JP-monthly-202301-202401&chartWidth=600"></script>
</script>
HTML
パソコンのブラウザシェア（日本）。widthとheightの値は変更。
<div id="desktop-browser-JP-monthly-202301-202401" width="1000" height="667" style="width:1000px; height: 667px;"></div><!-- You may change the values of width and height above to resize the chart --><p>Source: <a href="https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-202301-202401">StatCounter Global Stats - Browser Market Share</a></p><script type="text/javascript" src="https://www.statcounter.com/js/fusioncharts.js"></script><script type="text/javascript" src="https://gs.statcounter.com/chart.php?desktop-browser-JP-monthly-202301-202401&chartWidth=600"></script>
結果
上記のStatCounterの埋め込みコードにより、下記のようにブラウザシェアのグラフを表示させることができる。
preconnectにより、読み込み速度も改善されている。
スマホのブラウザシェア（日本）
Source: StatCounter Global Stats – Browser Market Share
パソコンのブラウザシェア（日本）
preconnectで事前接続しなかった場合。
preconnectの効果について。
preconnectの効果。
この投稿ページは２カラムの構成となっているが、「preconnect」を使わなかった場合は読み込みが遅く、一瞬１カラムとして表示がされてしまっていた。
preconnectを使った場合でも時々は一瞬１カラムとなるが、preconnectを使わなかった場合は毎回毎回、１カラムの表示が出ていた。
表示が遅いと、ストレスとなり、誰も得をしない。
preconnectは、数行のコード追加だけの一手間で済むので、コスパが良い。
いつの間にかまた、読み込み時に一瞬１カラムとして表示がされてしまうようになっていた。
仕方ないので、このページは条件分岐で１カラムレイアウトとした。
別サーバーでは問題ないため、サーバーを変えると、おそらく改善されると思われる。
関連メモ：第三者コードの影響を抑えてください？の対応と、preconnect。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
