サイトの読み込みを速くする工夫をしても、Google AnalyticsとGoogle AdSenseを利用するとPageSpeed Insightsのスコアが下がってしまいます。スクロールを条件にしてGoogle AnalyticsとGoogle AdSenseのコードを読み込ませると、PageSpeed Insightsのスコアは下がりませんがデメリットがあります。

遅延読み込みのデメリットについて

• Google Analytics：スクロールせずにサイトから離脱した訪問者のデータが取得できない。
• Google AdSense：スクロールすると広告が表示されるために、ファーストビューに広告を配置できない。

Google AdSenseにおいて自動広告を利用している場合に、「広告インテント（テキストリンク広告）」は「バナー広告」などと違い除外エリアの指定ができません。スクロールすると普通の文字が突然にリンクに変わってしまうので、びっくりさせてしまうかもしれません。

preconnectを使ってみる

スクロールによる遅延読み込みは行わずに、他に方法はないか調べるとネットワーク接続を早期に確立して、認識されるページ速度を改善するというページを見つけました。「preconnect」を使って事前接続をする方法があるようです。

preconnectとは？

「preconnect」のメリットを調べました。Can I Use...によると主なブラウザで使えるようで、以前のように「dns-prefetch」と併記する必要は無いようです。具体的な効果としては下記のものがあります。

• 役割: DNSルックアップを事前に行い、対象ドメインの名前解決を高速化した後、サーバーとの接続（TCPハンドシェイクやTLSネゴシエーション）を事前に確立します。
• 適用場面: 外部リソースの読み込みをさらに高速化する場合に使用されます。
• 効果: DNSルックアップに加え、ネットワーク接続を事前に準備することで、リソースの取得時間を大幅に短縮します。

実際の記述

Google AnalyticsとGoogle AdSenseをheadタグ内に通常の形で読み込ませ、PageSpeed Insightsで調べると接続先のサーバーがいくつかあることが分かります。全てを事前接続する場合は下記のコードのようになります。

<link rel=preconnect href=//pagead2.googlesyndication.com>
<link rel=preconnect href=//fundingchoicesmessages.google.com>
<link rel=preconnect href=//googleads.g.doubleclick.net>
<link rel=preconnect href=//ep1.adtrafficquality.google>
<link rel=preconnect href=//ep2.adtrafficquality.google>
<link rel=preconnect href=//www.google.com>
<link rel=preconnect href=//www.googletagmanager.com>
<link rel=preconnect href=//www.google-analytics.com>

サーバーは表示する広告の種類によって変わるようなので、ご自分の環境に合わせて書き換えください。実際にPageSpeed Insightsのスコアが上がったかというと、何度か測定したものの、分かりくい結果しか得られませんでした。とういのも、AnalyticsとAdSenseはリクエスト数が多いので計測のたびにスコアが上下します。同じページでも85〜97の間で変化します。スコアの揺れは「preconnect」を入れても入れなくても同じですが、若干入れたほうがスコアが良い気がします。

環境によってはマイナスの効果があるかもしれませんし、効果がない場合もあるかもしれません。測定をして効果があれば採用してみてはいかがでしょうか。

最後までお読みいただき、誠にありがとうございます。