2021年以降コアウェブバイタルがサイト運営にめちゃくちゃ重要になる！
みなさんは「ウェブバイタル（Web Vitals）」という言葉をご存知ですか？
Google公式ブログでは、ウェブバイタルについて以下のように説明されています。
ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みです。
出典：Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標
つまり、ウェブバイタルとは「ウェブにおけるユーザー体験の向上を目的とした取り組み」です。
しかし、ユーザー体験向上の要素となるものは各サイトによって異なりますよね。
そこで、ウェブバイタルの中でもGoogleが共通指標として特に意識するよう推進しているのが、今回取り上げるコアウェブバイタル（Core Web Vitals）。
Googleの評価基準にコアウェブバイタルが追加されたことで、検索順位が大幅に左右されるというわけではありません。
しかしこれからは、同じレベルの競合記事が並んだ場合に、Googleはコアウェブバイタルの評価がより良いサイトやページを優遇するようになります。
すなわち、コアウェブバイタルの評価が良いものであればあるほどプラスに働くことは明確。
だからこそ、コアウェブバイタル対策はこれからのSEO対策においてとても重要な作業なのです。
そもそもコアウェブバイタルとは？
では、そのコアウェブバイタルとは一体何でしょうか？
コアウェブバイタル＝サイト高速化、というわけではありません。
サイト高速化はあくまで、コアウェブバイタルを構成する要素のひとつです。
コアウェブバイタルとは、2021年5月頃にGoogleが新たに導入し、Google検索のランキング要因に組み込まれることになったUX指標です。モバイル上でのページスピードやレイアウトを評価するもので、現在はモバイル表示のみが対象となります。
コアウェブバイタルは、3つの指標から成り立っています。
①LCP
Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
出典：https://developers-jp.googleblog.com/2020/05/web-vitals.html
LCP（Largest Contentful Paint ）とは、メインコンテンツの読み込み時間に関する指標です。
ページの読み込み開始から、タイトル画像やテキストブロックなどのメインコンテンツの表示までが2.5秒以内であれば「良好」と評価され、それ以上かかっている場合は改善の余地があると判断されます。
②FID：
First Input Delay は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
出典：https://developers-jp.googleblog.com/2020/05/web-vitals.html
FID（First Input Delay）とは、インタラクティブ性に関する指標です。
ユーザーが自社サイトに訪問し、初めて行動してから次の行動の結果が反映されるまでの時間を評価します。たとえば、ページのリンクをクリックして目的のページが表示されるまでの時間、ダウンロードボタンのクリックから応答などにかかる時間など。FIDは、ユーザーがアクションを起こしてから100ミリ秒未満で結果が表示されれば「良好」と判断され、それ以上かかっている場合は改善の余地があると判断されます。
③CLS：
Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
出典：https://developers-jp.googleblog.com/2020/05/web-vitals.html
CLS（Cumulative Layout Shift ）は、レイアウト崩れに関する指標です。
サイトやページにアクセスした際に、画像やボタンの位置が予期せず崩れてしまい、ユーザーに余計なストレスを与えないようにするためのもの。Googleが定めたレイアウトの変動によるスコアを基準として、スコア0.1未満が「良好」と評価され、それ以上かかっている場合は改善の余地があると判断されます。
④FCP：
Googleの指標には入っていませんが、ページスピードを観測するツールで評価基準としてよく出てくるのがFCP。 FCP（First Contentful Paint）とは、サイトやページを開いた際に、何らかのDOMコンテンツが表示される時間のことです。LCPではメインコンテンツが表示されるまでの時間を指しますが、FCPはヘッダーやメニューバーなど、メインではなく何らかのコンテンツが表示されるまでの時間を指します。
コアウェブバイタルは、基本的にこれらの指標をランキングの評価基準としています。
実例紹介：実際にワードプレスでコアウェブバイタルとサイト高速化を実施！
このEDiT.もコアウェブバイタル対策として、サイト高速化を実施しました。
今回は、EDiT.で実際に行った改善方法をご紹介しますので、コアウェブバイタル改善を検討している方はぜひ参考にしてみてください。
EDiT.はWordPressを使用しているため、今回はWordPressでの対策をご紹介しますが、サイト高速化の方法はひとつではなく、様々な方法があります。
まず最初に、今回の対策を実施した後のEDiT.の評価をお見せします。
サイト高速化の評価は、Page Speed Insightというツールで確認することができます。
確認したいサイトのURLをボックスに入力し、「分析」ボタンをクリックするだけで自動で評価を測定してくれるので、ぜひご自身のサイトの評価も確認してみてください。
Page Speed Insight https://developers.google.com/speed/pagespeed/insights/
EDiT.をPage Speed Insightで評価を確認したところ、今回の対策によりPCで98点、モバイルで91点を獲得することができました。
EDiT.の評価の詳細はこちらからご覧ください。
今回具体的に行ったステップは7つ。その7つの方法を今からご紹介していきます。
ワードプレステーマはSWELLを使用
サイト高速化を目指すためにおすすめのワードプレステーマがSWELLです。
なぜSWELLをおすすめするかというと、SWELLにはサイト高速化される処理が事前に標準搭載されているからなのです。
EDiT.ももちろん、SWELLをワードプレステーマに設定しています。
ワードプレスを使用している方は、ご自身の使用しているテーマにサイト高速化処理が標準搭載されているか、一度確認してみてください。
KUSANAGIを導入
次に行ったのが、KUSANAGIの導入です。
KUSANAGIとは、WordPressで構築されたウェブサイトの表示速度をノンカスタマイズで高速化してくれるシステムのこと。
こちらを導入する際は、CONOHAサーバーを使用することをおすすめします。
KUSANAGIの詳しい導入方法については、また別の記事でご紹介します。
SWELL設定でサイト高速化する
SWELLを設定してKUSANAGIを導入した後は、SWELLの設定上でサイト高速化の作業をしていきます。
SWELL設定は、管理画面左側のメニューバーから確認することができます。
SWELL設定で行うステップは7つあります。
キャッシュ機能
まず最初に、「キャッシュ機能」のチェックボックス全てにチェックを入れてください。
遅延読み込み機能
「キャッシュ機能」の下にある「遅延読み込み機能」の設定を変更します。
「記事下コンテンツを遅延読み込みさせる」と「フッターを遅延読み込みさせる」のチェックボックスにチェックを入れてください。
画像のLazyload
「遅延読み込み機能」の下にある「画像のLazyload」は、「スクリプト(lazysizes.js)を使って遅延読み込みさせる」のボタンを押しましょう。
ファイルの読み込み
「遅延読み込み機能」の下にいくと、「ファイルの読み込み」という設定があります。
こちらは、「SWELLのCSSをインラインで読み込む」にチェックを入れてください。
ページ遷移高速化
続いて下にいくと、「ページ遷移高速化」という設定があります。
こちらは「Prefetch」のボタンを押してください。
こちらの設定が終わったら、一度「変更を保存」ボタンを押して保存しましょう。
Font Awesomeの読み込み
続いて、「高速化」の設定画面から「Font Awesome」の設定画面に移動してください。
こちらの設定では、「Font Awesomeの読み込み」で「読み込まない」のボタンを押してください。
機能停止
最後に、「機能停止」の設定画面に移動してください。
こちらの設定では「SWELL」の機能と「WordPress」の機能で機能を停止するものを設定できますが、使用しないものは極力すべて機能停止にしてください。
プラグインの設定でコアウェブバイタル対策
KUSANAGIを入れていたら、プラグインはこちら一つで十分です。
それが、「Async JavaScript」。
次世代フォーマットでの画像の配信が超重要！
現在サイトで使用されている画像はJPGやPNGなどが一般的です。
しかし、サイト高速化においては、次世代フォーマットの使用がページの表示速度向上に繋がると推奨されているのです。
ですから、次世代フォーマットでの画像の配信はとても重要になってきます。
次世代フォーマットとして代表的なのがWebP（ウェッピー）です。
WebPは、Googleが開発している静止画フォーマット。ファイルの拡張子は「.webp」です。
WebPはJPEGやPNGをそれぞれ30％程度圧縮できるといわれています。
アニメーションの表現もでき、PNGのような透過表現にも対応しています。
次世代フォーマットは新しいシステムのため、まだ対応できないブラウザも存在しています。
そのため、閲覧できないブラウザでは、JPGやPNGなど別の画像を表示させる対応が必要となります。
前で説明したKUSANAGIを導入すれば、次世代フォーマットに対応できるブラウザには次世代フォーマットに、対応していないブラウザにはJPEGにという変換を自動で対応してくれますので、導入をおすすめします。
もしKUSANAGIを導入できない場合は、下記2つのプラグインを追加するとKUSANAGIと同様の自動変換に対応することができます。
①「Autoptimize」
②「EWWW image optimizer」
キー リクエストのプリロード
ここからは、プラグインの設定ではなく、ワードプレス自体の設定をしていきます。
Page Speed Insightでサイトの評価を見てみると、以下のようなエラー内容がよく出てきます。
「<link rel="preload">を使用して、現在ページ読み込みの後の方でリクエストしているリソースを優先的に取得することをご検討下さい。」
こちらは、大事なコンテンツの読み込みが優先的に読み込まれていない状態であることを指しています。
あとに読み込まれてしまいがちなコンテンツとして多いのがフォント。画像は最悪の場合なくても記事内容は読めますが、フォントは読み込まれない限りテキスト内容が読めません。
そのため、これから説明する作業を行うことで、フォントを優先的に読み込ませ、サイト高速化につなげていきます。
管理画面左側のメニューバーで「外観」をクリックし、「カスタマイズ」から「高度な設定」の画面で操作を行います。
一番上にある「headタグ終了直前に出力するコード」の「</head>直前」という場所に、下記のコードを埋め込みましょう。
<link rel="preload" as="font" type="font/ttf" href="https://あなたのサイトURL/wp-content/themes/swell/assets/fonts/icomoon.ttf?7ojy2d" crossorigin>
※コードの「あなたのサイト」という部分には、ご自身のサイトのURLを入力してください。
これで、フォントを優先的に読み込ませる設定が完了しました。
画像要素で width と height を明示的に指定する
Page Speed Insightで指摘されやすいもうひとつの内容が、画像やロゴのwidth（横）とheight（縦）のサイズが指定されていないこと。
縦と横のサイズが設定されていないと、レイアウトが安定していないとみなされ評価が下がってしまうのです。
CLSの評価において、このレイアウトのぐらつき防止をする対策はとても重要です。
こちらを改善するには、方法が2つあります。1つは、記事ごとに入れる画像の縦横サイズをあらかじめ指定しておくこと。もう1つは、ロゴの縦横を指定してあげること。ここでは、ロゴのサイズを指定する方法について説明していきます。
設定場所は先ほどと同様、管理画面左側のメニューバーで「外観」をクリックし、「カスタマイズ」から「高度な設定」の画面で行います。
「headタグ終了直前に出力するコード」の「</head>直前」という場所に下記のコードを埋め込んでください。
<script>
document.addEventListener('DOMContentLoaded', () => {
try {
const logo = document.querySelector('.c-headLogo__img');
logo.setAttribute("width", "任意のサイズ");
logo.setAttribute("height", "任意のサイズ");
}catch (e) {}
});
</script>
※コードの「任意のサイズ」という部分には、ご自身が設定するロゴのサイズを入力してください。
これで、ロゴの縦横サイズを指定する設定が完了しました。
全ての画像は必ずjpgで圧縮する
サイトに表示させる全ての画像は、必ずJPEGで圧縮しましょう。
おすすめ圧縮ツールは、グーグルが開発したSqooshです。圧縮率やリサイズが簡単にできるので、ぜひ使用してみてください。
Sqoosh https://squoosh.app/
1枚の画像容量は50kbくらいを目処に目指しましょう。
また、PNGの画像を使用している方も多いかもしれませんが、PNGは重くなってしまうので極力JPEGを使用しましょう。
以上が、EDiT.で実際に行ったコアウェブバイタル対策です。
これらの処理を行うことで、Page Speed Insightでは90点台を獲得することができるはずです。
コアウェブバイタルはサーチコンソールからもチェックが可能
ここまで私たちが行ってきたコアウェブバイタル対策の方法を説明してきました。
コアウェブバイタル対策をするには、対策をする前と後に、ご自身のサイトが、コアウェブバイタルにおいてどのような評価になっているのかを確認することが大切です。
冒頭でPage Speed Insightで評価を確認する方法をご紹介しましたが、実はGoogle Search Consoleでも確認することができるようになったのです。
サーチコンソールでは、拡張レポートの中にある、「ウェブに関する主な指標」でコアウェブバイタルのサイト評価を確認することができます。
レポートは良好・改善が必要・不良の3段階で評価が分けられています。
PCとモバイル両方の評価がそれぞれ確認できますので、コアウェブバイタルの3つの指標でどのページに問題があるかを確認し、具体的な対策をとりましょう。
コアウェブバイタル対策、サイト高速化、KUSANAGI導入などに悩んだら
今回は、新しくGoogleが取り入れたランキング要因であるコアウェブバイタルについて、そしてEDiT.で実際に行った対策についてご紹介しました。
ご自身のサイトの高速化を検討している方や、コアウェブバイタル対策、KUSANAGIの導入などでお悩みの方がいたら、ぜひロースターにご相談ください。
EDiT.お客様サポートLINE@
https://page.line.me/553rkeji
※ご登録後、ご相談内容をチャットでお送りください。
また、EDiT.では、このオウンドメディアをゼロから作り上げた方法をPDF資料にまとめて無料で公開しています。ページ下部のCTAボタンから、ぜひダウンロードしてみてください。