第三者コードの影響を抑えてください?の対応と、preconnect。デザイナー、コーチ、ディレクター / いがわ

.

Memo

第三者コードの影響を抑えてくださいの対応。

第三者コードの影響を抑えてください!?

PageSpeed Insightsの悪化。

どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。

PageSpeed Insightsの結果。

PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が出ていた。

PageSpeed Insightsの結果。Speed IndexやFCP、LCP。

1番目と2番目にGoogleのタグ マネージャーとアナリティクスが表示されている。


第三者コードとは何なのか?

おそらくはCDNの影響。

第三者のコードとは、「自分(自社)のファイル類をアップロードしているサーバー以外に設置されているコード」のことだと思われる。

PageSpeed Insightsの説明を見る限り、Googleのタグ マネージャーやアナリティクス、jQueryやJSファイルなどの、外部サーバーのファイルを読み込むCDNのコードが該当している。

しかし、CDNはむしろスピード改善のために推奨されているので、サーバー内にアップするのはちょっと気が引ける。

https:なしのURL。

こちらは思わぬ自分のミス。https:抜きの//からのURLは使用すべきではなかった。

おそらくユニバーサル アナリティクスからGA4への移行の際に何かを参考にしたコードの影響だが、URLに気がつかなかった。

<link rel="preconnect" href="//www.googletagmanager.com">
URLの検証。

実際にアドレスバーに「//www.googletagmanager.com」や「www.googletagmanager.com」を入力してみたところ、アクセスできなかったり、400エラーとなり、Your client has issued a malformed or illegal request.と表示された。

訳すと「クライアントが不正なリクエストを発行しました。」となる。

考えてみるとそりゃそうなのだが、昔の慣習が悪い方へ出てしまった。
これではマズいので、タグ マネージャーのpreconnectのURLを修正。

https:ありのURL。

他方、ユニバーサル アナリティクス(UA)の方はhttps:が付いていたので、問題なく接続されている。

<link rel="preconnect" href="https://google-analytics.com">

preconnectの、接続先URLの修正。

具体的なコードとしては…

変更前)

<link rel="preconnect" href="//www.googletagmanager.com">

変更後)

<link rel="preconnect" href="https://www.googletagmanager.com">

とした。

すると、20ほどパフォーマンスが上がった。上記のコードがブロックの原因だったのか、Total Blocking Timeと、Largest Contentful Paint (LCP)が改善されている。

PageSpeed Insightsの結果。Speed IndeやFCP、LCP。

当サイトでスマホ70以上のスコアは1ヶ月ほどぶりに見た。

後日追記)

PageSpeed Insightsの項目が少し変更に。

再計測したところ、Speed Indexの数値が改善されているが、パフォーマンスの点数は減っている。

別サーバーでは問題がないので、サーバーを変えるとさらに改善されると思うが、とりあえずしばらくはこれで様子を見てみようと思う。

Googleアナリティクスの画面。

関連メモ:preconnectの使い方。ページの読み込み速度を上げるために。

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


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

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

免責事項について

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