要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。11:00技術記事フロントエンドアプリケーション開発ツイート本記事はヤフーで社内向けに用意しているWebパフォーマンス改善ドキュメントの一部を再編し、公開したものです。よいユーザー体験は長期的にサービスの発展につながります。Webのパフォーマンスを改善することは、よりよい体験を提供するための非常に重要な要素です。いえ改善するにしてもまず何から始めたらよいのかを悩んでしまう方もいるでしょう。本記事ではそのような方をターゲットとして、Webのパフォーマンス改善の始め方を解説していきます。Vitalsの概要Webのパフォーマンスは古くからさまざまな観点で評価・分析の方法があります。ひとくちにパフォーマンスと言っても、何をもって速い/遅いを判断するかという基準が必要になります。具体的な基準があることで初めて、行った施策が有効であったかを計測可能です。Vitalsと呼ばれる概念が注目されています。Vitalsとは優れたユーザー体験を提供するために定義された指標です。Shift)利用中にレイアウトがガタつかないかそれぞれの指標について、具体的なシーンを交えながら紹介します。Paint)例えば製品説明ページの画像のことを考えてみましょう。画像のサイズが大きく読み込みに時間がかかってしまえばユーザーはがっかりして離脱してしまうかもしれません。LCPはそのような状況になっていないかを確認する指標です。Delay)例えばJavaScriptを使ったリッチな表現で見た目のよいシステムを作ったとしましょう。JavaScriptの実行が完了するまで検索が使えなくなってしまうと、とても使いにくいシステムと思われてしまうでしょう。FIDはいかにシステムの機能を最速でユーザーに届けるかという指標です。Shift)例えば実際にスマホなどでページを読み込んでいる最中に、突然広告が読み込まれて変なところをタップしてしまったという経験はないでしょうか。広告に限らずレイアウトが安定せず、ユーザーの想定した挙動が行えないことはユーザー体験を大きく損ないます。このレイアウトの安定性を数値化した指標がCLSです。これらのスコアが全てではないですが、これらの観点を気にすることでユーザーにとって快適な体験に近づくというのはイメージしやすいのではないでしょうか。Vitalsの改善を全社的に進め、ビジネス指標にもよい影響を与えていることが確認されています。Vitals対応事例また、これらの指標は現在Googleの検索順位にも影響すると案内されています。エクスペリエンスによるランキングの導入スケジュールパフォーマンスを気にした開発をすることは、現在のフロントエンドにおいて無視できない要素になっています。Vitalsの改善のためには、まずフィールドデータとラボデータの概念を知る必要があります。計測に利用するツールはいくつかありますが、どちらのデータを計測しているのかを知ることが大事です。匿名化された実際のアクセスデータ。環境を固定できるため、詳細な計測や分析がしやすい最終的な改善を目指すのは、ユーザーの実環境で計測されるフィールドデータです。検索結果のスコアにもフィールドデータが利用されます。一方でラボデータはフィールドデータからは読み取りにくい具体的な要素の分析が可能です。ラボデータをもとに手元の修正に効果があることを確認し、リリースした結果フィールドデータが改善することを確認するというフローをたどります。フィールドデータは実際のアクセスから匿名化する性質上、一定以上のデータが集まらないと取得できません。過去データの平均となるため、行った改善が即座にスコアに反映されるとは限りません。大きな改善であってもラボデータと異なり緩やかに変化していく点に注意が必要です。コウタ)Webフロント技術室、Node.js言語サポートチーム所属。Webフロントエンド黒帯。フロントエンドの横断組織で主にパフォーマンス改善や、開発のサポート、OSSへのフィードバック、ハンズオンなどを中心に活動。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。