コアウェブバイタルとは？
2020年にGoogleが発表した「コアウェブバイタル」をご存知ですか？
WEBサイトにおけるユーザー体験を数値に直して指標化したものになります。
Googleの検索結果にて上位表示させる評価基準の一つでもあります。
良質なコンテンツ制作が検索結果に上位表示させる手法として浸透していますが、同じようなコンテンツ品質だった場合、コアウェブバイタルが良い方が検索結果で上位表示される可能性が高いです。
コアウェブバイタルを理解して、良質なコンテンツをより優位に表示させましょう。
コアウェブバイタルを形成する３つの指標「LCP」「FID」「CLS」
コアウェブバイタルは「LCP」「FID」「CLS」の３つの指標で形成されています。
ページの読み込み速度を測る「LCP」
LCP（Largest Contentful Paint）は「最大視覚コンテンツの表示時間」とされています。
具体的には「知覚される読み込み速度を測定するための指標」と解説されています。
ブラウザで表示される最も大きなコンテンツ（画像・動画のサムネイル・背景に指定されている画像やHTMLで指令される要素など）が表示されるまでの時間を表しています。
上図のとおり、2.5秒未満は良好、2.5秒以上4秒未満は改善余地あり、4秒以上は不良と評価されます。
初回入力までの遅延時間を測る「FID」
FID（First Input Delay）は「読み込みの応答性」とされています。
具体的にはサイト訪問者がクリック（タップ）、テキスト入力などを行った際、ブラウザが反応するのにかかった時間を表しています。
100ms（ミリ秒）未満は良好、100ms以上300ms未満は改善余地あり、300ms以上は不良と評価されます。
JavaScriptなどの実行時間が重たいなどが考えられます。
直接的なユーザー体験を測る「CLS」
CLS（Cumulative Layout Shift）は「視覚的な安定性を測定するための指標」とされています。
具体的には読み込みの遅延などにより、意図していない表示やレイアウトのずれがどれぐらい発生したのかを、「レイアウトシフトスコア」という指標でで表します。よくあるのは、画像（広告など）の読み込みが遅延したことにより、ボタンなどのUIやレイアウトがズレを起こしたりするもので、どなたでも一度は経験されたことがあるのではないかと思います。
「ズレた表示領域の比率 × 距離の比率」で計算されるようです。
CLS スコアが 0.1未満であれば良好、0,1以上0.25未満であれば改善余地あり、0.25以上は不良と評価されます。
外部サイトから画像や広告を表示するようなサイトは要注意です。
コアウェブバイタルの確認方法
コアウェブバイタルの確認方法はいくつかございます。
代表的な３つの方法（ツール）をご紹介いたします。
Search Console
ご存知のSearch Consoleでもコアウェブバイタルは確認いただけます。
Search Consoleの「エクスペリエンス」内にある「ウェブに関する主な指標」でモバイル・PCそれぞれの不良URL / 改善が必要なURL / 良好なURLの数を確認することができます。
さらに「レポートを開く」をクリックすることで、それぞれどのURLがどの指標で不良なのか？を確認することができます。
PageSpeed Insights
PageSpeed Insightsは入力したURL（ページ）の表示スピードを解析し、改善すべき箇所を確認できるツールです。
自分で運営しているサイト内のページはもちろん、競合サイト内の特定ページも確認することができます。
例えば、容量が重たい改善すべき画像などを確認することもできるので便利です。
Light House
Light Houseも上記２つ同様にGoogleが提供しています。
上記２つがWEBサイトとして提供されているのに対し、Light HouseはChromeの拡張機能として提供されています。
計測したいページにChromeでアクセスし、灯台マークの機能拡張のアイコンをクリック＆「Generate Report」をクリックすれば、数十秒から数分で解析されレポート画面が表示されます。
コアウェブバイタルの改善方法とは？
LCPの改善方法
LCPはコンテンツの読み込み＆表示速度を測る指標です。多くの場合、画像の読み込みに時間を要することが多いですから、画像の読み込み速度を縮めることで改善につながることが多いです。
画像の軽量化
画像を軽量化にはいくつかの方法が考えられます。
以下を確認し、できることから対策していきましょう。
適切なサイズで表示する
例えば一眼レフカメラや高機能な解像度のスマートフォンで撮影した画像を、そのままの画像サイズ（ピクセル数）で公開していたりしませんか？
アイキャッチ画像や解説図、動画のサムネイル、背景画像など、適切な画像サイズにリサイズしてからサイトにアップすることで無駄な容量を削減することができます。
自社のサイトで公開する際の適切な画像サイズが不明な場合、構築を依頼した制作会社に確認いたしましょう。
適切な解像度で表示する
画像にはサイズ（ピクセル数）とは別に解像度（dpi=Dot Per Inch）という概念があります。
印刷であれば150dpi（ビジネス資料をインクジェットプリンタで印刷する場合）〜350dpi（チラシやパンフレットなどを印刷会社で印刷する場合）程度の解像度が必要になります。
PCやスマートフォンのモニターに表示するのであれば、72dpi〜96dpi程度あれば問題ありません。
チラシやパンフレットのデザインをメインで行なっているデザイナーの場合、解像度を変更せずに300〜350dpiのまま、WEBサイトに上げてしまっている場合があるかも知れません。
公開前に72dpi〜96dpi程度に変更してから公開しましょう。
画像を圧縮する
わかりやすいのはJPGファイルですが、Photoshopなどで画像を書き出す際、圧縮率を設定することができます。
この圧縮率、100%＝高解像度（非圧縮）とし、数値が低いほど画像が圧縮され容量が軽くなるのと引き換えに、画像の品質が落ちます（ボケたり、モアレが出てきたりします）。
とあるSEO会社での調査では、画質を損なわない適切な圧縮率は80%とのようでした。
もちろん、画像によって異なるので試行錯誤が必要ですが、JPG形式であれば80%を目安に書き出してみましょう。
また、JPGはもちろん、PNGなどのファイル形式でも画像を損なわずに容量を圧縮するツールやWEBサービスがございます。
有名なのはパンダのキャラクターでお馴染みのTinyPNGです。
TinyPNGはJPGやPNG画像のほか、後述するWEBP形式にも対応しており、アップロードするだけで自動的に圧縮してくれます。一度に20枚まで圧縮することができますので、サイトで利用する画像をまとめてアップロード＆圧縮することで、効率よく品質を損なわずに画像圧縮が行えます。
適切なファイル形式で表示する
画像のファイル形式にはそれぞれ特徴があります。
以下にWEBサイトで利用可能な代表的なファイル形式をご紹介いたします。
公開する画像にあったファイル形式で書き出し、容量削減を行いましょう。
JPG
JPG形式は点の集まりであるラスタ形式の画像です。
JPG形式フルカラーの1670万色を表現することができます。
色数が多いですから、写真やグラデーションのかかった画像を表示するのに適しています。
一つ一つの点（ドット）に色情報を持たせることになるので、容量が増加する傾向にあります。
その為、Photoshopなどで書き出しの際は圧縮率を設定することができますが、圧縮しすぎると画像が荒れてしまいます。
圧縮方式に非可逆圧縮という方式が用いられており、保存を繰り返すことで画質が劣化していきます。
尚、背景を透過することはできません。
GIF
GIF形式も点の集まりで表現するファイル形式ですが、256色までしか扱うことができません。
しかし、透過を表現することができるため、色数が少なく背景画像の上に配置するようなボタンやアイコンなどで利用することが多いです。
もう一つGIF形式の特徴はパラパラ漫画のように複数の画像を切り替え表示することでアニメーション表現が行えます。
バナー広告などで見かけることも多いと思います。
PNG
JPG同様に1670万色利用できるファイル形式であり、点の集まりでできている画像形式です。
JPGとの違いは可逆圧縮方式を用いており、何度保存し直しても画像が劣化しないこと、透過機能を持ち合わせていることです。
その為写真でも利用できますし、グラフィックの書き出しなどにも向いており、多くの画像で活用されています。
但し、容量が重くなりやすい傾向にあるため、前述のTinyPNGなどを活用して、容量削減することをお勧めいたします。
SVG
SVGは Scalable Vector Graphics の略です。
その名の通りベクタ形式のフォーマットであり、点ではなく計算式により描画されているフォーマットです。
主にIllustratorなどのドローソフトを用いて作成される形式です。
JPGやPNGなどのラスタ形式の画像と比較して容量が軽く、拡大しても画像が劣化しない特長があります。
また、CSSやJava Scriptなどと組み合わせることで、なめらかなアニメーションを表現することもできます。
GIFやPNG同様に透過機能も持ち合わせております。
主にタイトルロゴ、アイコン、シンプルなイラスト、ボタンなどで利用することが多いでしょう。
尚、写真のような色数が多く複雑な画像をSVGで作成すると、JPGやPNGよりも容量が重くなることがありますので、写真などには不向きでしょう。
WebP
WebPはGoogleが推奨する画像形式であり、PageSpeed Insightsなどでも利用を推奨されている形式です。
圧縮率が高く、画像をあまり劣化させずに写真画像をなどを表示するのに適していますが、標準で書き出しに対応しているアプリケーションが少ないのが実情です（2022年現在）。
WebPは1670万色が扱え、透過機能もあり、アニメーションも可能なスーパーファイル形式なのですが、対応ブラウザが少なかったため、浸透に時間を要しています。
現在の最新ブラウザでは全て対応していますが、Internet ExplorerやiOS14.2以下のSafariでは非対応なので、自治体のWEBサイトなど公共性が求められるようなサイトの場合、現段階では利用しない方が良いかもしれません。
FIDの改善方法
FID低下にはJavascriptでが影響していることが多いです。
Javascriptの読み込みが始まると処理が完了するまで、以降の処理を停止させる特性があります。
この特性により、読み込みや表示に時間を費やすことになり、FIDスコアを悪化させる原因になります。
必要のないJavaScriptを削除する
構築直後のサイトにはあまりないと思いますが、増改築を繰り返したサイトや、複数名の制作者により改修が行われたサイト、コアウェブバイタルを意識していない・知見がないエンジニアに記述されたページは、不要なJavascriptが残っている可能性があります。
不要なJavascriptの確認方法は、ブラウザのデベロッパーツールで確認できます。
Chromeであれば、デベロッパーツールの「Coverage」で以下のように確認することができます。
但し、他ページなどで共通で使いまわしている箇所もあると思いますので、削除にあたっては十分注意しましょう。
JavaScriptやCSSを軽量化する
JavaScriptやCSSに記述されているインデント、不要な改行、スペースなどを削除することで軽量化を図るものです。
MInify処理とも呼ばれています。
Microsoftが無償で提供しているエディタ「VSCode」では、Minify処理を容易に行うことができます。
WebWorkerを使用する
JavaScriptは読み込み・処理が終わるまで、ユーザーが操作することができません。
一方、Webサイトには複数のJavaScriptが利用されており、それぞれのJavaScriptが読み込み・処理が終わるまで、ユーザーは待機を余儀なくされます。
この状態を軽減させる方法として「WebWorker」という技術があります。
この技術を用いることで、重たいJavaScriptの処理が終わるのを待つことなく、次の読み込み・処理に進めることができ、FIDスコアを改善できます。
JavaScriptを読み込ませる位置を調整する
head要素に記述することが多いですが、問題がなければbody要素の最後に記述しましょう。
但し、JavaScriptの内容によっては次に紹介する「CLS」に影響を及ぼす可能性もありますので、見極めが必要になります。
CLSの改善方法
表示やレイアウト崩れの指標であるCLS、代表的な改善施策例を以下にご紹介いたします。
画像サイズ指定
基本的なことですが、画像にサイズ指定がされていないために発生していることがあります。
レスポンシブウェブデザインで作成することが一般化してきた影響かと思います。
各画像にはwidthとheightを指定して、CSSでは比率を指定しましょう。
Webフォントの読み込み最適化
異なる端末・ブラウザにおいても同様の印象を与えたいこと、回線速度が向上していること、Webフォントも普及しつつあることから、最近は利用頻度も多くなりました。
しかし、Webフォントの読み込み〜表示までに時間がかかることが要因になっていることも多いです。
最初はデバイスフォントで表示され、その後Webフォントが適用されますが、書体ごとに微妙にサイズが異なるために発生します。
Webフォントを軽量化してサーバにアップする、link rel=preloadを記述して優先的に読み込ませるなどで改善させることができます。
広告のサイズ指定
画像や動画の広告に対してサイズ指定がなされていないと、CLSに影響を及ぼします。
前述の画像サイズ指定同様に、サイズ指定を行いましょう。
カルーセルやスライダーのチューニング
サイトのトップページなどでビジュアルインフォメーションボードとして活用するカルーセルやスライダーが影響していることも多いです。
以下のような改善施策を行いましょう。
表示領域をあらかじめ確保する
前述の画像指定同様に、あらかじめ表示領域を確保しておきましょう。
画像使用枚数を削減する
メインビジュアルなどで利用枚数が多いと、それだけ読み込みにも時間がかかります。
本当に掲示する必要がある画像のみに、枚数を制限いたしましょう。
読み込み優先順位を指定する
読み込みを行う画像に優先順位を指定しましょう。
最初に表示すべき画像にloading=eager、２枚目以降にloading=lazyと属性指定することで、優先順位指定が可能です。
コアウェブバイタル改善できるトラムの運用サービス
いかがでしたでしょうか？
コアウェブバイタルはSEOはもちろんですが、UX的な観点からも非常に有効です。
しかしながら１回行ったらおしまいではなく、サイトを更新することによる新規ページの追加や、Googleのアクセス解析ロジックの更新などにより絶えず変化が行われるため、一時的な対策は行えても終わりはないと言えます。
トラムでは「定額制運用支援サービス」を提供しており、あらかじめ定めた一定のリソースを提供するサービスを行なっております。
これにより、継続的にコアウェブバイタルの向上を行うことはもちろん、コンテンツを追加するといった活用も可能です。
コアウェブバイタルの改善にご興味いただいた方は以下よりお気軽にお問い合わせください！
