preconnectの使い方。ページの読み込み速度を上げるために。デザイナー、コーチ、ディレクター / 井川

.

Memo

preconnectの使い方。ページの読み込み速度を上げたいとき。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

preconnectとは?

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

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

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

preconnect。

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

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

preconnectの使い方。事前に接続する。


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による条件分岐を使っているが、全ページに適用させたい場合は1行目と4行目の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により、読み込み速度も改善されている。

スマホのブラウザシェア(日本)

Source: StatCounter Global Stats – Browser Market Share

パソコンのブラウザシェア(日本)

Source: StatCounter Global Stats – Browser Market Share


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

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

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

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

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

後日追記)
いつの間にかまた、読み込み時に一瞬1カラムとして表示がされてしまうようになっていた。
別サーバーでは問題ないため、サーバーを変えると、おそらく改善されると思われる。

preconnectの使い方。ページの読み込み速度を上げたいとき。

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

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


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

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。