SEO講座
Core Web Vitalsの対策① LCPの改善方法
Core Web Vitals(コア ウェブ バイタル)の対策
SEO担当者であれば、2021年5月からSEOの大きな指標になった「Core Web Vitals(コア ウェブ バイタル)」に現在奮闘されている方も多いのではないでしょうか。
今回は、Google検索の結果に大きな影響を及ぼすCore Web Vitalsの対策&改善方法を説明していきますゞ
コア ウェブ バイタルについては、以前の記事を参照してね。
Core Web Vitalsについての記事 ▶
Core Web Vitalsが重要な理由
Core Web Vitalsはユーザーの行動やSEOに影響を及ぼすものです。
ページ読込速度が遅かったり、誤操作を招く意図しない動き等は、ユーザーに不快感を与えてしまい簡単に離脱されてしまいます。
Core Web Vitalsが良好であれば、ストレスを感じさせない=サイトの滞在時間やコンバージョン率の向上に繋がります。
GoogleのSEO評価はCore Web Vitalsよりも、まずはコンテンツ自体の価値を重視します。
そのためCore Web Vitalsが優れているからといって、検索結果で上位に表示されるわけではありません。
乱暴な言い方をすると、Core Web Vitalsの優先順位は高くないとも言えます。
しかーーーし!
他の要素で均衡している場合は、順位決定に大きく作用するのも確かです。
(Googleさんが明確にアナウンスしています)
だから優良な情報や内容(コンテンツ)を提供するだけでなく、Core Web Vitalsを改善することは、SEOにおいて重要になってきます!
Core Web Vitalsの状況を確認する方法
1つ目の確認方法は、「Google Search Console」で問題があるページを調べる方法です。
管理画面左の「ページエクスペリエンス」の「ウェブに関する主な指標」を開きます。
モバイルとPCの両方で、「不良URL」「改善が必要なURL」「良好URL」のステータスがグラフで見れますので、「レポートを開く」をクリックすると下記のように詳細が見れます。
LCP・FID・CLSに問題がある場合は、改善が必要なページのURLをレポートから見ることが出来ます。
PageSpeed Insightsで詳細を確認する
前回のSEO講座で説明させて頂いた「PageSpeed Insights」を使うと、問題の詳細を確認することができます。
Google Search Consoleに表示された問題のURLをクリックすれば、右側に「例の詳細」が表示されますが、その上部に「PageSpeed Insights」へのリンクもありますので、そこから遷移するとスムーズに確認できます!
PageSpeed Insightsに遷移して、「改善できる項目」や「診断」に表示された項目をクリックすると、具体的な問題点と改善策を確認することが出来ます。
問題点と改善策を確認を確認できれば、次は改善の実行です。
LCP(ページの表示速度)を改善する方法
LCP(Largest Contentful Paint)を簡単に言うと、「ページの表示速度を測る指標」です。
主な原因となるのは画像です。
ほとんどの場合、画像の読み込み速度を短縮することが、LCPの改善に繋がります。
具体的な改善方法は下記になります。
画像を圧縮してファイルを軽くすることで読み込みが速くなります。
弊社では、パンダ圧縮やワニ圧縮と言ってますが、下記サイトのツールを使うことで簡単に画像を圧縮することができます。
■パンダ圧縮
https://tinypng.com/
■ワニ圧縮
https://imagecompressor.com/ja/
② 適切な画像フォーマットを選ぶ
画像ごとに最適なフォーマットを選択することも有効な方法です。
一般的な画像フォーマットは、「GIF」「JPEG」「PNG」の3種類ですが、それぞれの長所を把握してサイト内に入れれば読み込み速度改善に繋がります。
GIF画像を使うことは最近は減ってきましたが、使用出来る色が256色に限られる分、データサイズが軽くGIFアニメが使える点と、背景を透明にすることが出来るのは使い勝手がいいです。
JPEGは、写真に適したファイル形式です。写真をキレイに見せたい時は、JPEGの使用がおすすめです。
PNGは、イラスト等に最適なファイル形式です。
GIFと同じく背景を透明にすることが出来ます。(JPEGは出来ません)
256色しか使用できないpng-8と、フルカラーのpng-24の2種類の形式があります。
③ SVGや次世代フォーマットの画像を利用する
ロゴやテキストを画像にして使いたい時などは、SVGファイルを利用するのも有効な方法です!
SVGファイルの利点は、ベクター形式のデータのため拡大しても画像が荒れない点です。
しかし複雑な表現をする画像には不向きなため、ロゴやテキスト画像等での使用がおすすめです。
webPやAPNGなどの次世代フォーマットの画像ファイルも、現在ではほとんどのブラウザに対応してきたので、それを使うのも今後は有効な手段になってくると思います。
着いていくのが大変だ~。