プライム・ストラテジー「KUSANAGI」開発チームの石川です。
2023年8月24日から26日にアメリカのメリーランド州、ナショナルハーバーで開催された「WordCamp US 2023」にスポンサーとして参加してきました。
前回 に引き続き、KUSANAGIとWEXALの観点から興味深いと思ったセッションを取り上げたいと思います。
Core Web Vitals 2023
WEXAL でハイライトしているように、ウェブが共通のインフラとなった時代にウェブのユーザー体験の向上は欠かせないものとなっています。
Googleがユーザー体験を指標化した Core Web Vitals (コアウェブバイタルス) が登場して3年となりました。
Core Web VitalsについてはGoogleがドキュメントを公開していますので、 こちら を参照してください。
Core Web Vitals 2023: User Experience and Performance Evolved. のセッションでは発表者である Henri Helvetica 氏が、Core Web Vitalsが誕生した経緯、そして、一般のウェブサイトとWordPressサイトにおけるCore Web Vitalsの傾向の違いを発表しました。
YouTubeの動画は こちら から。
以下に要点をまとめました。
定量的に測れないものは改善できない
ウェブが誕生して以来、そのユーザー体験を改善することは長らくの課題でした。このウェブページは操作していてイライラする、というような経験は誰でもしたことがあるでしょう。
しかし、ユーザー体験というのは「主観的」なものです。何をもって「よい」ユーザー体験と言うのか、どうすれば「よい」ユーザー体験になるのかを説明することが難しかったのです。
科学の世界では、数値として (定量的に) 測定することができないものは改善できません。そこで、ユーザー体験を定量的に評価することができるように作成されたのが、Core Web Vitalsのメトリックです。
代表的なメトリックは以下です。
- Largest Contentful Paint (LCP): ウェブサイトで最も大きなコンテントの表示
- Cumulative Layout Shift (CLS): ウェブサイトのコンテンツが表示されるまでに起きるレイアウトの変化
- First Input Delay (FID): ウェブサイトの処理を開始してからユーザーがインターラクトできるようになるまでの遅延
- Interaction to Next Paint (INP): ウェブサイトに対してユーザーがインタラクションしてから次に描画されるまでの時間
ウェブサイト全体とWordPressサイトの比較
このメトリックをウェブサイト全体の平均値とWordPressサイトの平均値を比較することで、WordPressにおけるCore Web Vitalsの傾向を知ることができます。
- ウェブサイト全体: 41.71% が「よい」Core Web Vitalsを獲得
- WordPressサイト: 32.52% が「よい」Core Web Vitalsを獲得
ここから分かるのは、全体的にWordPressサイトの方がスコアが低めであるということです。
では各メトリックを具体的に見ていきましょう。
Largest Contentful Paint (LCP)
LCPは 見た目の完全性 を表すメトリックです。
ウェブサイトで最も大きなコンテント (一般的には画像の場合が多い) を表示し、ユーザーがインタラクションできる状態になるまでにかかる時間をミリ秒で測定します。
LCPはそのページのメインのコンテントであり、ユーザーが最も見たいと思っているコンテントです。その表示が遅いということは「なかなかページが表示されない」とユーザーが感じる部分を定量化したものです。
なお、70%のウェブサイトのLCPは画像です。
- ウェブサイト全体: 53.54% が「よい」LCPを獲得
- WordPressサイト: 39.23% が「よい」LCPを獲得
WordPressサイトではLCPが低いことが分かります。
ちなみに、この点は当社も前々から調査して認識していて、WEXALではWordPressサイトのLCPを改善する仕組みを導入しています。
Cumulative Layout Shift (CLS)
CLSは 見た目の安定性 を表すメトリックです。
ウェブサイトを表示する過程で発生する意図しないレイアウトのずれの大きさを測定します。
ウェブサイトが最初に表示された後に、読み込みが進んで表示が安定化するまでに文字や画像、ボタンなどの位置が徐々にずれていく…というのを経験したことがあると思います。このレイアウトが「わちゃわちゃ変わる」というものを定量化しものです。
- ウェブサイト全体: 75.00% が「よい」CLSを獲得
- WordPressサイト: 76.56% が「よい」CLSを獲得
ウェブサイト全体とWordPressサイトでは大きな差は見られないことが分かります。
First Input Delay (FID)
FIDは 即応性 (インタラクティビティ) を表すメトリックです。
ウェブサイトでユーザーがインタラクション (クリックする、ボタンを押す、スクロールする、など) してから実際にブラウザで処理が行われるまでの時間をミリ秒で測定します。
ウェブサイトの反応が鈍い、押してもスワイプしても反応がない、と感じる部分を定量化したものです。
- ウェブサイト全体: 93.8% が「よい」FIDを獲得
- WordPressサイト: 97.1% が「よい」FIDを獲得
これも、ウェブサイト全体とWordPressサイトでは大きな差は見られません。また、どちらも9割以上のウェブサイトでよい結果が出ていることが分かります。
ここからCore Web Vitalsのチームでは、ほとんどのウェブサイトでよいスコアが出るメトリックは、測定する項目として相応しくないのではないかと考えるようになりました。なぜなら、既によいスコアが出ている項目は改善する余地も少ないからです。
この結果、FIDは2024年3月までに廃止され、Interaction to Next Paint (INP) という新しいメトリックに取って代わることになりました。
古いメトリックを廃止して新しいメトリックに変わる理由が説明され、非常に納得感が得られた瞬間でした。
Time to First Byte (TTFB)
TTFBはCore Web Vitalsの直接のメトリックではありませんが、LCP等に影響を与える基礎メトリック (foundational metric) で、ウェブサイトにリクエストしてブラウザが最初のデータを受信するまでの時間をミリ秒で測定するものです。
このメトリックを取り上げているのは、ウェブサイト全体とWordPressサイトで顕著な差が見られたからです。
- ウェブサイト全体: 40.91% が「よい」TTFBを獲得
- WordPressサイト: 21.39% が「よい」TTFBを獲得
WordPressでのCore Web Vitals改善の取り組み
WordPress core teamはCore Web Vitalsの課題を2021年秋頃から認識し始め、WordPress本体 (core) での改善に取り組み始めました。
6.2ではTTFB改善に向けて、サーバサイドの性能を改善をcoreに取り込んだ最初のメジャーバージョンとなりました。
6.3ではLCPが25% (ブロックテーマ) 、19% (クラシックテーマ) で改善しています。
このように、WordPress本体においても改善の取り組みが続けられているのです。
最後に
自分が運用するウェブサイトのCore Web Vitalsを測定することはよくありますが、ウェブサイト全体やWordPressサイトを俯瞰してメトリックのスコアを分析する機会はあまりないと思います。
ウェブサイト全体のパフォーマンスを測定して、改善方法を研究している発表者ならではの内容であり、WEXALを開発する立場としても非常によい気付きが得られるセッションでした。
もしも、ウェブサイトのユーザー体験に関してチェックしたことがないようであれば、ぜひ PageSpeed Insights を活用してみてください。
