こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜Web担当者編 第21回＞
【コアウェブバイタル】Web制作のプロが測定から対策方法を解説
についてお伝えします。

担当は高橋です。

コアウェブバイタルは「遅い・固まる・ズレる」というユーザーのストレス要因を数値化した指標であり、Googleの検索順位にも影響します。

対応することでアクセス数や直帰率の改善が期待できるため、まずはGoogleサーチコンソールで自サイトの現状を把握し、問題のある箇所をWeb制作会社と連携して改善していくことが重要です。

”【コアウェブバイタル】Web制作のプロが測定から対策方法を解説”をテーマに、
今日お伝えしたいことは3つあります。

コアウェブバイタルとは何か端的に説明するならば、「Webサイトを利用するユーザーをイライラさせないための指標」です。

スマホやPCでWebサイトを閲覧していてストレスに感じたり、使いにくいと感じる時があったりするのではないでしょうか。

そういった問題点について、グーグルが提示した定量的な指標がコアウェブバイタルです。

コアウェブバイタルには３つの指標があります。要約すると、
・遅い
・固まる
・ズレる
の３点です。

実際、「遅い」についてはサイトを利用していてなかなかページが表示されないときは当然イライラしますよね。

また、「固まる」これはページが表示はされているのに、なぜかボタンクリックや入力が操作できなかったりするタイミングがあるかと思います。このような問題についてです。

動かして「ズレる」はページが表示されてボタンなどをクリックしようと思ったタイミングで、画像などが遅れて読み込まれ、表示される位置がずれ、意図しないボタンや広告などをクリックしてしまったことはないでしょうか。

これもイライラする要因となります。

この３つをグーグルでは、
ページの表示速度 ＝LCP（Largest Contentful Paint）遅い
操作を待たされる時間＝FID（First Input Delay）固まる
ページ表示の安定性 ＝CLS（Cumulative Layout Shift）ズレる
として定義しています。

実際にこのコアウェブバイタルの数値を確認する方法があります。

サイト全体の状況確認としてはGoogle Search Consoleから確認することができます。

具体的にはサーチコンソールのエクスペリエンス＞ウェブに関する主な指標
から確認することができます。レポートを開き個別の具体的な不良箇所を確認することも可能です。

また、個別ページは Page Speed Insight でも確認することができます。

ページスピードインサイトのサイトでURLを入力して確認ができます

イライラする部分を数値化していますので、この点数を改善することで利用するユーザーのイライラが軽減されます。

それによって得られる主なメリットは、
・アクセス数の増加
・直帰率の改善
があげられます。

特に一定以上のアクセス数があるサイトでは効果が出てくる可能性が大きく、実際に効果が得られたというサイトもあります。

そして特に最近注目された理由としては、このコアウェブバイタルがSEO、検索エンジンの表示順位にも影響してくるとグーグルが発表しているからです。

指標自体は以前からありましたが、実際に影響が出ると決まっていることから注目度も上がっています。

また、適切に対応しない場合の影響として、検索順位が下降しアクセス数が減少するなども考えられるため、少なくともサイトのコアウェブバイタル対応状況の把握は重要となります。

実際に Google 検索では2021年8月末にモバイル検索、2022年3月にデスクトップ検索
へ反映されました。

では、どのようにイライラする要因への対応をするのかです。

まず、ページの表示速度（LCP）については、
・ページのキャッシュを行うことで表示を早くする
・画像を最適なサイズに軽量化することで表示を早くする
があげられます。

CMSなどで動的なページを表示しているサイトの場合、ページ自体の表示がどうしても遅くなる場合があります。

その対応としては、ＣＤＮ（コンテンツデリバリーネットワーク）のキャッシュ機能を用いて一度表示したページは一定期間キャッシュから配信することで、
高速にページを変える方法です。

また、必要以上に大きな画像がサイト上で利用されていると特にスマホなどのモバイル回線の場合、読み込み時間への影響が大きくなります。

そのため、必要最小限の画像サイズ、画質として軽量化することで、読み込み時間も短くすることができます。

操作を待たされる時間（FID）については、内部の作りではありますが、Javascriptの無駄な記述を排除したり無駄な読み込みをなくしたりすることで軽量化する対応が出来ます。

最近はどんどんJavascriptでの処理が増えており、サイト全体で利用するJavascriptの処理量なども大きくなっていると思います。

その場合、特定ページでしか利用しないJavascriptファイルもすべてのページで読み込まれていたり、処理が行われていたりする場合もありますので、必要箇所のみとなるような対応が必要です。

最後に、ページ表示の安定性(CLS）については、主には、HTMLまたはCSSで 画像の幅、高さ（縦横比）を適切に指定することで表示のズレをなくすことができます。

企業のＷｅｂ担当者の方としては、それぞれ、３つの指標数値をもとに、Ｗｅｂ制作会社に改善方法などを検討してもらうことがよいでしょう。

最後までご覧いただきありがとうございました。

の３点についての内容でした。