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


head内へ記述。
今回はStatCounterの例として。

実装例としてこのページに設置。

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


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

Source: StatCounter Global Stats – Browser Market Share


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

preconnectの効果について。
preconnectの効果。

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

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

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

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

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

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

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

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


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

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

免責事項について

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