preconnectの使い方。ページの読み込み速度を上げるために。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
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">
となる。
今回はStatCounterの例として。
head内へ記述。
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
<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により、読み込み速度も改善されている。
スマホのブラウザシェア（日本）
Source: StatCounter Global Stats – Browser Market Share
パソコンのブラウザシェア（日本）
preconnectで事前接続しなかった場合。
この投稿ページは２カラムの構成となっているが、「preconnect」を使わなかった場合は読み込みが遅く、一瞬１カラムとして表示がされてしまっていた。
preconnectを使った場合でも時々は一瞬１カラムとなるが、preconnectを使わなかった場合は毎回毎回、１カラムの表示が出ていた。
表示が遅いと、ストレスとなり、誰も得をしない。
preconnectは、数行のコード追加だけの一手間で済むので、コスパが良い。
関連メモ：第三者コードの影響を抑えてください？の対応と、preconnect。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
