Search Consoleエラー解決法「LCPの問題：2.5秒超（パソコン）」

この記事は、「LCPの問題：2.5秒超（パソコン）」を問題の確認、解析、改善、検証という4つのステップで解決した方法を、次のような人向けに当サイトの経験に基づいて解説しています。

この記事を参考にして、あなたのWebサイトのページ表示速度を改善、訪問者の利便性の向上に、是非、お役立てください。

「LCPの問題：2.5秒超（パソコン）」のエラー状況の確認

LCPの定義

LCPとはLargest Contentful Paintの略で、日本語では「最大コンテンツの描画」とされ、ユーザーが特定のウェブ・ページの表示をリクエストしてから、画像、動画、テキストなどデータの最も大きなコンテンツが描画されるまでの時間を意味しています。

LCP （「最大コンテンツの描画」）の時間が短いと、URLをクリックしてからウェブ・ページ表示までの反応が速いので、サクサクと軽快に動作するWebの使用感をユーザーに提供します。

Google Search ConsoleでのLCPのエラー状況確認

Googleアカウントのログイン・ネームとパスワードを使って「Google Search Console」にログインして、「ウェブに関する主な指標」をクリックします。

「ウェブに関する主な指標」は「モバイル」と「PC」に分かれています。問題が検出された「不良URL」または「改善が必要なURL」をチェックします。

今回の問題は「LCPの問題：2.5秒超（パソコン）」なので、「PC」内にある「レポートを開く」をクリックした後、問題の指摘レベルに応じて「不良」または「改善が必要」をクリックして、問題の内容詳細を確認します。

例えば、「改善が必要」で問題が検出されている場合、「詳細」の「ステータス」をクリックすることで、詳細を見ることができます（下図の例を参照）。

この例では、次のことが確認できました。

代表例であるWebページ(URL)のLCP値が2.5秒で、「改善が必要」から「良好」になるために2.5秒未満になる必要なので、0.x（零コンマ数）秒程度の改善が必要ということがわかりました。

Webサイトには、代表例のWebページ以外に類似したURLもあり、また、キャッシュ（Cache）などのWebサイトの状況によって測定値にバラツキが生じるので、LCP値がWebサイト内のすべてのURLで2.5秒未満にななるため、できれば0.5～1.0秒くらい余裕がある状態を目標に改善を行いましょう。

「LCPの問題：2.5秒超（パソコン）」のエラー原因の解析

LCP問題の解析に使えるツール

ウェブのページ・スピードを測定/解析するツールとして、次の2つをご紹介します。

「PageSpeed Insights」の概要

「PageSpeed Insights」はGoogleが提供するオンラインの無償Webツールで、Webサイトのパフォーマンスのスコアや改善できる項目を提示してくれ、「Google Chrome」をはじめとする各種インターネット・ブラウザで動作します。「Google Search Console」で指摘を受けた問題の状況を理解したり、改善の検証に利用できます。

「PageSpeed Insights」の使用法

「PageSpeed Insights」（下線部をクリック）を立ち上げます。

「GTMatrix」の概要

「GTMatrix」は、ウェブサイトの表示スピードの指標となるGoogleの「PageSpeed」とYahooの「YSlow」に基づいたスコアや高速化のための提案してくれるオンラインツールで、無償で利用可能です（GTmetrix Proは有償）。ページのサイズ、リクエスト数など、「PageSpeed Insights」と違った視点で改善ポイントがわかるので、補助的に利用しています。

「GTMatrix」の使用法

