#443 フロントエンドパフォーマンスチューニングができるやつ、モテるらしいぞ！[己を知る編]

この番組は、エンジニアの成長は楽しい学びからをモットーに、昨日より少し成長できる学びを届ける、エンタメ系テックラジオです。

ほい。

お願いします。

さあ、やっぱ1番のエンタメといえば、やっぱりモテることだと思うんですよね。

エンタメですね。

エンタメ。

あ、そうなんですか。

エンタメなのかな。

エンタメじゃないかな。

エンタメか。

まあ。

恋愛リアリティーショーが流行ってるのはそういうことなんですか。

そういうことっすよ。

ああ、なるほど。

うん。で、やっぱエンジニアってこういっぱいコード書くじゃないですか。

はい。

じゃあ、えーとどうやったらモテるコードが書けるんだろうってことでですね。

ほう。

僕は気づいてしまったんですよ。

うん。

やっぱ早く動作するコードを書いてこそ、モテるエンジニアだなっていう。

パフォーマンスチューニングですか。

さようでございます。

ほう。

やっぱさ。

まあモテますよ。

小学生の頃ってさ、足速いとそれだけでもうモテるじゃないですか。

うん。

そうですね。

うん。まあそれと同じですよね。

速さこそ正義でしたね。

そうなんですよ。で、エンジニアはタイピングの速さと見せかけて、実はやっぱね、実行するコードの速度がね、大事だと思うんすよね、僕は。

なるほどね。

なるほど。

おお。

ということで今日はですね、結構深掘りフロントエンドパフォーマンスしてこうかなと思ってます。

おお、ありがたいな、それは。あんまり、なんだろうな、なんか今まで仕事をしててフロントエンドのパフォーマンス、課題になったことがないから真面目に考えたことがないかもしれない。

ですよね。ちなみに僕もね、あのーフロントエンドのパフォーマンスチューニングは業務ではやったことないっすね。

うんうんうん。

うん。

で今回あのーちょっとその、このテーマにした理由なんですけど。

はい。

最近強くなりたいと思って。

うん。強くなりたいっす、俺も。

そう。で、AIに、あのー質問を、質問じゃないや、問題を出しまくってもらってんのね、今。

とにかく?

とにかく。

エンジニア系の問題を出してもらってると。

そう。

変わった趣味をお持ちですね。

すごいでしょ。友達いない人みたいだよね。

いやまあ、そうかもしんないですね。

ね。で、まあその結果ですね、俺フロントエンドのパフォーマンスなんも知らないってことに気づいて。

うん。ああ。

いろんなもん、いろんな問題を出してもらった上で、なんかバックエンドとかインフラの部分は結構答えれると。

うん。

で、フロントでやっぱ太刀打ちできないなってことでですね。

うん。

今日はちょっと、えーそんなパフォーマンス改善の話をしていくということで。

ほう。

はい。もしかしたら前後半に分かれるかもしれないっす。

分かれないかもしれないと。

分かれないかもしれないっす。

ちなみにフロントエンドのパフォーマンスチューニングって。

はい。

SEOとかでも求められるんすかね?

あ、SEOは関係ありますよ。

SEO以外になんかあるんすかね?

あれじゃない? リダツリストとかにも関係あると思うよ。

うん。まあだから。

うん。

Google検索されて利用するページに求められる。

うん。

って感じなんすかね?

そうだね。

うんうん。

うーん。

まあ特にやっぱC向けのサービスではすごい気をつける必要がある部分なんじゃないかなっていう。

うんうん。

なるほど。この話を聞いて習得すれば彼氏彼女ができるかもしれない。

めちゃくちゃできると思う。

めちゃくちゃできる?

いや1人でいいんじゃない? 分かんないけど。

めちゃくちゃできると思う。

めちゃくちゃできちゃうんすよ。

うん。まあまあカルチャーによっては、はい。

あ、すごいな。

うん。めちゃくちゃできると思うわ。はい。頑張ります。

