Show HN：再利用可能なコードブロックを組み立てるIDE

Tetrees は、開発者が再利用可能なコードブロックを組み立てることでコーディングを加速するAI IDEです。最近、チームはアプリの初期読み込みエクスペリエンス、特にコールドスタート時に発生するホワイトフラッシュの最適化に注力しました。

ユーザー行動の分析により、有料広告クリックからアプリが完全に読み込まれるまでに、特にソウルのAWSリージョンやカナダ/北米のモバイルデバイス、Redditアプリ内WebViewで2～5秒の空白時間が発生していることが判明しました。Clarityの録画とログ分析により、この時間帯にユーザーが高い頻度で離脱していることが確認されました。

この問題を解決するために、チームはいくつかの重要な技術的改善を実施しました。まず、重要なスタイルを外部スタイルシートに依存するのではなく、HTMLのheadセクションにインライン化しました。これにより、ブラウザが外部リソースをダウンロードする前に、HTMLパーサーがインラインスタイルを処理できるようになり、最初のバイトが到着した時点でTetreesのブランドカラーである深い緑色の背景が即座に描画されます。これにより、ネットワークの追加コストをほぼかけずにホワイトフラッシュが完全に排除されました。

次に、ファビコンをSVGからPNG形式に変更しました。16×16サイズではSVGの細いブラケットのストロークが「T」の形に潰れてしまうため、PNGの方がクリアに表示されます。また、ブラウザの無限ファビコンキャッシュをリセットするために、クエリパラメータ（?v=）を追加しました（HTTPキャッシュヘッダーだけではリセットできません）。

さらに、スタイルシートをindex.htmlから分離し、/publicディレクトリ経由で提供しました。これは、Vite 5のhtml-inline-proxyプラグインがインライン<style>ブロックの処理に既知の問題を抱えているためであり、独立したスタイルシートはCDNキャッシュが効き、メインのJSバンドルよりも先に並行ダウンロードされます。また、fetchpriority="high"を設定することで、タグ管理ツールのアセットよりも優先的に読み込まれるようにしました。

ローディングアニメーションのテンポ（1.2秒）はアプリケーションローダーと一致させており、ReactがDOMをコミットした後、ユーザーにシームレスな遷移体験を提供します。

これらの最適化により、Tetreesの初回読み込み体験が大幅に改善され、ブランドカラーが広告クリック直後の最初のフレームから表示されるため、直帰率が低下し、ユーザー満足度が向上しました。