Core Web Vitals(コアウェブバイタル)とは？2021年5月〜導入

みなさん、Core Web Vitalsは、ご存知でしょうか？

Core Web Vitalsとは、2021年5月からGoogle検索のランキング要因に組み込まれる指標になります。

さらに、Google は、これを利用してページエクスペリエンスの基準をすべて満たすページを識別できるようにする取り組みを行っています。(こちらも、2021年5月から導入予定)

Google 検索セントラルブログにおいて、正式に組み込まれると発表されています。

日常的に、Google Search Consoleを利用している方は、以下の項目が追加になっていることに気づいているかもしれません。

上記のレポートで、LCPの問題: 4秒超やCLSに関する問題: 0.25超等のエラーレポートが表示されているかと思います。

アクセス数が少ないサイトだと、以下のように表示されません。

上記表示された場合は、PageSpeed Insightsを試してみると確認できます。

具体的には、以下の3つの指標になります。

ユーザエクスペリエンスの向上の為の指標になります。

要は、Webサイトは、読み込み時間がより早く、ユーザのアクション(クリックやタップ)に即座に反応し、ページ表示時にデザインが崩れたりしないほうが使い勝手がよい = 検索結果の上位に来ますということになります。

ユーザエクスペリエンスの指標には、元々上記以外に以下がありました。

今回追加される3つの指標のうち、LCPについてさらに詳しくみて行きたいと思います。

LCP(Lagest Contentful Paint)

読み込み性能を測定します。良いユーザー体験を提供するためには、ページが最初にロードを開始してから2.5秒以内にLCP(最大のコンテンツ要素がレンダリングされる)が発生する必要があります。

考えられる対策を列挙します。ものによっては、コストがかかるものがあるので手軽なものから始めましょう。

当サイト、この記事を書いている時、以下の数値でした。

相当遅いですね。

ここで上記にあげた対応を少し行ってみたいと思います。

nginxとphp-fpmを再起動します。毎晩、nginxについては再起動をかけるようにしていたのですが

php-fpmはそのままだったため、プロセスが溜まっていました。毎晩の再起動に、php-fpmも追加しました。

そして、てっとり早いのは、画像圧縮です。本サイトだと、1画像だけ100kbを超えるものがあるので

Googleの画像圧縮ツールで圧縮します。

Squoosh is the ultimate image optimizer …

squoosh.app

これで、再度計測してみます。これだけでだいぶ改善されました。6.2秒 => 4.5秒

ちょっとハードル高いですが、nginxのバージョンもあげてみます。

個人サイトだと気軽に上げれますが、商用サイトの場合は、注意してあげてください。

当サイトは、centOS7なので以下の通り実施。

vim /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

# yum -y --enablerepo=nginx install nginx

現状、nginx/1.12.2。更新後、nginx/1.18.0。

変化なし。

レンダリングを妨げるリソースの除外が一番上に来ているのでこちらの対応をします。

WordPressの以下のプラグインを入れてみます。

設定 => Async JavaScriptで、チェックを入れ、Apply Asyncを押下する。

設定 => Autoptimizeで、JSとCSSの最適化にチェックをつけて保存する。

再度、計測。

6.2秒が、3.4秒になりました。これ以上は、サーバをアップするかぐらいしかできなさそうが気がします。

2021年5月から導入されますが、早めに対応しておかないと急にオーガニックの流入がなくなってしまうなど

あるので、早め早めの対応が必要かと思います。