「GTmetrix」(下線部をクリック）を立ち上げます。

LCPの主要改善ポイント

「PageSpeed Insights」による改善ポイント

「PageSpeed Insights」で提案された主な「改善できる項目」は次の通り。

「レンダリングを妨げるリソース」の内容

「PageSpeed Insignts」で次のように「レンダリングを妨げるリソースの除外」が提案されました。

この例では

• https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1

というJavaScript（*.js）がレンダリング（データから画像・映像・音声などを生成する事）を妨げているので、このURLのJavaScriptを読み込む順序を変更する事を提案されているのです。

この問題を解決すると、0.28秒の改善が期待できるので、「LCPの問題：2.5秒超（パソコン）」を解決して、合格できると考えられますが、余裕を見てさらなる改善のため、次の項目の改善にもチャレンジしましょう。

「使用していないJavaScriptの削除」の内容

「PageSpeed Insight」で「使用していないJavaScriptの削除」として提案されたURLは次の2種類です。

• WordPressプラグイン「Contact Form 7」のスクリプトのダウンロードに関するもの
• Google Adsense広告に関連するもの

固定ページの「お問い合わせ」「Contact」を作るために「Contact Form7」を利用していますが、その他の記事には使っていません。ところが、「お問い合わせ」「Contact」以外のページでも「Contact Form7」のスクリプトをダウンロードしていることを「使用していないJavaScriptの削除」で指摘されました。

次に、「使用していないJavaScriptの削除」で指摘されたURLのドメインを見てみると、

• cse.google.com
• pagead2.googlesyndication.com

など、検索や広告などGoogleに関連するURLを占めています。

Google AdsenseをはじめとするGoogleサービスを使うのに、Google関連Webからのスクリプトを使わないわけにはいきませんが、削除できるスクリプトから改善していきましょう。

Google Adsenseの設定で自動広告機能を使って、Webページのスペースに応じてサイズが変わるレスポンシブなディスプレイ広告（バナー広告）を指定していると、いつ、どのURLから、どのサイズが、どこに表示されるのかスクリプトを特定するのが困難です。

そこで、Google Adsenseの自動広告を中止して、ファースト・ビュウ・ページ（訪問者がWebページを開いたときにディスプレイで表示される範囲）の外になるように広告表示位置を固定にします。

ファースト・ビュウ・ページの外に広告表示位置を固定にして、そのうえで遅延読み込み（Lazy Load）機能を使うことにより、ページ表示速度を上げることができるのです。

また、この対処法はディスプレイ広告（バナー広告）のサイズが配信内容によって変わることによって影響が出る「ウェブに関する主な指標」「累積レイアウト変更」の改善も期待できます。

「LCPの問題：2.5秒超（パソコン）」のエラー改善の行動

「レンダリングを妨げるリソースの除外」の方法

「レンダリングを妨げるリソースの除外」は、データの読み込みや実行の順番を変更する必要があり、次のようなプログラムのコマンドを使う方法があります。

それぞれ「preload」「async」「defer」に対応して、次の3つのコードをテンプレートとしてコピーして貼り付け、「https://example.com/exampl.js」を「レンダリングを妨げるリソースの除外」で指摘されているURLと置き換えることができます。

<link rel="preload" href="https://example.com/example.js" as="script">

<script src="https://example.com/example.js" async></script>

<script src="https://example.com/example.js" defer></script>"script

上のJavaScriptの例では”script”を使っていますが、対象URLの内容によって、”script”の部分が次のように対応して変更する必要があります。

「JQuery」とは？

「レンダリングを妨げるリソースの除外」で指摘されている「jquery.min.js」（jsはJavaScriptの意）はWordPressでテーマやプラグインなどに広く使われているJavaScript ライブラリの「JQuery」の１つで、末尾の「3.3.1」は「jquery.min.js」のバージョンを示しています。

「少ない記述で、もっと多くのことをする」をキャッチ・コピーとする「JQuery」を利用することで、ブラウザに依存しないように同じJavaScriptプログラムで動作が可能になります。

「JQuery」への対処

テーマやプラグインなどのWordPress関連プログラムで「JQuesry」を使ったJavaScriptプログラムを正常に動作させるために、このJavaScriptライブラリを使ったプログラムより先に「jquery.min.js」を読み込む必要があります。

まず最初に考えられる対処として、”preload”を使って、先にプログラムを読み込ませてみましょう。

「JQuery」以外への対処

JQuery以外のJavaScriptは、他のプログラムと並行させる非同期化(“async”)で表示スピードを向上させることができます。

“async”を使って「PageSpeed Insight」で検討結果を見て改善が見られない場合は、”defer”を試してみましょう。

「レンダリングを妨げるリソースの除外」のためのコード入力

「Cocoon設定」でのコード入力

当サイトはWordPressのテーマ「Cocoon」（子テーマをメインとして、親テーマと両方）を使用しており、WordPress管理画面「Cocoon設定」の「アクセス解析・認証」でヘッド用コードを入力することができるので、これを利用します。

1. コードをコピーして、目的の場所に貼り付けます。
2. 「https://example.com/example.js」を「レンダリングを妨げるリソースの除外」で指摘されたURLに置き換えます。
3. 「Cocoon設定」を変更した場合、「変更をまとめて保存」をクリックして、変更内容を有効にします。

「JQuery」以外のJavaScriptに対応する「funtion.php」でのコード入力

次のコードはその”async”を使用したプログラム例で、使用しているテーマ（例えば、Cocoonの子テーマ）の「function.php」に挿入（コピーして貼り付け）するとによって、表示スピードを向上が期待できます。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
    return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

「使用していないJavaScriptの削除」の方法

WordPressプラグイン「Asset ClearnUp」による不要スクリプトのロード中止

WordPressプラグイン「Contact Form7」のスクリプトが、固定ページの「お問い合わせ」「Contact」以外のWebページでロードされないようにするため、WordPressプラグイン「Asset CleanUp: Page Speed Booster」（英語版、無償機能のみ）を利用します。

まず、WordPressにプラグイン「Asset CleanUp」をインストールします。

次に、「Asset CleanUp」の基本設定をします。

「Asset CleanUp」で「Contact Form 7」などWordPressのプラグインの不要なスクリプトのロードを中止します。

WordPressのテーマやプラグインの不要なスクリプトを中止するのに、次の2つの方法があります。

当サイトの場合、「Contact Form 7」を使用しているのは固定ページの「お問い合わせ」と「Contact」の2つだけです。ロードする必要がないページが多いので、前者（1.の方法）を使います。

これで「Contact Form 7」の不要スクリプトのロード中止と例外処理の設定の終了です。

確認のため、「お問い合わせ」と「Contact」が意図通り動作しているかをチェックしましょう。

「Conatct Form 7」以外のプラグインも「Asset CleanUp」を使って同様な方法で不要なスクリプトのロードに制限をかけて、Webページの表示を早くすることができます。

Google Adsense広告への対処

「Google Adsense」にGoogleアカウントのユーザー・ネームとパスワードを使って ログインして、自動広告を中止します。そして、広告表示位置をファースト・ビュウ・ページの範囲外になるように固定します。

自動広告を「OFF」にするには、次の操作を行います。

広告位置を希望する位置に固定にするのに、WordPressの管理画面>「外観」>「ウィジェット」から「広告」「広告（PC用）」「広告（モバイル用）」を使います。

「Google Adsense」にログインして、「広告」>「サマリー」と順にクリックしていき、「広告ユニットごと」のタブをクリックして表示させます。

「ディスプレイ広告」でタイプの違う「スクウェア」「横長タイプ」「縦長タイプ」で広告ユニット名をつけて、「広告サイズ」を「レスポンシブ」の条件で3つの広告を作成します。それぞれに広告コードが生成されるので、それをWordPressの管理画面>「外観」>「ウィジェット」にある「広告」「広告（PC用）」「広告（モバイル用）」に貼り付けて、ファースト・ビュウ・ページの範囲外になるようなWebページの位置に配置します。

配置が決まったら、「保存」をクリックします。

確認のため、Google Adsenseのディスプレイ広告が意図通り動作しているかをチェックしましょう。

「LCPの問題：2.5秒超（パソコン）」のエラー改善の検証

ウェブのページ・スピードを改善する行動の効果をツールを使って確認します。

「PageSpeed Insights」による改善の検証

「レンダリングを妨げるリソースの除外」が「改善できる項目」の中から消えて、「合格した監査」に入っていることが確認できれば、OKです。

「使用していないJavaScriptの削除」については、改善を指摘された項目数が減っていれば、今回は良しとして、今後も必要に応じて完全していきましょう。

GTetrixによる改善の検証

Google Search Consoleでの修正の検証

「PageSpeed Insights」でページ表示スピードが改善されていると確信が得られたので、「Google Search Console」を通してGoogleに修正の検証を依頼します。

「Google Search Console」にログインして、「ウェブに関する主な指標」の「PC」で問題検出されている「不良URL」または「改善が必要なURL」クリックします。

「レポートを開く」をクリックして、次に問題検出されている「不良」または「改善が必要」をクリックして、問題内容の詳細を確認します。

「修正を検証」をクリックします。

これでGoogleへの修正検証の依頼ができました。

修正検証の依頼が終了すると、「検証：開始」という表示がみられます。検証の結果、問題の検出がなくなると、問題の対象URL数が「０」（ゼロ）になります。

問題の対象URL数「０」（ゼロ）の日が続くことで問題が解決されていることがわかり、当サイトの場合、問題URLの検出なし連続12日目で「検証：合格」の認定が得られました。

まとめ

この記事では「Google Search Console」「ウェブに関する主な指標」で指摘された「LCPの問題：2.5秒超（パソコン）」に対処するため、問題の確認、解析、改善、検証という4つのステップで解決しました。

まず、「Google Search Console」で問題の状況を確認して、「PageSpeed Insight」というツールを使って問題を解析、その解析結果から提案された改善内容で「レンダリングを妨げるリソースの除外」「使用していないJavaScriptの除外」に特化して、「preload」や「async」といったコマンドを使ったプログラム、および、 Google Adsense広告への対処、WordPressプラグイン「Asset ClearnUp」を使う方法で不要なスクリプトのロードをやめて、WebページのパフォーマンスをGoogleから合格を認定されるまで改善した方法を解説しました。

あなたのWebサイトのパフォーマンスの継続的な改善に、この記事がお役立てるとうれしく思います。