まあということで、あのじゃあパフォーマンス上げようってなったときにいきなり速いコードを書こうとするのはね、ちょっとまだ愚の骨頂ですね。

うん。

うん。まずはパフォーマンスがいいとは何かを知らなきゃいけない。

おお、気になりますね。

うん。適応を知り、己を知らば百戦危うからずってなんか昔の偉い人が言ってそうですよね。

孔子とか。

はい。

言ってそうですね。

言ってそうですよね。

うん。

すごいっすね、この、そこ言ってるって断言しないあたり、なんかすごい歴史を重んじる、その性格が垣間見えてますね、なんか。

そうなの?

そんな意図あったのかな。

歴史を大事にしてるみたいな。

ああ、そういう感じなんだ。歴史を重んじるとそうなっちゃうんだね。

そうなっちゃいますね。

なるほどね。まあちょっと今回はですね、あの歴史よりもパフォーマンスを重んじて、まず最初にパフォーマンスを測る指標についてお話ししていこうかなと思ってます。

気になりますね。

はい。で、これあのーもう名前決まっててCore Web Vitalsってやつなんですけど。

ほう。

聞いたことはありますか。

あんまないっすね、僕は。

ありません。

まあバイタルといえばね、あのー人間でいうなんか心拍とか血圧とか、そういうのバイタルサインっていうと思うんですけど。

はい。

まあこういうウェブにおける生命活動。

うんうん。

これを測ることによって、えーとパフォーマンスに対して定量的に測っていくことができるだろうと。

うん。

うーん。

いうわけですよ。で、このCore Web Vitalsはですね、今は3つの指標があります、その中に。

ああ、分かりやすくていいっすね、なんかあんま多くなくて。

そうだね。で、しかもね、これなんかその結構アップデート細かく入ってて。

はい。

新しいやつとかだと2024年だか2025年とかにね、更新されてましたね。

へえー。今更何が出てくるんだ。

ね。もうGoogleがさ、ずっともうブラウザもやってさ、検索エンジンもやって、もうアナリティクスもやって死ぬほど計測してきてるだろうに、このタイミングで変わるんだと思ったんすけど。

うんうん。

ってことで、まあそのまず3つから紹介していきます。

はい。

1つ目、LCP。なんでしょう?

LCP?

リード、リード、リードコネクションパーフェクトリー。リードコネクションパーフェクトリー。

はい。

接続をね、率先して完璧にこなすやつ。

完璧、はい。

まあ、頭文字は合ってるわ。

あ、LCP。

頭文字のりさんが言ったんだもん。

LCPですか。

頭文字合ってる、うん。

うん。

欲しい。正解はね、Largest Content Paintっすね。

ペイント?

ペイント。

ペイントって、あのペイントですよね、あの塗るみたいな。

あの、あ、そうそうそうそうそう。

1番でけえコンテンツの描画?

そう。

どういうこと?

これはですね。

ちっちゃいほどいいってこと?

いや、えっとね、そいつが速いほどいいってことっすね。

ああ、1番でけえコンテンツ読み込むまでの時間ってことか。

そう。

うん。

で、もっと厳密に言うと、そのでかいコンテンツってのは、えっと映ってる範囲ね、ファーストビューで。

はいはいはいはいはい。

うーん。だからそのファーストビューの、えーまあその面積、なんだ、表示されてる面積のところビューポートっていうんですけど。そのビューポート内で1番でかい要素が読み込み完了するまでの時間のことをこのLCPと言いますと。

うーん。

で、えーなんでこれを測るかということなんですけど。まあ要するにですね、ユーザーって1番でかいコンテンツが表示されたら、主役が来たぜって思うわけなんすよ。

まあなんか大体出たなって思いますよね。

あ、そうそうそうそうそうそう。

うん。

で、これってだから、あのーまあユーザー体験的にはもうほぼ読み込み完了したっていうのはこれで認識できるんで。

うんうん。

このタイミングを計測してると。

なるほど。

うん。

うん。

