第三者コードの影響を抑えてください/Google Analytics項目を改善【WordPress】
ふとPageSpeed Insightsで自分のブログをスキャンしてみたところ、Google Analytics関連のコードだけひときわ目立ってページ読み込みをブロックしているという診断結果が出たのが気になりました。
読込み時間が576msも余計にかかっている
赤くなって怒られる部分がここだけだったので意地でも改善したくなり、試行錯誤した結果わりと簡単に解消したのでメモしておきます。
メモ：
Google Analytics計測用のコードをどのようにサイトに設置しているか(プラグインを使っているかGoogleタグマネージャーを使っているか等)で効果のあるなしが出てくると思います。
ちなみに本施策実行後にどうなったかというと、「診断」の項目から「第三者コードの影響を抑えてください」が消えて、
「診断」の赤項目から消えた
「合格した監査」の項目に分類されるようになり、数値が576msから35msへ改善されました。
これにともなって、スピードスコアも 90 から 97〜100 へアップしました。
実施前▼
実施後▼
施策実施の方法として、以下3つをご紹介。あなたの環境で合うものを試してみてください。
- WordPressテーマファイルを編集する方法
- プラグイン「LiteSpeed Cache」を利用する方法
- プラグイン「Autoptimize」を利用する方法
- Googleタグマネージャーの設定を変える方法)
LiteSpeed Cache、Autoptimize、どちらのプラグインも使用するWordPressテーマやカスタマイズ状況によってはインストール→有効化する時点でサイト表示が崩れるなど悪影響が出る可能性があるデリケートなプラグインです。
すでに現時点で利用している方のみ参考にしてください。PageSpeed Insightsの「第三者コードの影響を抑えてください」項目だけの改善を目的としての新規インストールはおすすめしません。
どちらのプラグインもインストールしていない場合は①のテーマ編集をする方法、Googleタグマネージャーを使っている人はタグマネージャーの設定を変える方法をおすすめします。
ー もくじ ー
PageSpeed Insights"第三者の使用の最小化"のGoogle Analytics項目を改善
1. テーマを編集する場合の手順
WordPress管理画面の 外観 → テーマエディター をクリック。
テーマエディターのページは慎重に操作を行いましょう。
右側にある「テーマヘッダー(header.php)」をクリック。
header.phpの編集ページが開いたら、次は貼り付けるコードを準備します。個人のWordPress環境によって異なります。
メモ：
以下3つの場合分けをしましたが、何のことかさっぱり分からんという方は3パターンのコードを全て試して効果があるコードを洗い出すと良いです。以下に記載しているコードであれば、関係ないラインを貼り付けたからと言ってサイトが壊れるようなエラーは起きません。3行同時に貼り付けても大丈夫です。
ただ、効果のあるコードが判明した後は、不要なコードは削除してください。
①：GoogleタグマネージャーにGoogleアナリティクスを紐づけて、タグマネージャーのタグをサイトに埋め込んでいる場合は以下コードをコピーする。
HTML<link rel="preload" href="https://www.googletagmanager.com/gtm.js" as="script">②：以下のようにスキャン結果で/analytics.jsとある場合は...
↓のコードをコピーする。
HTML<link rel="preload" href="https://www.google-analytics.com/analytics.js" as="script">
③：Googleアナリティクスのトラッキングコードを直接サイトに埋め込んでいる場合は以下をコピーする。
HTML<link rel="preload" href="https://www.googletagmanager.com/gtag/js" as="script">参考MDN web docs：rel="preload" によるコンテンツの先読み
コピーしたら、以下のように<head>タグと</head>閉じタグの間の行へコピーしたコードをそのままペーストする。
メモ：
間といわれても具体的にどこへ...というかたは、上記15行目のように<?php wp_head() ?>というタグがあるはずなのでその直前でOKです。
「ファイルの更新」をクリックし、「ファイルの編集に成功しました。」と表示されればOKです。
これでもう一度PageSpeed Insightsでスキャンしてみると、数値が改善していました。
2. LightSpeed Cacheを使っている場合の手順
WordPress管理画面の LiteSpeed Cache → ページの最適化 をクリック。
「ローカリゼーション設定」をクリック。
「リソースのローカライズ」がデフォルトでオフになっているので「オン」にして「保存」をクリック。これだけで完了です。
これでもう一度PageSpeed Insightsでスキャンしてみると、数値が改善していました。
この設定をすると、サイトによってGoogle Analyticsの計測ができなくなっている場合があります。
シークレットモードブラウザでサイトへアクセス → リアルタイムアクセスのカウントが反応しない、という事象が起きていないかを確認してください。
もし反応がなくなってしまった場合はLiteSpeed Cacheによる改善は中止し、
- 「リソースのローカライズ」をオフに戻して保存
- 「1. テーマを編集する場合の手順」を実行
という手順で対応し直してみてください。
3. Autoptimizeを使っている場合の手順
WordPress管理画面の 設定 → Autoptimize をクリック。
「JS、CSS & HTML」タブで、「JavaScriptコードの最適化」にチェックが入っていることを確認する。
もし今までAutoptimizeを利用していてこの項目にチェックが入っておらず「今から有効化する」という場合は、有効化→設定保存をした直後よりサイト表示に影響が出る可能性に注意してください。
「最適化」は聞こえが良い単語ですが、JavaScriptの構造や読み込み方が強制的に"なんか良い感じ"に変えられてしまうため、サイトによっては「クリックしてもアニメーションすべき要素でアニメーションしない」といった悪影響が出ます。
有効化後は、念のためPC/タブレット/スマホで表示が崩れたりクリックして動きがあるはずの箇所が動かないなどの不具合が起きていないかをチェックした方が吉です(気づかず放置すると最悪)。
次はAutoptimizeへの設定として貼り付けるURLを準備します。個人のWordPress環境によって異なります。
メモ：
以下3つの場合分けをしましたが、何のことかさっぱり分からんという方は3パターンのURLを全て試して効果があるURLを洗い出すと良いです。以下に記載しているURLであれば、関係ないラインを貼り付けたからと言ってサイトが壊れるようなエラーは起きません。
ただ、効果のあるURLが判明した後は、不要なURLは削除してください。
①：GoogleタグマネージャーにGoogleアナリティクスを紐づけて、タグマネージャーのタグをサイトに埋め込んでいる場合は以下URLをコピーする。
URLhttps://www.googletagmanager.com/gtm.js②：以下のようにスキャン結果で/analytics.jsとある場合は...
↓のURLをコピーする。
URLhttps://www.google-analytics.com/analytics.js
③：Googleアナリティクスのトラッキングコードを直接サイトに埋め込んでいる場合は以下をコピーする。
URLhttps://www.googletagmanager.com/gtag/js
上記いずれかをコピーしたら、「追加」タブをクリックし、「リクエストの事前読み込み(上級者向け)」欄へペーストします。
メモ：
上記赤枠下に書いてありますが、半角カンマで複数のURLを区切って記述することができます。
カンマ区切りでつなげる例）
https://www.googletagmanager.com/gtm.js,https://www.google-analytics.com/analytics.js
忘れずに「変更の保存」をクリック。
「JS、CSS & HTML」タブへ戻り、「変更の保存とキャッシュの削除」をクリックしてキャッシュを削除します。
これでもう一度PageSpeed Insightsでスキャンしてみると、数値が改善していました。
Googleタグマネージャーでアナリティクスタグを管理している場合
タグマネージャーを使ってGoogle Analyticsタグを管理している人は、タグマネージャー上の設定を変えるだけで改善できる可能性があります。
タグマネージャー？なにそれ使ってないけど...
という人は以降の項目は無視してください。
改善できるかチェック
Google Tag Manager ≫ からログイン。
ログインしたら、どのドメインに対する設定をするか選択します。
- 「タグ」をクリック
- 目のマークになっている場合、改善できる可能性が高いです！
改善するための手順
「ウィンドウの読み込み(目のマーク)」をクリックする。
「ページビュー」をクリックする。
「ウィンドウの読み込み」をクリック。
「保存」をクリック。
- ウィンドウの読み込み(ウィンドウマーク)になっていることを確認
- 「公開」をクリック
これで完了です。
PageSpeed Insightsで計測してみると、「第三者コードの影響を抑えてください」のGoogle Analytics項目がきれいに消え去っていました。
