世界を動かす技術を、日本語で。

なぜGitHubのUIは遅くなっているのか?

概要

GitHubのUIが以前よりも著しく遅くなっている現状について指摘。 特にPR画面のタブ切り替え時のパフォーマンス低下が顕著。 クライアントサイドルーティングの実装が本来の目的に反しているとの批判。 大量DOMノードの描画やSVGアイコンの非効率利用など、技術的課題も言及。 GitHubのロードマップにパフォーマンス改善の兆しが見られるかを検証。

GitHub UIのパフォーマンス低下への疑問

  • 最近のGitHub UI に顕著な 速度低下
  • 以前は 高速だった操作 が、現在は 著しく遅延
  • 開発者自身も GitHub上で開発 しているはずなのに、 この問題に気付かないのか 疑問
  • 遅いウェブサイトに遭遇した場合の DevToolsによるプロファイリング 推奨

PR画面での具体的な事例

  • PRの「Conversation」タブから「Files changed」タブへの 切り替えに5秒以上
  • Turboによるプリロード とクライアントサイドの コンテンツ差し替え を採用
  • 通常は パフォーマンス向上 目的だが、 逆効果 になっている事例
  • 新しいタブで開く方が2倍速い という逆転現象
  • クライアントサイドの 後処理がサーバーからHTML取得より遅い という本末転倒な状態

クライアントサイドルーティングの問題点

  • 新しいローディングバー の導入が、遅さを強調する結果に
  • SPA(シングルページアプリケーション) の本来の目的である 瞬時の画面遷移 が失われている
  • フルページリロードに近い体験 を再現しているが、 むしろ遅い
  • クライアントサイドルーティング の意義を再考する必要性

その他のパフォーマンス問題

  • 複数PRやIssueの閲覧 が苦痛になるレベルの 遅延
  • 20件のPRを確認するだけで 毎回5秒以上待たされる 非効率
  • Diffビュー での 2秒間のフリーズSVGアイコンの大量インライン描画
    • 数千個の 見えないプラスボタン をレンダリング
    • 100,000個のDOMノード 描画によるウィンドウ全体のフリーズ
  • DevToolsウィンドウのリサイズ でも3秒間の応答停止

パフォーマンス改善の展望とGitHubロードマップ

  • 人気Issue の多くが パフォーマンス関連
  • GitHubの ロードマップ に「Platform collaboration at scale」などの 関連分野 が存在
  • パフォーマンス改善に関する具体的な記載 が見当たるかどうかの検証が必要

JavaScriptパフォーマンス最適化の基本

  • JavaScriptのファイルサイズ最適化 による 読み込み速度の向上
  • DOMノード数削減 による 描画パフォーマンスの改善
  • アイコンや画像の再利用無駄なレンダリングを回避
  • クライアントサイド処理の見直し による 即時応答性の確保
  • 不要なイベントや再計算の抑制ブラウザ負荷を軽減

Hackerたちの意見

GitHubのパフォーマンスは、彼らがすべてをReactで書き直し始めてから急激に悪化してるよ。今はdiffを表示するのがほぼ不可能で、読み込まなかったり、正しくレンダリングされなかったり、めちゃくちゃ遅かったりする。

バニラJSを使ってたの? それならすごいね。

新しいファイルの追加が差分として表示される時、計算に時間がかかるのが特にイライラする。

Reactのリライト以降、すべてが悪化してる気がする。全体的に遅くて、動きもカクカクしてるし。「戻るボタン」とかも変な動きするし(何度も報告したけど、長い間待たされた後に修正されたと思ったら、数週間後にはまた壊れてる – もう諦めた)。デザインの決定も意味不明なものが多い。例えば、「新しい問題」を小さなモーダルで表示するのではなく、フルスクリーンのページにすればいいのに(テンプレートが設定されてる場合だけだけど)。画面の半分も使わないのは役に立たないし、報告される問題の質が下がるだけだよ。ほんとに不思議。これをデザインしてる人たちがGitHubを使ったことあるのか疑問に思う(他の誤った「どうしてそれが良いアイデアだと思ったの?」って機能は元に戻したけど、これだけは戻さなかった)。不満やバグが山ほどあるし、「生の表示」をクリックする方がコードを見るには一般的に良い。恥ずかしいよ。でも、報告しても何も修正されないから、無駄だと思ってる。GitLabは「GitHubのクローン」だったけど、今やGitHubが「GitLabのクローン」になって、すべてが遅くて動かないゴミみたいになってる。

