Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog

フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.

[takehora]

"実行環境とユーザーの環境に差があると実態に即していない結果を表示してしまう可能性があります。" 品質管理の基礎を学ぶのが先なのでは… Synthetic Monitoringは変数を固定化することで、原因を特定するのが主たる目的

[kurosame-th]

参考になる、超速本も読まないとなー

[braitom]

Chrome DevToolsのPerformanceパネルの項目の見方について。

[Nyoho]

参考になる。

[efcl]

Chromeの開発者ツールのネットワークパネルやパフォーマンスパネルの読み方について。 スクリーンショットを元にそれぞれの要素が何を表しているかを説明している

[snaflot]

“Performanceパネルで Network: Fast 3G，CPU: 4x slowdown を選択し，CPUやネットワークを低速化した環境をシミュレーションして計測を行っています”

[kefi3104]

Chrome DevToolsを用いたメルカリWebのパフォーマンス計測

[rikochanhayatokun]

なるほど

[yoiIT]

“Performanceパネルで Network: Fast 3G，CPU: 4x slowdown を選択し，CPUやネットワークを低速化した環境をシミュレーションして計測を行っています”

[gnufrfr]

ほええ

[atuyesaman]

あとで読む

[assaulter]

メル社もおすすめ超速本

[rmanzoku]

“「超速！Webページ速度改善ガイド」”