Core Web Vitals（コア ウェブ バイタル）が2021年5月より導入されることが発表されました。
Core Web Vitals（コア ウェブ バイタル）とは、新しい検索順位決定要素（アルゴリズムの1要素）で詳しくは3つあります。

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID)
  3. Cumulative Layout Shift (CLS)

※他にFCPがページスピードインサイトで表示されますが、要素ではありません。LCPが似た要素になります。
※FCPとLCPの違いですが、LCPはメインコンテンツの読み込み時間、FCPはページの何かしらのコンテンツの読み込み時間です。

まず1つ目の【Largest Contentful Paint】（ラージェスト コンテントフル ペイント：LCP）とはページの読みこみ時間（表示時間）の早さの事を指しています。ビューポート内の最大コンテンツ要素がいつ表示されるかこれを表す指標になります。LCPが低下する一般的な原因は次の４つです。

  • サーバーの応答時間が遅い
  • レンダリングをブロックするJavaScriptとCSS
  • リソースの読み込み時間が遅い
  • クライアント側のレンダリング

上記の内容は、これまでページスピードの中で出てきたものです。いまさら改めて言われなくてもと思われる方はSEO通であればいると思います。
特に大きい画像を使っていると×になる可能性が高いです。webpのような新画像の変換などが大きな解決策になります。

2つ目の【First Input Delay】（ファーストインプットディレイ:FID）。これは、ユーザーが最初にページを操作してから、ブラウザーがその操作に実際に応答できるまでの時間を測定します。
たまにありますが、ページが開いてから検索窓に入力するまでに時間がかかるというような場合、スムーズな動作になるように改善をしたほうがいいです。キャッシュのせいだからではなくお構いなしに入力できるまでのタイムラグがある場合はお気をつけください。
この指標で大きな問題になるのが大量のJavascriptの読み込みです。jsを組み込む際は読み込み時間を気にしてください。
改善方法としては以下があります。

  • JavaScriptの実行時間を短縮する
  • 長いタスクを分割する
  • インタラクションの準備のためにページを最適化する
  • ウェブワーカーを使用する

記事も長文とせず何文字下で区切って次ページへ回す等の工夫は必要になります。
※ウェブワーカーとは、並行処理できないjs欠点を改善するための書き方（処理方法）、やり方になります。詳しくはhttps://www.html5rocks.com/ja/tutorials/workers/basics/をご確認ください。

3つ目【Cumulative Layout Shift】（キュムレイティブ レイアウト シフト:CLS）何かアクションをしようとしたときにリンク先が移動してしまい、本来押したかったリンクではないところをクリックしてしまう経験はありませんか？あまり日本国内のサイトだとみかけませんが、海外系のサイトだと結構あるレイアウトです。
原因は、サイズが不明な画像や動画、フォールバックよりも大きくまたは小さく表示されるフォント、動的にサイズを変更するサードパーティの広告やウィジェットなどです。いろいろな理由があります。意図的に広告を押させるためにやっている人もいるかもしれません。【Cumulative Layout Shift】では、このレイアウトシフトを数値化して表示したものです。レイアウトを数値化って？？？となるとおもいます。そんな方はこちらをみてください（clsの解説）
悪意でやっていないのに発生してしまう原因は大半が以下になります。

  • 寸法のない画像
  • サイズのない広告、埋め込み、iframe
  • 動的に挿入されたコンテンツ
  • FOIT / FOUTを引き起こすWebフォント
  • DOMを更新する前にネットワーク応答を待機するアクション

導入時期は？

2021年5月からと公式発表されています。

もっと詳しく知りたい方は、それぞれに詳細情報が載っていますので確認しましょう。
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

何かチェックする方法はありますか？

はい！あります。実はすでにPSIでチェックできます。気づかないうちに目にしていますね。このサイトをチェックしてみます。
点数が低いのは気にしないでください。さぼってますｗ

ページスピードインサイト

上記の赤枠部分に秒数と合わせて表示されます。青くなっているタブを切り替えれば見れます。CLSだけ問題なしですね！これら秒数をどれだけ短くできるかが肝になります。

コアウェブバイタルの影響度

Googleの金谷さんが動画でも言っていましたが、あくまで順位の決定要素の1つでしかありません。全く同じレベルのサイトがあったときに対応できている方が上にくる程度のものです。

このアルゴリズムが導入されたとしても最も大切なものはユーザーを考えたコンテンツであることは変わりありません。

今のうちからスピードアップ対策をやっておいた方がいいと思います。もしも手が空かない、時間が無い、お金はあるという場合はご相談ください。
自社のサイトは何もやっていないのですが、改善技術はあります。ｗ

点数での成果報酬でも相談次第ではやりますのでご気軽にご相談を。

Post Views: 125