2023年にこの件について発表された技術ブログ記事には驚かされた: https://github.blog/engineering/architecture-optimization/cr... コードナビゲーションを完全に再設計して、Reactを使って動的に読み込むようにしたんだ。導入された回帰の一つで、Ctrl+Fで単語を検索するとエントリーが重複する問題が発生した。これに対する彼らの解決策は?ソースを一文字ずつ分解して、各文字に独自のHTMLノードを割り当てること…言うまでもなく、パフォーマンスは最悪で(私のノートパソコンで表示するのに数秒かかった)、新たな問題も引き起こした(特定の複合絵文字を検索できないなど)。最悪なのは、彼らがそのハックを誇りに思っているようで、ブログ記事まで書いてること。

背景はよく知らないけど、diffビューアは5,000行を超えるとほとんど使えないよ、僕のM1 Macでは。

最近、このことについて良いビジュアルを使った動画があったよ。[0] 問題の根本的な原因は、Reactの基本的な仕組みとチームがリアクティビティモデルを設計した方法にある。要するに、Reactは状態管理の逆転モデルを持ってる。[1] Vanilla、Vue、Svelte、Solid、どんなシグナルベースのリアクティビティモデルでも、状態の変更に明示的に参加するためにコードをリアクティブコールバックに移動させる必要がある。実際、書くコードのほとんどでは、状態の変更に明示的に参加することが多い。Reactでは、リアクティブコールバックからコードを移動させることで状態変更から明示的に外れる必要がある。なぜなら、コンポーネント関数全体がリアクティブコールバックだから(その関数の中で再レンダリングをトリガーしない状態はフックを使って外に移動させる必要がある)。この根本的な違いが、Reactをスケールでうまく扱うのを難しくしてる。コンポーネント内で状態をどこに置くか、メモ化でパフォーマンスを最適化する方法を非常に意識する必要があるからね。[2] VueやSvelteの開発者はほとんど考えないことだよ。Reactチームはメモ化を自動管理するコンパイラを2年間かけて作ったけど、僕が見たベンチマークでは、ほとんど効果がなかった。そんな中、Vueは「Vapor Mode」[3] に取り組んでいて、VDOMをバイパスしてSvelteやSolid、Vanillaと同等に近づけつつ、非常に理解しやすいリアクティビティモデルを維持してる。[0] https://youtu.be/INLq9RPAYUw [1] https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-mo... [2] https://tkdodo.eu/blog/the-uphill-battle-of-memoization, https://tkdodo.eu/blog/the-useless-use-callback [3] https://www.vuemastery.com/blog/the-future-of-vue-vapor-mode...

これってReactのせいかな?GitHubアプリは通知を更新するのに3〜4秒かかるけど、リストには20個くらいしかないのに。

そうそう、Reactへの移行は本当にイライラするよね。GitHubも古いブラウザでは使えなくなったし。私の趣味用のノートパソコンは古いMacBookで、Firefox 78.15.0esrを使ってるんだけど、1年ちょっと前からGitHubのファイルやイシューの議論が見れなくなったんだ。READMEsは大体見れるけど、コードを読むためにはクローニングせずにChromiumか別のPCを使わなきゃいけなくなった。彼らがesbuildのターゲットを設定すれば、古いブラウザ用のJSを簡単に生成できるのにね。

Reactが大好きなテックインフルエンサーのTheo Browneですら、GitHubのその点についてかなり批判してるよ。確か、ページ内の要素が変わると、差分ページがその要素だけじゃなくて、ページ内の全ての反応する要素を更新するように設定してるんだよね。

フロントエンドにすごく若手の開発者たちを投入したのが明らかだね。まだ動いてるのに驚いてるよ。前のAJAX実装には批判もあったけど、少なくともHTTPの素のHTMLにかなり近かったからね。

もしかして、開発の大部分をAIに任せちゃったのかな?

時々、もう動かないこともあるよね。最近、Firefoxを使ってたら、組織を作れなかった。緑のボタンをクリックすると、ただハングしちゃって。どうやってそんなことをミスったのか分からないけど、Chromiumを使ったらちゃんと作れた。フォームを送信するだけのはずなのに、なんでこんなことになってるんだろう。

フロントエンドに放たれたあの若手開発者たちの多くはGitHub Copilotだってことを忘れないで。バイブコーディングが新しいGitHubの方針だから、彼らは本気でドッグフーディングをやってるんだ。

