【検証】万策尽きたサイトの表示速度問題ーGoogleの生成AI(AIモード&Gemini)は救世主になるのか? | まなまなライフ
サイト内の外部リンクには、リンク先でのサービスの利用や商品の購入により、当サイトに報酬が入る「アフィリエイト広告リンク」が含まれています。詳しくはプライバシーポリシーをご覧ください。
PR

【検証】万策尽きたサイトの表示速度問題ーGoogleの生成AI(AIモード&Gemini)は救世主になるのか?

Google生成AI

昨年の秋ごろからGoogle Chromeの検索ウィンドウに「AIモード」、PC画面の右上端に「Geminiに相談」というボタンを見かけるようになりました。

しかも、普通に検索しただけなのに、検索結果の一番上には「AIによる概要」、その下の「もっと見る」ボタンを押すと、チャットボックスが現れて、質問までできるようになっています。

これってGoogleには生成AIがデフォルトで組み込まれてるってこと?
今まで普通の検索しかしたことがなかったけど、もしかしてここに質問を書き込んだら、調べても調べても答えが見つからなかったサイトの表示速度問題の解決策が見つかるかも?

ということで今回は、Googleの生成AI(AIモード・Gemini)に関する基本情報と利用する際の注意点に加え、万策尽きていたサイトの表示速度問題の解決にGoogleの生成AIがどれだけ役立つのか検証した結果を紹介します。

こんな質問にお答えします。
  • GoogleのAI機能とは?
  • Googleの「AIモード」とは?
    • 通常の検索との違いは?
    • 通常の検索よりも「AIモード」を使うメリットは?
  • 「Geminiに相談」とは?
    • 「AIモード」との違いは?
    • 「AIモード」よりも「Geminiに相談」を使うメリットは?
  • Googleの生成AIにサイトの表示速度の問題を相談したら?
    • Googleサーチコンソールのページエクスペリエンスは改善されるの?
    • PageSpeed Insightsのウエブに関する主な指標の評価やスコアは改善されるの?
  • 生成AIを利用する際の注意点とは?
  • ローダーを導入すれば、さらに表示速度やユーザーエクスペリエンスは上がるの?
スポンサーリンク
スポンサーリンク

GoogleのAI機能とは?

Googleには、検索エンジンやブラウザ(Chrome)、GmailやGoogleドキュメントといったWorkspace環境にもチャット形式のAI機能(AIモード・Gemini)がデフォルトで組み込まれています。

インターネット接続があれば誰でも無料で利用できますが、Googleのアカウントがない(またはログインしていない)とチャットの内容が保存されず、いったんブラウザを閉じたり、ページを更新してしまうと以前のチャットの続きから対話を再開することはできません。

Googleの「AIモード」とは?

Googleの「AIモード」とは、生成AI(Gemini)が①ユーザーの質問・要望(検索内容)を理解し、②複数の参照元から得た情報を自動的にまとめて提示してくれる機能です。

検索ウィンドウ内の「AIモード」ボタンを押すか、検索結果画面の「AIモード」タブを選択すると、AI中心のチャット形式画面に切り替わります。

通常の検索との違い

AIモード通常の検索
検索方法チャットボックスに文章(質問)を入力検索ウィンドウにキーワードを入力
検索結果情報源付きの回答をAIが生成・提示
関連するリンクをリストアップ
補助的に「AIによる概要」も表示

通常の検索よりもAIモード」を利用するメリット

  • 時短:関連リンクを1つ1つ開いて情報を探す手間が省ける
  • 画面の切り替えなしで、知りたいことを深く掘り下げることが可能
  • マルチモーダル対応:テキスト・画像・音声・動画・プログラムコードなど、複数の異なる種類のデータをAIが同時に処理・統合することが可能

「Geminiに相談」とは?

「Geminiに相談」も、AIモード同様、Googleの生成AI(Gemini)をベースにしたチャット形式のAIアシスタントです。

タブの端に現れたボタンを押すと、画面の右側にサイドパネルとしてチャットボックスが表示されます。また、「https://gemini.google.com/ (Webブラウザ版アプリ)」やスマホの「Geminiアプリ」から、独立した専用のチャット画面も利用できます。