まあまずはこれを測っていきましょうと。で、えーその次、2個目。INP。

INP。Pはペイントですか。

Pはペイントです。

うーん。

IN。Iは多分修飾語だからNなんだよな。Nをペイントすんだよな、多分。

ああ、まあ。

Nって何?

そうっちゃそう。

Nってなんだ? 何がある?

あるぞー。

何ぬねの。

いや、これね、でもね、むずいぞ、多分。

ああ。

むずいんだ。

むずい。

インターネットペイント。

インターネット?

うん。

インターとネットで分けちゃった?

インターナル、インターナルなんかじゃないっすか。ネットワーク? 違うな。N? わ、分からん。

これはですね。

店舗的にいきましょう、はい。

インタラクショントゥネクストペイントです。

ネクストペイント?

はい。

うん。

どういうこっちゃい?

なんか下にスクロールしたときとかですか。

あー、いや、えっとね、というよりは、まあこれどっちかっていうとそのJavaScriptとかの、あのー動き、動きを測るに近いかな。例えばボタンを押したらさ、なんかバーってアコーディオン開いたりとかさ。

うん。

ハンバーガーメニュー開いたりとか、そういうのあるじゃないっすか。

うん。

うん。そういうアクションしてからそれが描画されきって、次ユーザーが操作できるようになるまでの時間。

うーん。じゃあそこのコンポーネント読み込み終わるまでの時間、みたいな感じですか。その、例えばハンバーガーメニューだとしたら。

うん。

なんか内部的には読み込むじゃないっすか。そのなんだ、実際にクリックしてから読み込むわけじゃないっすよね、あれは。

ああ、まあそうだと思うよ、うん。そうね。

で、それで内部的になんか読み込み終わるまでの時間ってことですか。

まあそうだね。てかまあその動作が完了してユーザーが次操作できるようになるまでの速さじゃないかな。

それは。

うん。

どのインタラクション、ネクスト、なんだっけ?

えー、インタラクショントゥネクストペイント?

インタラクショントゥネクストペイント。

うん。

ど、どのパーツの部分測るんすか、全部?

あ、えっとね、いいところに、いい質問っすね。えーと全部っちゃ全部っす。

ああ、じゃあ全部のそういうやつ読み込むまでの時間を測るってことなんすね。

そう。で、えっとただ全部測るって現実的じゃないじゃないっすか。なんかそのページ内にインタラクションってめっちゃあるじゃん。

うん、ありそう。

で、えー別にGoogleがそのインタラクションを全部実行して測ってるわけではないっす。

なんだ、上から3つみたいな?

ああ、近い。えっと、あーまあ、あ、違うわ、近くなかった。えっと、えっとね、まずフィールドデータっていう概念があって。

うん。

うん。これは日々ユーザーが扱ってく中でGoogleが計測してる値。

うん。

で、えー基本的にはそのフィールドデータを大量に収集して、まあそのページの全インタラクションだとしてると。

うん。

で、それを98パーセンタイルの基準で並べて。

うん。

えーとー、その98パーセンタイルの位置にあるやつが、えーと何秒だっけな。まあそこの秒数でね、測ってますね。

その98パーセンタイルで並べてるのは何順で並べてるんすか。

えっとね、動きが速い順っすね。動作が速い順。てか時間が短い順か。

速い順に並べて98パーセンタイルっていうのは、遅いやつの上位2パを弾いてってことっすかね?

うん。そう。

ああ、なるほど。

うん。だから全てのインタラクションをこう順番にな、速い順に並べていって、えー98番目、まあ100個並べた場合は98番目にあったやつの数値を基準にしてる。

うん。なんか結構ちゃんとやってますね。

結構ちゃんとやってますね。

うん。

そうだよ。だってもうGoogleさんですから。

すげえな。なんかもうちょっと妥協しても良さそうな気持ちになっちゃうけど、なんかちゃんとしてますね。そこのなんか98にしてるのもなんか理由あるんだろうな。ちゃんと統計を取った結果、なんか外れ値って多分1パーセントとかで。

