第三者コードの影響を抑えてください/Google Analytics項目を改善【WordPress】

- SEO対策 -
2020.09.15
ブログ・SEO対策

ふとPageSpeed Insightsで自分のブログをスキャンしてみたところ、Google Analytics関連のコードだけひときわ目立ってページ読み込みをブロックしているという診断結果が出たのが気になりました。

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

赤くなって怒られる部分がここだけだったので意地でも改善したくなり、試行錯誤した結果わりと簡単に解消したのでメモしておきます。

メモ:

Google Analytics計測用のコードをどのようにサイトに設置しているか(プラグインを使っているかGoogleタグマネージャーを使っているか等)で効果のあるなしが出てくると思います。

ちなみに本施策実行後にどうなったかというと、「診断」の項目から「第三者コードの影響を抑えてください」が消えて

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

「合格した監査」の項目に分類されるようになり、数値が576msから35msへ改善されました。

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

これにともなって、スピードスコアも 90 から 97〜99 へアップしました。

実施前▼第三者コードの影響を抑えてくださいを改善

実施後▼
第三者コードの影響を抑えてくださいを改善

施策実施の方法として、以下3つをご紹介。

  1. テーマファイルを編集する方法
  2. プラグイン「LiteSpeed Cache」を利用する方法
  3. プラグイン「Autoptimize」を利用する方法

LiteSpeed Cache、Autoptimize、どちらのプラグインも使用するWordPressテーマやカスタマイズ状況によってはインストール→有効化する時点でサイト表示が崩れるなど悪影響が出る可能性があるデリケートなプラグインです。

すでに現時点で利用している方のみ参考にしてください。PageSpeed Insightsの「第三者コードの影響を抑えてください」項目だけの改善を目的としてインストールはおすすめしません

どちらのプラグインもインストールしていない場合は①のテーマ編集をする方法をおすすめします。

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でスキャンしてみると、数値が改善していました。

↑TOP