「Geminiに相談」と「AIモード」の違い

Geminiに相談AIモード
役割思考のアシスト・提案型リサーチのアシスト・検索特化型
得意分野思考やデータの整理
文章の校正や創作の補助
お悩み相談
情報の確認・収集・比較作業
リアルタイム情報の検索

AIモード」よりも「Geminiに相談」を利用するメリット

  • ゼロから新しいコンテンツが生み出せる
  • 対話の柔軟性:抽象的で曖昧な表現の意図をくみ取ったり、会話の途中でも質問・要望の大幅変更や軌道修正が可能
  • 誰にも言えないような悩みを相談できる
  • 「Gemini Live」を使うと、スマホからリアルタイムで音声による相談等も可能
スポンサーリンク

サイトの表示速度問題をGoogleの生成AIに相談してみた【検証1】

私が使用しているサーバー(ConoHa WING)やWordPressテーマ(Cocoon)では、サイト表示の高速化設定が手軽に利用できます。

Googleアドセンスの自動広告を導入した後も、いくつか追加の対策を施す必要はありましたが、モバイルもPCも

  • Googleサーチコンソール
    • ページエクスペリエンス:良好なURL 100%
  • PageSpeed Insights
    • ウエブに関する主な指標の評価:合格
    • スコア:70点代前半

に達していました。

ところが、さらにThe Moneytizerというインプレッション型の広告配信サービスを入れた途端、モバイルだけ

  • Googleサーチコンソール
    • ページエクスペリエンス:改善が必要なURL 100%
  • PageSpeed Insights
    • ウエブに関する主な指標の評価:不合格
    • スコア:40点代前半

になってしまいました。

原因は明らかに表示速度の低下です。

そこで、PageSpeed Insightsの診断で速度低下を招いている要素を確認しましたが、「レンダリングをブロックしているリクエスト」「メインスレッド処理の最少化」と言われても、私にはまるでちんぷんかんぷんです。

「まずはそこから理解しないと」と、役に立ちそうな記事を読みまくっても、「何の何をどこにどうすれば問題が解決するのか」をすべて詳細かつ具体的に述べた記事が見つかりません。

実際「もうこれ以上調べても無駄かも」としばらく問題を棚上げにしていましたが、表示速度の中でも「PageSpeed Insights INP」について久々に検索したところ、「AIによる概要」が目に入り、

  • 「考えられる原因」
  • 「具体的な改善策」

のリストに加え、「もっと見る」の先に、「ボトルネックをより正確に特定するため、もしよろしければ以下の点について教えていただけますか?」という質問とチャットボックスが現れました。

AIに提示したプロンプトとAIからのアドバイスの要点

  • 現在お使いのサイト作成ツール(WordPress、Wix、HTMLなど)
  • ページ内に 広告(AdSenseなど) や 外部チャットツール、計測ツール を導入しているか?

WordPress Cocoonテーマ Googleアドセンス(自動広告)・Googleアナリティクス・Googleタグ導入

Cocoon×Google環境でのINP改善手順

  1. アドセンスの「自動広告」の設定を見直す
  2. Google系スクリプトをタグマネージャー(GTM)に一本化する
  3. Cocoon標準の「JavaScript遅延読み込み」を活用する
  4. アドセンス・GTMスクリプト自体の遅延読み込み

1・2・3は対応済み、4で提案されたプラグインはCocoonと競合するため使用不可。

プラグインを使わずに、Cocoonと100%競合しない形でアドセンスとGTMを遅延読み込み(スクロール等の操作後に実行)させる代替案

  1. Cocoonの「フッター用コード」に自作の遅延JSを貼る(推奨・確実)
  2. アドセンス広告をGTM(タグマネージャー)側で「遅延発火」させる

Aは対応済み。

残された2つの原因と最終対策

  • アドセンス広告の「表示時のガタつき(CLS)」がINPを悪化させているので、広告が表示されるエリア(ウィジェットなど)を、あらかじめCSSで「高さ固定」にして空白を確保
  • GTM(タグマネージャー)の中にある「別のタグ」が重いので、GTMの管理画面を開き、本当に必要なタグだけに絞り込む

最終確認:プラグインの隠れたJavaScript

