みなさん、Core Web Vitalsは、ご存知でしょうか？
Core Web Vitalsとは、2021年5月からGoogle検索のランキング要因に組み込まれる指標になります。
さらに、Google は、これを利用してページ エクスペリエンスの基準をすべて満たすページを識別できるようにする取り組みを行っています。(こちらも、2021年5月から導入予定)
Google 検索セントラル ブログにおいて、正式に組み込まれると発表されています。
日常的に、Google Search Consoleを利用している方は、以下の項目が追加になっていることに気づいているかもしれません。
- ウェブに関する主な指標 (モバイル/PC)
上記のレポートで、LCPの問題: 4秒超やCLSに関する問題: 0.25超等のエラーレポートが表示されているかと思います。
アクセス数が少ないサイトだと、以下のように表示されません。
上記表示された場合は、PageSpeed Insightsを試してみると確認できます。
具体的には、以下の3つの指標になります。
- LCP(Largest Contentful Paint) 読み込み時間
- FID(First Input Delay) インタラクティブ性
- CLS(Cumulative Layout Shift) ページ・コンテンツの視覚的安定性
ユーザエクスペリエンスの向上の為の指標になります。
要は、Webサイトは、読み込み時間がより早く、ユーザのアクション(クリックやタップ)に即座に反応し、ページ表示時にデザインが崩れたりしないほうが使い勝手がよい = 検索結果の上位に来ますということになります。
ユーザエクスペリエンスの指標には、元々上記以外に以下がありました。
- モバイルフレンドリー
- セーフブラウジング
- HTTPS
- コンテンツのアクセスを邪魔する広告
今回追加される3つの指標のうち、LCPについてさらに詳しくみて行きたいと思います。
LCP(Lagest Contentful Paint)
読み込み性能を測定します。良いユーザー体験を提供するためには、ページが最初にロードを開始してから2.5秒以内にLCP(最大のコンテンツ要素がレンダリングされる)が発生する必要があります。
対策
考えられる対策を列挙します。ものによっては、コストがかかるものがあるので手軽なものから始めましょう。
- Webサーバを再起動する
- php-fpmを再起動する
- サーバを増強する
- PHPのバージョンアップ
- Webサーバのgzip圧縮配信対応をする
- Webサーバのバージョンアップ・HTTP/2を使用できるようにする
- AMP化する
- WordPressのバージョンアップ(WordPressの場合)
- 余計なプラグインの読み込みをしなようにする(WordPressの場合)
- Shifter等を使って静的なHTMLとして提供する
- 画像サイズの見直しを行う(https://squoosh.app/index.html)
- 画像をWebPに対応する
- 画像はLazyLoadさせるようにする
- content-visibilityプロパティを利用する
- 静的なファイルをCDN等から配信するようにする
- CSSの最適化を行う
- JavaScriptの最適化を行う
当サイト、この記事を書いている時、以下の数値でした。
相当遅いですね。
ここで上記にあげた対応を少し行ってみたいと思います。
nginxとphp-fpmを再起動します。毎晩、nginxについては再起動をかけるようにしていたのですが
php-fpmはそのままだったため、プロセスが溜まっていました。毎晩の再起動に、php-fpmも追加しました。
そして、てっとり早いのは、画像圧縮です。本サイトだと、1画像だけ100kbを超えるものがあるので
Googleの画像圧縮ツールで圧縮します。
これで、再度計測してみます。これだけでだいぶ改善されました。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の以下のプラグインを入れてみます。
- Autoptimize
- Async JavaScript
設定 => Async JavaScriptで、チェックを入れ、Apply Asyncを押下する。
設定 => Autoptimizeで、JSとCSSの最適化にチェックをつけて保存する。
再度、計測。
6.2秒が、3.4秒になりました。これ以上は、サーバをアップするかぐらいしかできなさそうが気がします。
2021年5月から導入されますが、早めに対応しておかないと急にオーガニックの流入がなくなってしまうなど
あるので、早め早めの対応が必要かと思います。