CoreWebVitals

みなさん、Core Web Vitalsは、ご存知でしょうか？ Core Web Vitalsとは、2021年5月からGoogle検索のランキング要因に組み込まれる指標になります。 さらに、Google は、これを利用してページ エクスペリエンスの基準をすべて満たすページを識別できるようにする取り組みを行っています。(こちらも、2021年5月から導入予定) Google 検索セントラル ブログにおいて、正式に組み込まれると発表されています。 https://developers.google.com/search/blog/2020/11/timing-for-page-experience 日常的に、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) 出典：web.dev 読み込み性能を測定します。良いユーザー体験を提供するためには、ページが最初にロードを開始してから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の画像圧縮ツールで圧縮します。 https://squoosh.app/editor これで、再度計測してみます。これだけでだいぶ改善されました。6.2秒 =&gt; 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の以下のプラグインを入れてみます。 AutoptimizeAsync JavaScript 設定 =&gt; Async JavaScriptで、チェックを入れ、Apply Asyncを押下する。 設定 =&gt; Autoptimizeで、JSとCSSの最適化にチェックをつけて保存する。 再度、計測。 6.2秒が、3.4秒になりました。これ以上は、サーバをアップするかぐらいしかできなさそうが気がします。 2021年5月から導入されますが、早めに対応しておかないと急にオーガニックの流入がなくなってしまうなど あるので、早め早めの対応が必要かと思います。

CoreWebVitals

WordPress + Cloudinaryでサイトを高速化する

nginxから第4のWebサーバLiteSpeedに変更する

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