うん。

バッファコメディア2パ取ってもまあ外れ値当たんないよねみたいな。

うん。

そんな感じなんでしょうね。

ね。

うん。

まあでも98パーセンタイルだいぶ厳しい基準だと思いますけどね。

うーん。

まあ要はほとんどの動作がめっちゃ速くないといけないっていう。

うんうんうん。

うん。で、元々はこれ、あのーFIDっていう基準を測ってたんですよ。

どんどん出てくる3文字。単語。

どんどん出てきます。で、これはえっとーFIDがね、First Input Delayなんですけど。

うんうん。

まあこのFIDはね、今のそのINP。INPはあのーフィールドデータでもう大体のアクションを集めるって言ってたんですけど。FIDはユーザーが最初に起こすアクションのインタラクティブの速さをチェックしてる。

うん。

うん。

うん。

なんで。

ユーザーが最初に起こすアクションって、明示的に決まってるってこと?

あ、いや。えっと、いや、えっとね、決まってない。ユーザーによって何するかは違うと思う。

あ、で、その何するかを見た上でそこを測るってことなんですね?

そうそうそうそう。で。

えー、めんどくさいことやってたんだな。

当時は、えっとー第一印象で感じるサイトのインタラクシ、インタラクティブ性を測ってたっていう。

まあ合理的に聞こえるな。

うん。まあでもこれだと、まあ第一印象良くても、あとがぐだぐだのサイトもあるよねみたいな。

うんうん。

うん。っていうところで、えー今はもっとたくさん取ってるよっていうイメージっすね。

すげえな、そんないっぱい取れんの。

ね。どんなデータベースしてんだろうね、マジで。

うん、ほんとに。

ユーザーとかね、何億人もいるでしょ。

うん。

まあこれが2つ目の指標ですと。で、3つ目の指標、CLS。

CLS。

1個目、これ。どういう意味の英語なんだろう。

なんだろうね。

これね、フロントでたまに聞く単語ですね、でも。

そうなんすね。

うん。

ステータスか。ステータスだとしたらなんだ。

ちなみにステータスではないです。LSでセットで聞くかも。これはですね、Commutative Layout Shift。

え、Commutative?

うん。Commutativeは累積ですね。

へえー、知らなかった。で、Layout Shift。

コミュラティブかな、発音、これ。コミュレ。ちょっとだめだ、発音記号読めねえ。

Layout Shiftって、何、そのスマホにしたとき、スマホを描画にしたときちゃんと動くよねみたいな話?

うん。あ、いや、Layout Shiftはね、あのーガクガク動くやつっすね。例えば。

何それ、ガクガク動くやつって。

ページ表示するじゃないっすか。

はい。

で、画像があとから読み込まれて。

うん。

で、画像の分だけ高さ変わっちゃうみたいな。

ああ、はいはいはいはい。

たまに見るじゃないっすか、そういう動き。

見ますね、はい。

あれのことLayout Shiftっていうんすよ。

へえー、知らなかった。

だからあのーそういうLayout Shiftっていう現象起きると、まあやっぱカクカクしてたら使いにくいよねっていうところを、えーとまあバイタルにしてるって感じっすね。

ふーん。

で。

どういう点数付けすんだろう。

これはですね、えー、まあ細かい計算式、ある、あって、検索すると出てくるんすけど。まあざっくり言うと、えー、がっつり動く要素があると危険。

うん。

で、そのがっつり動く要素がさらに面積でかいとなお危険っていう。

うんうんうん。

まあそんな感じで思ってもらえればいいかなと思います。

うんうんうんうん。

で、これも。

なんかこいつだけあれですね、そのスピードじゃないですね。

そうだね。まあどっちかっていうとその使いやすさみたいなところかな。

うん。

だからこのCore Web Vitalsって、まあパフォーマンスだけというよりは、えっ、まあパフォーマンスっていうものっていうよりは、どっちかっていうとユーザビリティの計測値に近いかもしれないね。

