LCP の問題: 2.5秒 超（モバイル）の修正方法
LCP の問題: 4秒 超（パソコン）
LCP の問題: 4秒 超（モバイル）
LCP の問題: 2.5秒 超（パソコン）
LCP の問題: 2.5秒 超（モバイル）
Google Search Consoleの「ウェブに関する主な指標」の以上の項目で「不良」または「改善が必要」と表示されている場合の修正方法です。
効果が高かった順に修正方法を紹介します。
1.画像を使わない
2.外部ファイルを読み込まない
3.トップページだけ早くする
1.画像を使わない
LCPの一番の原因は画像でした。ホームページの表示が全て完了するまでの時間。これがLCPです。いつまで経っても表示されないサイトではないことを証明する基準です。
ほんとうに必要な画像か考えます。このサイトはトップページにボタン風の画像を使って、スマホサイトでも目立つようにしていましたが、今はタイトルを大きくして文字だけにしています。
最終更新日にはアイコンを使っていましたが、日付の隣にupと書くだけで意味は分かります。twitterマークなども文字でいいです。ブログのアイコンも無くても問題ありません。
検索のときの虫眼鏡マークなどはあった方がいいですが、アイコン画像も「アイコン cssのみ」で検索すると画像を使わないcssだけで作ったアイコンが見つかりますので、それを使います。
画像だけ別サイトに置いて、そこへリンクするだけでもいいです。
画像を必要最小限しか使わないことでLCPは合格します。
2.外部ファイルを読み込まない
外部ファイルの読み込みも時間がかかります。
インターネットの回線スピードが速くなったので、スピードを気にせずにjQueryやjavascript、css、フォントファイル、アイコンファイルなどを始めに読み込むサイトが多くなりましたが、外部ファイルを読み込むほどLCPの時間が増えます。
cssは外部ファイルを使わず、必要なものだけhtmlに直接書きます。htmlの分量は増えますが、スピードは速くなります。
jQueryやjavascriptは使うページを条件で指定して使います。
表を使ったホームページで以前は jQueryのdataTablesという検索並び替えできる機能を使っていたので、3つの外部ファイルを読み込んでいました。
Google Blogger の場合は自動的にjavascriptが追加されます。
3.トップページだけ早くする
Google AdSense 広告も時間がかかります。画像だけでなく動画の場合もあるので、一番時間がかかるかもしれません。
Google AdSense 広告を読み込む時間をずらす遅延読み込みをすると、LCPが改善しますが、これは Google AdSense で規約違反になる可能性があります。
Google AdSense の修正は Google AdSense が紹介している方法以外は規約違反になります。
レスポンシブ広告コードを修正する方法
https://support.google.com/adsense/answer/9183363?hl=ja&ref_topic=9183242
Google AdSense が画面サイズによって広告の幅と高さを変える方法も紹介していますが、これは画面の幅が変わっても全く同じ内容を表示するホームページ用の説明です。
画面幅が広いPCだとサイドバーが出て、画面幅が狭いスマホだとサイドバーが出ないようにしているサイトでは、そのまま真似すると広告がはみ出るので規約違反になります。サイドバーの幅の分だけサイズが変わるので、自分で計算して設定しなければいけません。
また、縦長や横長の広告はサイズが大きく、読み込みに時間がかかります。サイドバーは幅が狭いと縦長の広告になります。横幅を350pxぐらいにしておくと、正方形の広告になり読み込み時間が改善されます。少し広めの幅にしておくと、自動的にその幅以下の広告が選ばれます。
今後も表示速度に関して Google の基準が厳しくなると思われるので、このサイトではとりあえず、トップページの Google AdSense の表示をしないようにしました。トップページの検索順位さえ落ちなければ、他のページにはトップページから行けるからです。
画面幅が狭い時だけcssで表示させないようにするのは許可されていますが、特定のページだけcssで表示させないようにするのは許可されていません。
htmlを直接変更して、Google AdSense が表示されないようにします。
Google AdSense のコードを貼り付けている場合は、htmlを直接変更します。
Google Blogger の場合はガジェットの追加で簡単に Google AdSense を追加できます。ガジェット自体を表示しないようにするには条件を追加します。
LCP の問題: 4秒 超（モバイル）
LCP の問題: 2.5秒 超（パソコン）
LCP の問題: 2.5秒 超（モバイル）
Google Search Consoleの「ウェブに関する主な指標」の以上の項目で「不良」または「改善が必要」と表示されている場合の修正方法です。
効果が高かった順に修正方法を紹介します。
1.画像を使わない
2.外部ファイルを読み込まない
3.トップページだけ早くする
1.画像を使わない
LCPの一番の原因は画像でした。ホームページの表示が全て完了するまでの時間。これがLCPです。いつまで経っても表示されないサイトではないことを証明する基準です。
ほんとうに必要な画像か考えます。このサイトはトップページにボタン風の画像を使って、スマホサイトでも目立つようにしていましたが、今はタイトルを大きくして文字だけにしています。
最終更新日にはアイコンを使っていましたが、日付の隣にupと書くだけで意味は分かります。twitterマークなども文字でいいです。ブログのアイコンも無くても問題ありません。
検索のときの虫眼鏡マークなどはあった方がいいですが、アイコン画像も「アイコン cssのみ」で検索すると画像を使わないcssだけで作ったアイコンが見つかりますので、それを使います。
画像だけ別サイトに置いて、そこへリンクするだけでもいいです。
画像を必要最小限しか使わないことでLCPは合格します。
2.外部ファイルを読み込まない
外部ファイルの読み込みも時間がかかります。
<link href='https://use.fontawesome.com/releases/v5.0.11/css/all.css' rel='stylesheet'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
<script>
などです。<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
<script>
インターネットの回線スピードが速くなったので、スピードを気にせずにjQueryやjavascript、css、フォントファイル、アイコンファイルなどを始めに読み込むサイトが多くなりましたが、外部ファイルを読み込むほどLCPの時間が増えます。
cssは外部ファイルを使わず、必要なものだけhtmlに直接書きます。htmlの分量は増えますが、スピードは速くなります。
jQueryやjavascriptは使うページを条件で指定して使います。
<b:if cond='data:view.isPost'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
</b:if>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
</b:if>
表を使ったホームページで以前は jQueryのdataTablesという検索並び替えできる機能を使っていたので、3つの外部ファイルを読み込んでいました。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<link href='//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'/>
<script src='//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js'/>
jQueryのfilterという機能を使えば検索ができると知って、現在は以下のものだけになりました。<link href='//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'/>
<script src='//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
このように、自分が使いたい機能だけに絞って外部ファイルを読み込む回数を減らします。また、最新版ほどファイルサイズが軽いので、最新の外部ファイルに入れ替えるだけでも効果があります。Google Blogger の場合は自動的にjavascriptが追加されます。
<b:script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
これはプロフィールやマイブログなどのガジェットを追加すると、自動的に追加されるもので、プロフィールやマイブログをHTMLガジェットで自作して、プロフィールやマイブログなどのガジェットをレイアウトから削除すると消えます。3.トップページだけ早くする
Google AdSense 広告も時間がかかります。画像だけでなく動画の場合もあるので、一番時間がかかるかもしれません。
Google AdSense 広告を読み込む時間をずらす遅延読み込みをすると、LCPが改善しますが、これは Google AdSense で規約違反になる可能性があります。
Google AdSense の修正は Google AdSense が紹介している方法以外は規約違反になります。
レスポンシブ広告コードを修正する方法
https://support.google.com/adsense/answer/9183363?hl=ja&ref_topic=9183242
Google AdSense が画面サイズによって広告の幅と高さを変える方法も紹介していますが、これは画面の幅が変わっても全く同じ内容を表示するホームページ用の説明です。
画面幅が広いPCだとサイドバーが出て、画面幅が狭いスマホだとサイドバーが出ないようにしているサイトでは、そのまま真似すると広告がはみ出るので規約違反になります。サイドバーの幅の分だけサイズが変わるので、自分で計算して設定しなければいけません。
また、縦長や横長の広告はサイズが大きく、読み込みに時間がかかります。サイドバーは幅が狭いと縦長の広告になります。横幅を350pxぐらいにしておくと、正方形の広告になり読み込み時間が改善されます。少し広めの幅にしておくと、自動的にその幅以下の広告が選ばれます。
今後も表示速度に関して Google の基準が厳しくなると思われるので、このサイトではとりあえず、トップページの Google AdSense の表示をしないようにしました。トップページの検索順位さえ落ちなければ、他のページにはトップページから行けるからです。
画面幅が狭い時だけcssで表示させないようにするのは許可されていますが、特定のページだけcssで表示させないようにするのは許可されていません。
htmlを直接変更して、Google AdSense が表示されないようにします。
Google AdSense のコードを貼り付けている場合は、htmlを直接変更します。
<b:if cond='!data:view.isHomepage'>
<div id='ad-1'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="horizontal"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</b:if>
<div id='ad-1'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="horizontal"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</b:if>
Google Blogger の場合はガジェットの追加で簡単に Google AdSense を追加できます。ガジェット自体を表示しないようにするには条件を追加します。
<b:widget id='AdSense1' locked='false' title='' type='AdSense' cond='!data:view.isHomepage'>
seo