自分のサイトのCore Web Vitalsの問題点を確認する方法

SEO

今回は、自身のサイトのCore Web Vitals(コアウェブバイタル)のLCPとCLSの評価を確認して具体的な問題点を確認する方法を紹介します。

コアウェブバイタルについて詳しくは以下の記事をお読み下さい。

コアウェブバイタルの問題点の確認

コアウェブバイタルの問題点を確認するにはChromeのデベロッパーツールを使用します。

右クリック検証を押してデベロッパーツールを開いたらPerformanceのタブをクリックします。
すると下記の様な画面が出てくるのでリロードボタンを押します。

すると下記の様なパフォーマンスデータを参照できます。
そこに「LCP」とのボタンがあるのでクリックするとそれがどの要素か確認出来ます。

この場合はタイトルで使っている「h1#sitename」の要素がLCPに関わっている事が確認出来ます。

※ただ解決策までは導く事が出来ないので、この要素がどの様に問題に関与しているかは推定しながら改修していく必要があります。

ページスピードインサイドで問題を確認

コアウェブバイタルが発表されて間もなくアップデートしたPageSpeed InsightsではLCPとCLSの関連の要素をレポートします。

LCPとCLSに問題を検出するとレポートの 「診断」に「Largest Contentful Paint element 」「Avoid large layout shifts 」が表示されます。

「Largest Contentful Paint element 」がLCP
「Avoid large layout shifts 」がCLSに関係する要素です。

※こちらもあくまで要素の確認のみなので解決策まではわかりません。なので自身で推測しながら改修していきます。


以上が「自分のサイトのCore Web Vitalsの問題点を確認する方法」でした。

2020年7月1日SEOKnow-How,Reference,SEO対策

Posted by KT