5x SSR Throughput: Profiling SSR Hot Paths in TanStack Start | TanStack Blog
by Manuel Schiller and Florian Pellet on Mar 17, 2026. TL;DR We improved TanStack Start's SSR performance dramatically. Under sustained load (using our links-100 stress benchmark with 100 concurrent connections, 30 seconds): Throughput: 427 req/s → 2357 req/s (5.5x) Average latency: 424ms → 43ms (9.9x faster) p99 latency: 6558ms → 928ms (7.1x faster) Success rate: 99.96% → 100% (the server stopped
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
Mackerel MCPを使ってAIでISUCONを解いてみる - ぴょこぴょこブログ
この記事は Mackerel Advent Calendar 2025 の6日目の記事です。5日目は id:missasan で 子育て中でも K-POP カムバ初速を観測したいので、Mackerel にメトリックを送ってみた という記事でした。 Mackerel のMCPをご存知だろうか。GitHub - mackerelio-labs/mcp-server: Local MCP (Model Context Protocol) server for integrating LLMs with Mackerel.で開発が進められていて、現時点ではホストメトリックの取得やAPM系の統計情報の取得ができたりする。このMackerel MCPを利用してISUCONをAIで解いてみて、どこまでスコアを伸ばせるかを試すのがこの記事の主題。今回はISUCON9の予選を題材として使う。 結論としては、
ClineにOTel Trace signalをMCPで与えてISUCONをやってもらう - 対数犬度関数
MCP(Model Context Protocol)の策定によりCoding AgentやLLMに対して幅広い情報を与えられるようになりました。 であればOpenTelemetryのTrace signalなども与えられることになりますが、いくつかの疑問が浮かびます。 LLMはテキストとして表現されたトレースやメトリクスを解釈できるのか？ ウォーターフォールビューとして表現しないと解釈できないのでは？ トレースの内容を元に分析などはできるか？ この記事では、OTelのTrace signalについての処理を行うMCPサーバーを実装し、Cline + claude-3-7-sonnet-20250219に与えて ISUCON13 のパフォーマンス改善が可能か検証します。 結果と知見 JSONで返すだけでもトレースやメトリクスの解釈、分析は可能 ただトレースを全て返すとTokenが長大になる
実践Webフロントパフォーマンスチューニング
2025年度 traP新歓オリエンテーションのLTで発表した内容です。5分のLTなので1章のみを話しました。
Rustで進化するPayPayのスケーラビリティ
PayPayの6年の歴史の中で、私たちは急速な成長を遂げてきました。現在、6700万人以上のユーザーにサービスを提供し、日々数百万件の決済を処理しています。しかし、これを成功させるためには、トラフィックと信頼性の要求を満たすための技術的な挑戦が伴います。 PayPayは設立当初からJavaとNodeJSを採用しており、これらの技術は非常にうまく機能してきました。しかし、成長に伴いサービスをスケールアップする必要が生じ、これによりKubernetesクラスターでのCPUとメモリの使用量が増加しました。これにはサーバーコストの増加が伴います。 2023年末、私たちはコアサービスでのトラフィックをより効率的に処理する方法を模索し始め、GraalVMやGo、Rustなどさまざまな技術を調査しました。Rustは、その優れたパフォーマンスとメモリの安全性が保証されていることから、PayPayの多くのユ
DevTools の使い方を可能な限りスクショ付きで解説してみる
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
React Scan
React Scan automatically detects performance issues in your React app Previously, existing tools required lots of code change, lacked simple visual cues, and didn't have a simple, portable API Instead, React Scan:Requires no code changesHighlights exactly the components you need to optimizeAvailable via script tag, npm, you name it!
GraphQL BatchでクライアントN+1を無理矢理倒す (事例紹介:株式会社ハウテレビジョン様)
株式会社ハウテレビジョン様で、 質問箱サービスMondのパフォーマンス分析と改善を行いました。 内容としてはLCPの内訳の計測、その解決方法の提案、そして一番大きな問題だった GraphQL リクエストの最適化という話になります。 現時点で全ての問題の修正には至っていませんが、開発的には全ての問題の内訳が認識可能になっていて、検証が終われば段階的にリリースできる、という状態です。 以下、敬称略 相談内容 mond.how のLighthouseスコアを改善してほしい 主要な技術構成 Next.js - Page Router Hasura CE - GraphQL Server Hasura のセルフホスティング版 計測と問題 最近は Chrome が出してくれる Lighthouse スコアの推移が見れるダッシュボードがある。 ここで Mond の直近のスコアをみる。 代表例として ht
How Discord Reduced Websocket Traffic by 40%
At Discord, we’re always thinking about ways to improve our services and increase performance. After all, the faster our app gets, the sooner you can return to your friends and conversations! Over the last six months, we embarked on a quest to support this endeavor, working to reduce the amount of bandwidth our clients use, especially on iOS and Android, hoping that decreasing bandwidth usage woul
なんでbun installは速いのか？
A global install cache. bun installを実行すると ~/.bun/install/cache/ 以下にnpmレジストリからダウンロードされたファイルの実体が展開されキャッシュされる(--cache-dirでパスを変更できる)。 キャッシュにはパッケージのバージョンごとのディレクトリとlatestのシンボリックリンクがある。これらのファイルを使ってbun install時に該当するバージョンのダウンロードを省く(--forceで再ダウンロードする)。 このため一度bun installしてlockfileが作成されると次はオフラインでinstallを実行しても成功する。 node_modules/を削除しても~/.bun/install/cache/からファイルを取ってくるのでネットワークアクセスをしない。
How React 18 Improves Application Performance - Vercel – Vercel
Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step back to understand the basics of long tasks a
CPU シミュレータを用いて継続的ベンチマークを安定化させる - mizdra's blog
id:mizdra は eslint-interactive というツールをメンテナンスしています。このツールを使うと、多数の ESLint エラーを効率的に修正できます (詳しくは以前書いた記事を見てください)。 www.mizdra.net eslint-interactive では「中規模〜大規模なコードベースであってもキビキビ動く」を大事にしてます。その一環として、eslint-interactive には CI (GitHub Actions) でベンチマークを取り、以前から大きく劣化していたら CI を fail させる仕組みがあります。 https://github.com/mizdra/eslint-interactive/actions/workflows/benchmark.yml?query=is%3Afailure しかし CI で実行するためにノイズが大きく、よく
NestJS製GraphQLサーバの起動が遅かったので調査した話 - もうずっといなかぐらし
こんにちは、かたいなかです。 最近、NestJS製のGraphQLサーバでのSchemaからのTypescriptファイルの生成が遅い問題を調査する機会がありました。 今回の記事では、ツールの使い方等の自分への備忘録を兼ねて、どのように問題に取り組んだかを記事にして紹介します。 TL;DR 高速化するならまずは計測から。計測によるボトルネック特定が最優先。 フレームグラフが遅い処理を特定するのに超便利。Node.jsなら0xがフレームグラフ生成に便利。 @nestjs/graphql でGraphQLのスキーマからTypescriptのファイルを生成する処理が速くなった。 経緯 最近関わった案件では、BFFとしてNestJS製のGraphQLサーバをスキーマファーストで使用していました。GraphQLによるスキーマファーストな開発の恩恵は日々感じているものの、サーバの起動時や再コンパイルの
Rendering on the Web | Articles | web.dev
Published: February 6, 2019, Last updated: January 5, 2026 One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be difficult because there are so many ways to build a website. Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we encourage develope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sharkdp/hyperfine: A command-line benchmarking tool
Behind The Scenes of Bun Install | Bun Blog
react/fixtures/concurrent/time-slicing/README.md at main · facebook/react
あなたのパフォーマンスを倍にする Frontend Ops の傭兵はいかがですか
Keeping Figma Fast | Figma Blog