うんうんうん。で、その2/3がパフォーマンスだと。

まあそうだね。

うん。

うん。で、このLayout Shiftは、えーと計測期間はね、もうずっと、っていうかそのページにいる間中ずっと計測されますと。

うん。

うん。で、ただ、えーそのなんでしょう。うーんと全部を送ってるわけではなくて。まあ短期間に連続して起きたLayout Shiftを1つにまとめて送ってるっていうふうに書かれてて。まあだから大体初期描画のときのが多いのかなって気はするんですけど。まあもしかしたらスクロールしてってそれでガタガタ動くケースとかもあり得るかもしれない。

うんうん。

で、ただし言いずれってのも実はあって。

ほう。

これは計測しないようになってるんすよ、賢いことに。

言いずれとは?

言いずれ。例えば、えー、まあそれこそさっきちょっと例で出てきたボタンを押したら開くアコーディオンみたいな。

うんうん。

これもLayout Shiftには入るんすね。

へえー、なるほど。

現象としては。ただ、それって別にユーザーがさ、こうやろうとしてやった行為だし。別にサイトの作りとしても悪いものじゃないじゃないっすか。

うん。

要は開きたい人だけ開けば、あの最適な見せ方できるよねっていうコンテンツだと思うんで。まあなので、えーとユーザー操作から0.5秒以内に起きる変化に関しては計測しないっていう。

へえー、じゃあなんかほんとにガシャガシャガシャガシャ、ウィーンガシャン、ガシャンみたいなのに2秒って書かれると怒られるんすね。

そう。が、勝手にガシャガシャ動いたら、えーとアウトですね。

うーん。

ただ、Transform使ったCSSアニメーションはセーフです。

へえー、タグで指定されてんすね。

タグというかね、CSSのスタイルかな。

あ、スタイルなんすね。

うん。

はいはい。

で、これはね、あの描画の仕組みって実は3、3、ん? 3ステップ踏んでるんすけど。

うん。

えー、例えばそのCSS読み込むじゃないっすか。で、CSSってさ、なんかいっぱいあるじゃん、プロパティ。

いっぱいある。

なんですけど、あれって実は順番決まってるんすよ、実行の。

へえー、あ、ん? えっとー。なんだ、タ、タグ、タグ、タグごとにっていうわけではなく?

タグごとにじゃなくて、えっとプロパティごとに決まってる。

プロパティっていう意味で。

あ、プロパティごとに決まってるんですね。

うん。

で、プロパティって言ってるのってあの、あれですね。

えー、heightとか、withとか。

あ、そういうやつですね。はいはいはいはい。

Transformとか、そのへんのやつ。で、え、どれに属するかによって3パターンあって。最初にこれってあの場所を計算するんですよ、大きさとかを測って。

うん。

で、その次に色付けたりとか、そういうペイント的なことするんすね。で、最後レイヤー重ねるみたいなことするんすよ、透明度付けたりとか。

うんうん。

Transformもそのレイヤーで言うと、えー最後の、えーレイヤー重ねる部分にあたるんですけど。まあなので、えーその最後の、えーとレイヤーの仕組みに関するCSSを使ったアニメーションは、えーレイヤーとシフトには含まないらしい。

ふーん。まあじゃあ。

うん。

結局明示的にやろうと思ってやったレイヤーとシフトは含まないってことですね、パブ？

そうです、そうです。

パブ？

うん。

っていうのがまずこの、えーとパフォーマンス測る上で、えー結構基準に良くなる指標ですと。えーまずLCP。First Viewで1番でかいコンテンツが読み込み完了するまでの時間。で、2つ目がINP。えーこれは、えっとアクションしてからユーザーが次にす、操作可能になるまでの時間。で、CLS。これがレイヤーとシフトの量。っていう、まあこの3つでパフォーマンスってのを測ってますと。

うん。

じゃあ具体的にそういうのってどうやって計測するのっていうので、ちょっと測定方法次行こうかなと思います。

はい。

