Core Web Vitals が高く評価されるサイトとは
こんにちは、森田です。
今年の5月より Core Web Vitals が Googleランキングに影響されることもあり、最近さらに Core Web Vitals というワードを目のすることが増えた気がします。
今回は Core Web Vitals が高く評価されるサイトとは？を考えます。
どのようなデザインだと Core Web Vitals に高く評価されやすいか
メインコンテンツが大きな画像や動画を使っていると表示されるまで時間がかかる場合があるので、メインコンテンツでは LCP を意識したデザインが求められます。
LCPは、デザインのみではなくサーバーの速度なども影響されますがデザインから意識しているとより UX の高いサイトになるでしょう。
どのようなサイト構成だと Core Web Vitals に高く評価されやすいか
サイト構成は FID や CLS に影響が出ることが多いフェーズで、速いレスポンスと読み込み途中でも崩れない表示が求められます。
やはり、サーバーに負荷も少なく高速に表示できる静的サイトが圧倒的に強いです。
CMS やフレームワークの選定
これから新規サイトを立ち上げる場合は最初から Core Web Vitals を考えてフレームワークなどを選択する方が良いでしょう。
Rails や WordPress などのリクエストに応じてHTMLを返す MPA (Multi page application)はどうしても表示に時間がかかるので不利になってしまいます。
CMSとしてWordPressを採用するのであれば静的サイトに書き出しするサービスの Shifter や WordPress自体はヘッドレスCMSとして利用し、Gatsby.js などで静的サイトにする選択肢も有りだと思います。
そもそもお知らせや問い合わせフォームだけで WordPress を採用するのであれば違う選択肢を考えてもいいかもしれません。
以下の記事で Core Web Vitals を意識したフレームワーク選定を書いておりますので、フレームワーク選択の参考にご覧ください。
SSG や Jamstack という選択肢
SSG （Static Site Generator）を使い静的サイトを書き出すだけでも MPA より速く Core Web Vitals の向上を見込めますが、サイトアーキテクチャとして Jamstack を採用することが現在では最良ではと選択肢と考えます。
静的に書き出し、動的な更新性を持ち、Netlify などを使えばCDNで配信でき、 React などによる高速表示の恩恵も受けれるからです。
このあたりは以下の記事でより詳しく掘り下げておりますので、是非ご覧ください。
まとめ
Core Web Vitals は UX を向上するための指標です。正直付け焼刃でスコアを上げるのは難しい気はしています🤔
場合によってはサイト構成をゼロから構築する方が早いかもしれません。
5月になりランキングにどのような変動があるかは注目していきたいですが（モバイルのみ反映されるという噂も有ります）、Gaji-Labo は Core Web Vitals 改 善にも力を入れております。Core Web Vitalsでお悩みの際はご相談ください。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！関連リンク