原因は「広告が表示される瞬間の画面のズレ(対策1)」か、「GTM内部のサードパーティタグ(対策2)」のどちらかに絞られている可能性が極めて高い

実は、ここまでのチャットの内容は、初めてAIモードで質問したときのチャット履歴が後半4分の3以上消えてしまっていたため、残っていた前半部分から改めて質問し直した時のものです。

提案された改善策の大部分は前回と同じでしたが、Googleタグマネジャーに関してだけ提案が変わっていました。

以前質問した際、Googleタグマネジャーの配信トリガーを「ウィンドウの読み込み」に変更するといいと言われたが、「タイマー」にしたほうがいいのか?

INP(操作応答性)の改善において、圧倒的に効果が高いのは「タイマー(またはユーザー操作による遅延)」

  • 「ウィンドウの読み込み」がINP改善に弱い理由
  • 「タイマー(遅延)」がINP改善に強い理由
  • 今後のベストな設定方針

GTM(タグマネージャー)側での「遅延発火」はまだ導入していないが、既に導入済みのウィンドウの読み込みと両方導入しても問題はないか?

「ウィンドウの読み込み」と「タイマー(遅延発火)」を両方導入してもシステム上のエラー(問題)は起きない。ただし、INPを改善する目的であれば「ウィンドウの読み込み」は完全に外し、タイマー(遅延発火)1本に絞るべき。

  • 両方導入した場合の挙動と注意点
  • 今後の正しい設定手順

その後、指示に従ってGoogleタグマネジャーのトリガーを変更したら、「今後(1日前後と1〜2週間後)の数値の確認」と、「徹底的に対策を重ねてこられたので、良い結果が出ることを願っております!」という応援メッセージがありました。

【結果】PageSpeed Insights・Googleサーチコンソールの評価は改善されたのか?

PageSpeed Insightsの「実際のユーザー環境(フィールドデータ)」は、過去28日間のリアルなユーザーのデータを集計しているため、設定を変更してもすぐにはグラフや数値が切り替わらないようです。

けれど、改善策の導入直後でも

  • PageSpeed Insights
    • ウエブに関する主な指標の評価:合格
    • スコア:50点代後半
  • Googleサーチコンソール
    • ページエクスペリエンス:良好なURL 100%

になりました。

この改善につながったのは、

  • gtag.jsコードをヘッダーからフッターに移動(消えてしまった1回目のチャット内で提案された改善策)
  • Googleタグマネジャーのトリガーを「ウィンドウの読み込み」から「タイマー(3秒)」に変更(1回目に提案され、対応済みだった改善策から2回目に提案された改善策に変更)

の2つです。

実際に使って判明した「Google生成AI」の強みと限界

きめ細やかな説明とアシスト

私の質問に対する回答(改善策)の中にはcssやhtml・jsコードの追加やツールの設定変更等が含まれていましたが、具体的に何を(コード等)がコピペすればいいだけの状態で提示され、どこにどう追加・変更すればいいかがステップバイステップで説明されていました

加えて、ステップの途中で行き詰ることがあっても、その旨を伝えると、まるでプロが横にいて同じ画面を見ているかのように、1つずつ問題を解決し、作業が完遂できるようアシストしてもらえました。

謙虚で褒め上手

「提案された改善策はすでに対応済み」と言えば、「素晴らしいです」「非常にハイレベルな対策をすでに網羅されていますね」

説明が間違っていたり、「うまくいかない」と伝えれば、「大変失礼いたしました!」「私の勘違いで混乱させてしまい申し訳ありません。」「ご指摘ありがとうございます!」

作業が完了すれば、「本当にお疲れ様でした!」「他に不明な点等はございませんか?」

「ご主人様!」と呼ばれないのが不思議なくらい持ち上げられて、気分よく作業がはかどります。

友人によると、ChatGPTは自分が間違っていても謝らないから時々イラついてしまうとか。

AIが提案してきたコードに「このコードがあるのはおかしいですよ。本当に必要ですか?」と聞いたら、「不要です。これがあるのが不具合の原因かもしれません」と開き直られたと言ってました。

無料プランの制限