で、測定方法なんですけど、まあ代表的なツールはですね、4つあります。

結構多いっすね。

メジャーどころは。まあほかにもきっといっぱいあるんだろうけど。えー一旦Googleが出してる系のツールがほとんどかな。1つ目、Lighthouse。

Lighthouse？

はい。Lighthouse使ったことあります？

ないです。

あ、マジっすか。

うん、ないと思います。

あ、マジで？

あるな。

あのーブラウザのさ、なんか、えー開発者ツール、デベロッパーツールのさ、えーとね、なんかタブを右側のほうに行くと。

いますよね。

Lighthouseっていうんですけど。こいつは、えーまあChromeについてる診断機能っすね。まあChrome以外でも付いてんのかな。ちょっとあんまChrome以外あんま使わないからわかんねえな。

うーん、使ったことありました。

あったかい。

うん。

で、こいつはざっくり、えー今開いてるページが、あのー4つの観点で何点なのかっていうのが計測できます。

うん。

で、その4つの観点が、えーまずパフォーマンス、速さ的なとこっすね。で、あとアクセシビリティ。で、アクセシビリティは多分基準があるはず。なんか、あのー文字間こうじゃないといけないとか。ズームを禁止してはいけないとか、なんかそういう系のものがいっぱいあると思うんですけど。

うん。

まあアクセシビリティも計測して。あとSEO的にどうなのかっていう点数と。あとベストプラクティスっていうこの4つの観点で計測してますと。

うん。

で、個人的にまあパフォーマンス、アクセシビリティ、SEOは結構わかりやすいかなって気がするんですけど。ベストプラクティスって何って思ってたんですけど。

なんかふわっとしてますね。

ね。まあでもこのへんはね、あの聞いたら、ああなるほどって感じなんですけど。まあセキュリティとか。あと、まあモダンな技術ちゃんと使ってるかみたいなところとかをチェックしてるっぽいっすね。

じゃあその項目にしてくれよって思いますけどね。

あのーでもね、めっちゃいっぱいあります、チェック項目。

まあでもそうですよね、はい。

うん。で、その中でもまあWebでよくベストとされてるやつが使われてるかどうかっていう観点なんでしょうね、ここは。

うん。

まあこれがLighthouseですよと。で、これは点数はわかるけど、あ、点数わかるし、あと具体的に何直したらいいかとかも出てくるけど。まあある程度結構レポート形式で出されるようなものですね。なんで、まあパフォーマンス直そうってなったときにまず最初に実行する可能性高そうなツールだなって気はする。

うん。まあ気軽にやれそうですね。

そうそうそう。ボタン1つ押して待ってるだけなんで。

うん。

で、続いて2つ目。これも似てるんですけど、ページスピードインサイトっていうウェブサイトがあります。

うーん。ウェブサイト、はい。

はい。で、これは、えーとーまあLighthouseに結構近くて。まあそのサイトを解析してパフォーマンスどうなのっていうのを分析するんですけど。

うん。

Lighthouseと違うのは、えーとLighthouseって、えーそのブラウザを、なんて言うんだろうな。まあユーザーが訪れたかのように1回その場で再現して仮想的に。それで点数計測するんすよ。

うん。

で、そうじゃなくてページスピードインサイトのほうは実際のそのユーザーデータってのも収集してるそうです。

へえー。なんかGoogleアナリティクス見もあるみたいなイメージですか。

うん。いや、これ、それ専用のサイトだったと思うよ。

へえー。

これはGoogleがやってんのかな。まあサイトの見た目は、ああGoogleですね、やっぱ。うん。Googleがやってるんで、まあやっぱサイトのデータは取れてると。なんでLighthouseのそういうラボ的な機能プラス、えーと実際のユーザーデータも含めてパフォーマンス分析してくれるページ。ページというかサービスですね、これは。

じゃあ開発中はLighthouse使うけど出したあとはその、何？なんて言いましたっけ？

えーとページスピードインサイト。

ページスピードインサイトを使うみたいな。

