preconnectとは？

link rel=”preconnect”で事前に接続する。

「preconnect」とはその名の通り、「事前接続」のこと。

例えばjQueryやGoogle Analyticsなど、外部からのコードを読み込むときがある。

preconnect。

そういうときに、linkタグのrel属性の値に「preconnect」を指定すると、ページの読み込み速度が上がる、と言われている。

確かにPageSpeed Insightsの点数は上がったりするが、体感としてはなかなかはっきりとしたものがなかった。

preconnectの使い方。

それがたまたま、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で警告を受ける。必須のドメインへだけにした方が良いとのこと。

今回はStatCounterの例として。

petshead内へ記述。

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; ?>

petsbody内へ記述。

HTML

<h4>スマホのブラウザシェア（日本）</h4>

<div id="mobile_browser-JP-monthly-202201-202301" width="600" height="400" style="width:600px; height: 400px;">
</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">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-202201-202301&chartWidth=600">
</script>

HTML

<h4>パソコンのブラウザシェア（日本）</h4>

<div id="desktop-browser-JP-monthly-202201-202301" width="600" height="400" style="width:600px; height: 400px;">
</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">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-202201-202301&chartWidth=600">
</script>

結果。

上記のStatCounterの埋め込みコードにより、下記のようにブラウザシェアのグラフを表示させることができる。

preconnectにより、読み込み速度も改善されている。

preconnectで事前接続しなかった場合。

この投稿ページは２カラムの構成となっているが、「preconnect」を使わなかった場合は読み込みが遅く、一瞬１カラムとして表示がされてしまっていた。

preconnectを使った場合でも時々は一瞬１カラムとなるが、preconnectを使わなかった場合は毎回毎回、１カラムの表示が出ていた。

表示が遅いと、ストレスとなり、誰も得をしない。

preconnectは、数行のコード追加だけの一手間で済むので、コスパが良い。

関連メモ：第三者コードの影響を抑えてください？の対応と、preconnect。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。