コードビューアは100行以上のファイルだと完全に使えない。クローンしてローカルでブラウズするしかないよ。こんな状態が少なくとも1年続いてる。GHの人たち、実際に自分たちのサイト使ってないの?

他のMicrosoftのウェブサービス使ったことある? どれも遅くてひどいよ。

確かに、GitHubはAzure Dev Opsに比べたらめちゃくちゃ速いよね。MSがGitHubを買収してから、Azure Dev Opsはずっと中途半端で、めっちゃ遅いし、結構大きな機能も欠けてるのに、MSは正式に見捨てることもできないみたい。

自分の気持ちが認められて嬉しい。良い機能的なソフトウェアが、何かに取り組まなきゃいけない大きなエンジニアリング組織のせいで悪化するのにはいつもイライラしてる。GitHubのUIがもっさりしてきたのに気づいて、もしかして自分が変だと思ったり、「マシンの問題」かなと思ったりしてたけど、GitHubがそんなことするわけないよね…でも、開発者やマネージャー、PMたちが自分たちの雇用を証明するために変更を加えるのを止めるのはかなり難しいんだろうね。

それに、ますます不安定になってる。去年の10月か11月頃から、毎週SPAのちょっとした不具合を目にするようになった。コンポーネントが表示されたり消えたりするせいでスクロール位置を失うし、問題リストは数時間前の状態を表示してリフレッシュしない。ボタンが効かないし、ページは読み込まれるけどヘッダーの下はスタイルが適用されてない。ビルドの詳細を展開すると、ステージが終わるたびに閉じちゃうし、ファイル名のヘッダーが二重に表示されるし、新しいコメントも表示されない。もう本当にイライラする。15年間信頼できるインフラの背景に埋もれていたツールが、今や侵入的で気を散らすような混乱になってしまった。数ヶ月間jujutsuを使ってみたけど、ほぼ完全にgitの使用を置き換えちゃった。期待するのは多いけど、jujutsuが数十年のVCSを調査して大きな改善を実現したように、誰かがjujutsuとのコラボレーションでも同じことをしてくれることを願ってる。GitHubのPRは、人気があるせいで複数のタブや不明瞭なタイムライン、編集されたコミット、欠けてる「8件のコメント」、そして今やSPAの不具合が続いているせいで、非常に残念ながら琥珀の中に凍っているように感じる。GitHubの大きな特徴は、同僚や潜在的な貢献者がすでにログインしているネットワーク効果で、競合が双方向同期(git-bugを参照)でそれを無効化するレースがあるかもしれないし、GitHubが使いやすさの問題を解決する間に競争が起こるかもしれない。Microsoftの伝説的な変更への抵抗は、非常に大きなウィンドウを提供しているね。

僕のお気に入りのGitHubのUIUXの問題は、複雑なビューにいるときにルートリポジトリページに戻れないこととか、著者のプロフィールに5クリック以内で行けないことだね。

スクロールが引っかかると、コードレビューがすごくつまらなくなる(元々あんまり楽しくなかったけど)。

FacebookのUIやFB for Business(広告管理やInstagramのコメントなど)にすごく似てる感じがする。Reactとクライアントサイドのレンダリングロジックが多いせいだろうね。GitHubみたいなサイトが管理する必要のあるインタラクティビティやDOMの状態がこんなに少ないのに、これはちょっとおかしいよね。

逆に良いUI体験の面白い例として、この動画がMcMaster-Carrのウェブサイトがいかにサクサク使えるかを説明してるよ: https://youtu.be/-Ln-8QM8KhQ。GitHubとはいろんな点で違う(ユーザー生成コンテンツがないし、ほとんど静的なページが多い)けど、どれだけ良いブラウジング体験ができるかを見るのは面白い。彼らの会社の価値が、必要なものをすぐに見つけられることに大きく依存してるから、納得できるよね。

僕もそれに悩まされてるから、https://githero.app を作ってるんだ。ちなみに、GitHubで3年間働いてたけど、全体的に遅さが大きな問題だって彼らもよくわかってるよ。改善のためのチーム横断的な努力が1年間あったけど、個人的には主要な目標は達成されなかったと思うし、それが現れてる。

これ、めっちゃクールだね!プライバシーポリシーはあるの?

GitLabにはない、あなたが提供したいものは何ですか?

すごく劣化したよね。昔のUXがどれだけ楽しかったか思い出す。今は、家の古いラズベリーパイでホストしてるforgejoインスタンスにプロジェクトがあるけど、そっちの方が速くてサクサク動くよ。