あなたのReactまたはNext.jsアプリをプロファイリングし、数値で高速化します

遅いページがサインアップや検索トラフィックの損失につながっていると考え、現在のアプリを維持したい場合は、これを注文してください。ReactとNext.jsは、高速なアプリに必要なほとんどの機能をすでに備えているため、スタックを切り替えるのではなく、これらのツールをうまく活用することでパフォーマンスが向上します。

形容詞ではなく数値が得られます。LCP、CLS、INP、およびルートごとのバンドルサイズが、同じスロットル接続で前後で測定され、1つのテーブルにまとめられます。

Starterは1ページの監査です。実行、効果の高い順にランク付けされた発見事項が含まれ、コードは変更されません。Standardはその監査から始まり、残りの時間をそれらの数値を動かす修正に費やします。Advancedは最大5ルートをカバーし、レンダリングとキャッシングを調整し、CIにバンドル予算を残すことで、次のリリースで作業が静かに元に戻されるのを防ぎます。

作業はリポジトリのブランチで、コミットごとに、それぞれの理由を付けて行われます。私がデプロイすることはありません。

電話はしません。私と意見が異なる測定値を含め、すべて書面で行われます。

プロジェクトを完了するための手順
1. ユーザーが実際に得ているものを測定する - ライブページでのLighthouseと、遅いページでのReactプロファイラーセッションを、スロットル接続で実行します。LCP、CLS、INP、およびルートごとのバンドルサイズを、何も触れる前に書き留めます。
2. 最もコストがかかるものを見つける - バンドルとネットワークウォーターフォール: 誰も使用しないのに出荷されているもの、最初の描画をブロックしているもの、どのコンポーネントが再レンダリングされるか、その理由。すべての発見事項には、ミリ秒またはキロバイト単位での推定節約額が記載されます。
3. 修正する、最大の効果から - コード分割、画像とフォントの処理、レンダリングをブロックする作業、プロファイラーが要求する場所でのメモ化、クリティカルパスから外されたデータフェッチ。変更ごとに1つのコミット、それぞれに理由を付けて。
4. 並べて再度測定する - 変更されたビルドで同じ実行: 前後を1つのテーブルに、ルートごと、メトリックごとに。変更によって何かが悪化した場合は、テーブルにその旨が記載され、変更は元に戻されます。
5. リポジトリでの引き渡し - リポジトリ内のブランチまたはパッチ、レポート、および私がしなかったこととそれがどれだけの価値があるかの正直なリスト。デプロイはあなたの手に委ねられます。