実はGoogleのAI機能には有料プランもあり、有料プランに入っていないと、1日の利用回数や1回のチャットの長さ(入力・出力)に制限があります

この利用制限に引っかかったり、ときにはブラウザの不具合で、チャットの履歴が部分的にしか保存されないことがあるため、重要なコンテンツはコピーしておくのがおすすめです。

プロンプト(質問文)が変われば、回答が変わる

自分では同じ質問をしたつもりでも、プロンプトが少し違うだけで回答が変わります。

たとえ1度のチャットで満足できる回答が得られたとしても、時間を置いたのち、改めて同じ質問をすると、前回にはなかった別の回答(選択肢)が得られるかもしれません。

また、プロンプトが具体的かつ詳細であればあるほど、より精度の高い回答を引き出すことができます。

生成AIをサイトの運用・運営に利用する際の一般的な注意点

Googleの生成AIに限らず、生成AIをサイトの運用・運営に利用する際は、いくつか注意すべき点があります。

ハルシネーション(誤情報・虚偽)の発生

残念ながら、AIはハルシネーション(誤情報・虚偽)を生成することがあります。出力された回答を鵜呑みにするのではなく、必ず信頼できる情報源で事実確認をするようにしましょう。

情報漏洩リスク

チャットに入力した内容は生成AIサービスの向上のために学習データとして利用されることがあります。そのため、個人情報(氏名、住所、アカウントIDなど)の入力は避けることが推奨されています。

著作権などの権利侵害

AIが生成したコンテンツをそのまま使用すると、著作権侵害になるリスクがあります。既存の著作物に酷似することがないように、AIが提示したコンテンツはあくまでも参考資料と捉え、オリジナルのコンテンツを創作することが大切です。

時代はSEOからAEOへ

サイトを運営・運用するにあたって、以前は自分(自社)のコンテンツ(ページ)が検索結果の上位に表示されること、クリックを獲得すること、その結果サイトへの訪問者を増やすこと(SEO:検索エンジン最適化)が非常に重要でした。

けれど、今は通常検索でも、知りたいことを簡潔にまとめた「AIによる概要」が検索結果の最上段にくるため、下手をすると、サイトへの流入がそこで止まってしまう可能性があります。

AI時代で勝ち残るには、自分(自社)のコンテンツ(ページ)がその信頼できる情報源として選ばれること(AEO:回答エンジン最適化)が最重要です。

ローダーを導入すれば、PageSpeed Insightsのスコアやユーザーエクスペリエンスはさらに上がるのか?【検証2】

サイトの表示速度が遅いことのデメリットの1つにユーザーの離脱があります。

ローディング画面を付けたら、ユーザーにとっては待機時間が気にならなくなって、離脱も減るんじゃない?最初に出てくる画像がローディング画像になるからLCPの数値が改善されるだろうし…。

そう考えて、今後は「ローダーの導入が表示速度の改善にどう影響を与えるか」質問してみました。

ローダーを導入すると、JavaScriptや画像が追加されることでLCP(最大コンテンツ表示時間)が悪化し、PageSpeed Insightsのスコアやユーザーエクスペリエンスを低下させるリスクが高いです。
ただし、導入の目的がユーザーの離脱を防ぐためであれば、待機時間のイライラが減る分、効果はあります。その場合、ローダー自体を軽くし、コンテンツの読み込み完了と同時にスムーズに非表示にする設計が必要です。

再確認のためにプロンプトを少し変えて2度質問しましたが、回答はほぼ同じでした。

う~ん、今のスコアじゃ、危険は冒せないなぁ。せっかくボールがゆっくりと上下にジャンプするアニメーションのコードを見つけたのに、一番使った行けないやつじゃん。残念!

最後に

今回は

  • Googleの生成AI(AIモード・Gemini)に関する基本情報
  • サイトの運用・運営に利用する際の注意点
  • サイトの表示速度問題の解決にGoogleの生成AIがどれだけ役立つのか検証した結果

を紹介しました。

生成AIには人間には太刀打ちできない情報収集能力があり、日々膨大なデータを蓄積し続けています。

人間ではないからこその弱みをカバーしつつ、ぜひサイトの運営・運用における「万策尽きた」問題の解決にお役立てください。

タイトルとURLをコピーしました