うん。

世界分けかもしれないって感じですね。

そうだね。で、えっとなんでこれあのーリリースしたばっかとか、アクセス少ないサイトとかだと、まあ十分なそういうデータが集まってないケースも多いんで。まあ十分トラフィック集まってから使うようなツールになるかなっていう感じっすね。

うん。

うん。

そいつも無料なんすか。

これ無料です。

へえー、すげえなGoogle。

すごいよね。もうサイトにあのURL貼って使うだけっすね、これ。

すげえな。

あ、そう。だからあのローカル開発とかもここでは使えないね、だから。Lighthouseなら使えるけど。まあそういう違いがありますと。で、3つ目。ChromeのDevTools。まあこれあの要はデベロッパーツールっすね。

ここに来て。

まあここに来て。まあLighthouseとかぶってるやんって感じなんですけど。まあLighthouse以外の部分だと思ってくれればいいと思います。

うーん。なんか測れるものありましたっけ？ネットワークでAPIとの通信見れるよねぐらいですか。

あ、そうです、そうです。えっとネットワークで例えば、えーとーまあリソースがどの順番で読み込まれて、それぞれ何秒かかってて、えー待ちの時間どれくらいだったかみたいなのとかが細かく出ますね。

ああ、はい。あ、確かに描画のやつも出るか。

そうそうそうそう。で、あと、えーあれも出るかな。あのー使われてないCSSとかJSがどこなのかみたいなのも。

コンポーネンツとかで見えるんすか。なんかどこで見えるんでしたっけ？

えーっとねー。下のほう。

あるな。なんか。

なんか。

スタイルじゃねえな。なんかHTMLとかCSS出るやつですか。

あ、そうそうそうそう。なんだろうな、あれ。あのーど、多分Elementsだったような気がすんだけど、タブ的に。

あ、Elements、はい。

でもElementsのなんか下半分ぐらいに出てるイメージ。

うんうん。

まあそういう、あの具体的な数値見るってなったらChrome DevToolsがいいっすね。

うん。

さっきのまあLighthouseとかってやっぱあの画像でかいよとかそういうのはわかるけど。まあ細かい計測値見るってなったらやっぱChrome DevTools使うしかないんで、ほかの機能というか。

ああ、そういう使い分けか。なるほどね。

うん。で、まあ採点がLighthouse、より細かいところをDevToolsで見てくって感じかな。

うん。

うん。そして4つ目。WebVitals.js。

うん。おお、なんだ。

これはね。

Chromeじゃないやつ。

これはもうブラウザの機能ではなく、えーとJSのライブラリですね。で、えーこれもね、なんと提供してるのGoogleでございます。

あ、Googleなんだ。

うん。もう寡占市場だね、こんな。すごいよ。

すごいね。

で、こいつは、えーさっき指標で言ったCore Web Vitalsを計測できるっていうライブラリですね。

うーん。

まあなんでサイトに埋め込んで運用しておくと生データが取れるっていう、そういうVitalsの。

えっとーGoogle経由するのと何が違うんでしょうね。

うん。まあより厳密に取れるんじゃない、多分。

ってことなんすかね。

うん。

中身が。

と思いますけどね。

まあ重くなったりしそうだけどしないってことなんだろうな、きっと。

一応軽量なJSライブラリとは言われてますね。

うん。

で、多分これ極限まで機能を削ってると思うんですけど。あの生データ収集するけど、えー分析はできないんですよ。このツール単体だと。

うん。

だから基本的にはこっからGAとかDataDocみたいなモニタリングツールに収集したデータを送って、そこで計測するっていう感じになりますね。

へえー。じゃあなんか収集するものをチューニングしたりできたりしそうなんすかね。

しゅ、ああ、できるかもね。

うん。

うん。

なんか使い方的にそういうことやりたいんだろうなって感じしますね。

そうね。まあど、どっちでやるんだろうな。もう全部送っちゃってDataDoc側でやるとかも全然ありそうな気もするけど。

