CodeZine(コードジン)

特集ページ一覧

ヤフー社内で実践しているWebパフォーマンス改善ことはじめ~Web Vitalsの計測と改善手法

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本記事はヤフーで社内向けに用意しているWebパフォーマンス改善ドキュメントの一部を再編し、公開したものです。よいユーザー体験は長期的にサービスの発展につながります。Webのパフォーマンスを改善することは、よりよい体験を提供するための非常に重要な要素です。とはいえ改善するにしてもまず何から始めたらよいのかを悩んでしまう方もいるでしょう。本記事ではそのような方をターゲットとして、Webのパフォーマンス改善の始め方を解説していきます。

目次

Web Vitalsの概要

 Webのパフォーマンスは古くからさまざまな観点で評価・分析の方法があります。ひとくちにパフォーマンスと言っても、何をもって速い/遅いを判断するかという基準が必要になります。具体的な基準があることで初めて、行った施策が有効であったかを計測可能です。

 近年Webパフォーマンスの文脈でWeb Vitalsと呼ばれる概念が注目されています。Web Vitalsとは優れたユーザー体験を提供するために定義された指標です。

 そのうち特に重要な3つの指標がCore Web Vitalsと呼ばれています(参考:Web Vitals の概要)。

 それぞれの指標について、具体的なシーンを交えながら紹介します。

LCP(Largest Contentful Paint)

 例えば製品説明ページの画像のことを考えてみましょう。画像のサイズが大きく読み込みに時間がかかってしまえばユーザーはがっかりして離脱してしまうかもしれません。LCPはそのような状況になっていないかを確認する指標です。

FID(First Input Delay)

 例えばJavaScriptを使ったリッチな表現で見た目のよいシステムを作ったとしましょう。しかしJavaScriptの実行が完了するまで検索が使えなくなってしまうと、とても使いにくいシステムと思われてしまうでしょう。FIDはいかにシステムの機能を最速でユーザーに届けるかという指標です。

CLS(Cumulative Layout Shift)

 例えば実際にスマホなどでページを読み込んでいる最中に、突然広告が読み込まれて変なところをタップしてしまったという経験はないでしょうか。広告に限らずレイアウトが安定せず、ユーザーの想定した挙動が行えないことはユーザー体験を大きく損ないます。このレイアウトの安定性を数値化した指標がCLSです。

 もちろんこれらのスコアが全てではないですが、これらの観点を気にすることでユーザーにとって快適な体験に近づくというのはイメージしやすいのではないでしょうか。

 実際にヤフーではCore Web Vitalsの改善を全社的に進め、ビジネス指標にもよい影響を与えていることが確認されています。

 また、これらの指標は現在Googleの検索順位にも影響すると案内されています。

 パフォーマンスを気にした開発をすることは、現在のフロントエンドにおいて無視できない要素になっています。

フィールドデータとラボデータ

 Core Web Vitalsの改善のためには、まずフィールドデータとラボデータの概念を知る必要があります。計測に利用するツールはいくつかありますが、どちらのデータを計測しているのかを知ることが大事です。

 フィールドデータとラボデータの概要と特徴は以下のとおりです(参考:How to measure speed?)。

フィールドデータとラボデータ
  概要 特徴
フィールドデータ ユーザーの実行環境(Chrome User Experience Report:CrUX)から収集したパフォーマンスデータ 匿名化された実際のアクセスデータ。過去28日間の平均。十分なデータ量がないと取得できない
ラボデータ 特定の環境から計測したパフォーマンスデータ 環境を固定できるため、詳細な計測や分析がしやすい

 最終的な改善を目指すのは、ユーザーの実環境で計測されるフィールドデータです。検索結果のスコアにもフィールドデータが利用されます。一方でラボデータはフィールドデータからは読み取りにくい具体的な要素の分析が可能です。

 ラボデータをもとに手元の修正に効果があることを確認し、リリースした結果フィールドデータが改善することを確認するというフローをたどります。

 フィールドデータは実際のアクセスから匿名化する性質上、一定以上のデータが集まらないと取得できません。また、過去データの平均となるため、行った改善が即座にスコアに反映されるとは限りません。大きな改善であってもラボデータと異なり緩やかに変化していく点に注意が必要です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:アプリケーション開発の最新トレンド

著者プロフィール

  • 伊藤 康太(ヤフー株式会社)(イトウ コウタ)

     Webフロント技術室、Node.js言語サポートチーム所属。Webフロントエンド黒帯。フロントエンドの横断組織で主にパフォーマンス改善や、開発のサポート、OSSへのフィードバック、ハンズオンなどを中心に活動。

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5