PageSpeed Insightsについて以前にも書きましたが、前回の記事「PageSpeed Insights の点数を50点以上にしたい」ではWordPressのプラグインで対応できる部分を紹介してお茶を濁しました。
今回またPageSpeed Insightsの別項目に対応する方法をご紹介したいと思います。今回は「第三者コードの影響を抑えてください」についてです。
僕が普段お仕事で担当しているサイトではGoogle Analyticsに968ms（ミリ秒）メインスレッドの読み込みの妨げになっているようです。これを「ページのメインの部分を読み込み終えた後に第三者コードを読み込んで」いきましょう。
ただしGoogle Tag Manager（以下：GTM）で読み込んでいるGoogle Analyticsについてのみになりますのでかなり限定的な対応になりますのでご了承ください。
第三者コードの影響とは？
第三者コードとは、上画像にあるように「Google Analytics」や「CDN」など外部のサービスから読み込んでいるコードのことです。外部から読み込んでいるコードによって表示速度が遅くなってますよー、ということですね。
対応方法
GTMの設定画面になります。
Google Analyticsタグの配信トリガーが以下のような目のマークになっていませんか？
こちらのトリガーはページが表示されたタイミングになりますので、ページの表示が完了した後にタグを読み込むように変更すれば対応完了です。
トリガーの設定画面から「DOM Ready」を選択しましょう。
| DOM Ready | HTMLの読み込みが終了した後、DOMが解析できる状態になった後に発動 |
| ウィンドウの読み込み | ページが完全に読み込まれた後に発動 |
| ページビュー | ブラウザがページの読み込みを開始するとすぐに発動 |
こうすることによってページの表示が優先され、表示速度（ユーザー体験）が向上します。
「ウィンドウの読み込み」にしてページが完全に読み込まれた後にしてもいいのですが、それではすぐに離脱した人のアクセスが取得できない（HTMLも読み込まずに離脱する場合はDOM Readyでも取得できませんが）ので、間をとってDOM Readyがいいのかなと。
これで「第三者コードの影響を抑えてください」の一番の原因については対応完了です。
注意としては、これまで一瞬でもページが表示されればカウントされていたアクセスが取得できなくなることです。Google Analyticsのデータとしては「ページビュー」が一番正しいのかと思いますが、表示速度を少しでも早くしたいのであれば「DOM Ready」もしくは「ウィンドウの読み込み」にしましょう。
何に重きを置くかで判断は変わってくるかと思いますが、読み込みが終わる前に一瞬で離脱するアクセスをカウントするのは不要な気もしますよね。
他の第三者コードの読み込みに時間が掛かっているようであれば別途対応が必要になりますが、なるべく外部ファイルの読み込みは減らすにこしたことはなさそうですね。
コメントを残す