うんうん。まあそうっすね。

まあでも計測にすべてを置いてるので、多分軽量なんでしょうっていう感じではある。

うんうん。

っていうので、えーまあ今指標と測定の方法のお話をしたんで。

うん。

えーこっからがメインですよ。じゃあどうやって改善してけばいいのっていう話っすね。

うん。これを、はい。

次回やってこうと思います。

そうですね。

あのー。

ぴったり。

とんでもないボリュームなんで、ここが。

己。

あ、そうなんですね。

はい。己を知る編ですね。

己を知る編。なんでまずは今日は、えーとフロントエンドのパフォーマンスってどうやって測ってるのっていうところでこういうVitalsがあって。で、えー指標、あー指標じゃねえや。計測するならこういうツール使えますよっていう話ですと。で、次回はちょっとこれらを使って、えーじゃあどういうふうに、えーどういうふうなその我々はスピードアップ施策ができるんでしょうかというお話をしてこうかなと思っておりますので。

気になるねー。

はい。

お楽しみに。

お楽しみに。

バイバイ。

いやいやいや、締めのやつはやります。

あ、違います。うん。

締めのやつはやりますよ。はい。ということで、えーこの番組では皆様からの感想だったり、えー間違えた。この番組では皆様からの感想をSNS、Xのハッシュタグ、ひまじんプログラマーで募集しております。で、えーとちょっと昨日ですね、あのそのハッシュタグで検索したら。最新のほうが急になんか全然関係ないやつで汚染されて何も見つけられなくなってたんですけど。まあなんとか気合で見つけたいと思うのでよろしくお願いします。

どういうこと？知らないけど。

いやなんかね、ハッシュタグの機能バグってたんじゃないかなって気がする。

ああ、Xか。そういうことっすね。

うん。なんかどのハッシュタグで検索しても関係ないポストめっちゃ出てきてた。

へえー。へえー。今はなんか直ってそうだな。

あ、そうなんだ。

はい。

昨日だけかもしんないっすね。

うん。

はい。なのであの皆さん感想お待ちしておりますのでお気軽にどうぞ。

お願いします。

えーまた僕らに何か質問したいこととか、えー相談したいこととかあったら、あの気軽に、えーと番組の説明欄にあるGoogleフォームからお送りいただけたら。えーちょっと時間はかかるかもしんないんですけど、なるべく回答していこうと思ってるので、ぜひともよろしくお願いします。

お願いいたします。

お願いします。また、えーオンラインSlackコミュニティ、ひまプロ談話室というものを、えー我々実は運営をしております。で、こちらではですね、えーエンジニアの皆さんが集まってエンジニア友達を見つけたりとか、えー切磋琢磨したりとか。まあ特徴としてはなんかあれですよね。今日僕これやりますみたいな、なんかこう宣言みたいなのをして、それがこう高め合ってる感じになってますよね。

そうっすね。なんかあの人こんなのやってんだなってお互いに思いながら、じゃあやるかってやってる人。

うん。

が今メインの使い方かもしれない。

ね。あと僕が楽しみなのは健康情報っすね。

ああ、楽しみ。

はい。今日ちょうど花粉症の情報があったんで。今年はかゆみを抑えていこうかなと思ってますんで、よろしくお願いします。

頑張ってください。

はい。で、こちらあの気になった方はですね、えー番組の説明欄のところにお申し込みフォームございますので。えーそちらからお送りいただけたら、えーまあ約1週間を目安にメールをお送りしますので、そちらからご参加ください。

はい。

はい。

Slackの招待が飛びます。

飛びます。また、最後に、このポッドキャスト番組は各種プラットフォームで配信しております。ぜひとも、あ、この参考になったよとか、ありがとうっていう声を届けたいよって方は、ぜひとも評価のほど、ほどよろしくお願いします。

お願いしまーす。

待ってます。

それではまた次回。

バイバイ。

このキーボードは一生もの。ハッピーハッキングキーボード。公式LINEスタンプ販売開始。