Figmaを高速に保つ

• プロジェクトが次第に複雑化し、性能テストのためのリソースも大幅に増えたため、新しいテストシステムが必要になった。
• すべてのコード変更に対してテストを実行しつつ、10分以内にテストが完了し、結果を詳細に分析できる理想的なテストシステムを目指した。
• Figmaの性能は主にCPUとGPUの影響を受けるため、各方式の長所と短所を踏まえて、大きく2つのシステムで構成した。
• クラウドベースのシステム
  • Headless Chromiumを実行するGPU付きVMを使用し、並列にテストを実行して10分以内に完了するようにした。
  • VMの特性上、外部要因の影響を受けやすいため、約20%の余裕を持たせた。
• ハードウェアベースのシステム
  • 古いノートPC（旧型MacBook、WindowsノートPC、Chromebookなど）で構成したシステムですべてのテストをスケジュールし、順次実行した。
  • テストには時間がかかるが、実機で現れる微妙な性能変化を詳細に追跡できる。
• 2種類のテストシステムを構築した後、性能改善に取り組んだ結果、良好な成果を得ることができた。
• レンダリング性能の改善
  • 最新CPUを備えていない環境で、GPU依存のレンダリング性能を改善するために取り組んだ。
  • ストレステストで詳細に調査した結果、一部の機能が特定のハードウェアで大きなオーバーヘッドを発生させていた。
  • レンダリング時間を細かく分割し、ローカル作業を優先する新しいアルゴリズムを実装して、旧型ハードウェアで効果的に性能を改善した。
• FigJamの性能改善
  • テストを書くのは難しかったが、従来のように顧客からの問い合わせや指標を見て修正するやり方から、テストを見て事前に問題を修正できるようになった。
  • CSSの微妙な性能差のように見つけにくい問題も、テストを何十回も繰り返すことで発見し、修正できた。
  • 特に性能低下が発生したコード変更を正確に追跡できる点が役に立った。
• 性能改善は難しい領域だが、人が考えることと実際が異なることは多いため、テストと性能測定が非常に重要である。

[kuroneko]

• HNスレッド

テストによってパフォーマンス改善を行ったのは良いのですが……それでもFigmaは依然として深刻なほど遅い気がします。
HNのコメントでも、かなり遅いという不満が相当多いですね。 -_-

特にAdobeに買収されて以降、ものすごく遅くなったと感じるのですが（その前は思ったより速かったのに……）
気のせいでしょうか？

[kuroneko]

HNスレッドのAI要約

• skhameneh: WebAssemblyで先駆的な取り組みを行い、GitHubでその探求の過程を共有したFigmaの元CTO、Evan Wallaceを称賛しています。
• imslavko: EvanとJamieの過去のブログ記事を共有し、FigmaのWebAssemblyへの移行、パフォーマンステスト、そして時間の経過に伴う改善点を詳しく説明しています。
• fhub: エバン・ウォレスが2012年にFigmaを共同創業し、2021年に退社するまで10年間CTOを務めたことに言及しています。
• antoineMoPa: 企業は後者では妥協せざるを得ないと考えられがちな中で、Figmaが商業的成功と技術的卓越性の両方を達成したことに驚きを示しています。
• tobyjsullivan: ほとんどのスタートアップは品質より機能を優先する一方で、一部のスタートアップは新しい技術を革新し、それを商業化できるため、Figmaは例外的な存在だと説明しています。
• tmpz22: 現在の標準は継続的インテグレーションの通過であるべきだとし、最近の製品を基準にしたソフトウェアへの狭量な期待を批判しています。
• yellow_lead: Figmaの20%の誤差範囲を踏まえ、ノイズの多いパフォーマンステスト環境を他の人たちはどのように扱っているのか疑問を呈しています。
• imslavko: Figmaの補助的なハードウェアベースのテストシステムと、仮想マシンのばらつきに対処するためにベースラインを計算する方法について詳しく説明しています。
• koenbok: 専用のテスト用Mac Miniで15%のばらつきに直面し、最終的には実ユーザーモニタリングが最も信頼できると分かったFramerの事例を共有しています。
• chrisdbanks: ヨーロッパで読み込み時間の問題や画像がすぐに読み込まれない現象を経験し、Figmaが米国外の地域で適切にテストしているのか疑問を呈しています.