「ローカルLLMを動かすサーバがないなら、クライアントで動かせばいいじゃん」
そんな声が聞こえてきそうな時代になりました。
本記事では、巷で話題の「ブラウザでローカルLLMを動かす」という技術について、実際に検証してみた結果をお伝えします。
なぜブラウザでローカルLLMを動かしたいのか？
これまで、ローカルLLMを動かすには、それなりの性能を持つPC（GPU搭載マシンなど）が必要でした。
準備するのにも何百万もかかり、それを商用利用と考えると、かなりの設備費がかかります。（AWSで運用する場合、月数十万円かかることもあります。）
だったら、クライアントのPCで動かせばいいじゃん、という発想です。
PCのブラウザからローカルLLMを動かせれば、手軽に実現できるというわけです。
ブラウザでローカルLLMを動かすための条件
実際に動作させるためには、いくつかの大きな壁があります。
1. WebGPUへの対応
現在、ほとんどのLLMランタイムは WebGPU を利用しています。
WebAssembly (WASM) を使う方法もありますが、制約が多く、パフォーマンス面でも課題があります。
| 技術 | 特徴 |
|---|---|
| WebGPU | 高速な並列演算が可能。現在の主流。 |
| WebAssembly (WASM) | サポートブラウザは広いが、速度が遅く、メモリ制限がある。 |
2. クライアントのスペック
「クライアントで動かせばいい」と言っても、クライアントのスペックが低ければ十分な動作は期待できません。
以下の図のように、最低限の推奨スペックが必要になります。
Created by Claude
ライブラリとモデル
ブラウザでのLLM実行を支える、主要なプレイヤーを紹介します。
ライブラリ（LLMランタイム）
代表的なライブラリとして、以下のものが挙げられます。
- WebLLM: WebGPUを最大限に活用するライブラリ。
- Transformers.js: Hugging Faceが提供する、ブラウザでモデルを動かすための標準的な選択肢。
- Chrome Built-in AI: Chromeブラウザ自体に組み込まれたAI（Gemini Nanoなど）。
- ONNX Runtime Web: 高速な推論エンジン。
対応モデル
モデル側も、これらのライブラリで動作するように変換されている必要があります。
- MLC (WebLLM用): Hugging Face | mlc-ai
- ONNX (Transformers.js / ONNX Runtime用): Hugging Face | onnx-community
- Chrome Built-in AI: Chrome 138以降でGemini Nanoが搭載予定。
実際にやってみた：検証環境
今回は、強力なハードウェアを用いて、どの程度動作するのかを試しました。
- マシン: Apple M4 Pro
- メモリ: 48GB
検証したモデル
以下のモデルを、異なるランタイムで試行しました。
- Qwen3-4B (MLC / ONNX)
- Qwen3-0.6B (MLC / ONNX)
使用したLLMランタイムは以下の通りです。
- WebLLM
- Transformers.js
サイト
検証用のサイトを作成しました。
コードは以下です。
検証結果
前提条件
- ローカルLLMの読み込みは初回のみとし、キャッシュなしの状態で計測。
- Qwen3-4Bについては、キャッシュを利用した場合のモデル読み込み時間も計測。
- 「thinkingモード」をONにして計測。
Qwen3-4B の検証
モデルの読み込み
| LLM ランタイム | 読み込み時間 | RAM増加量 |
|---|---|---|
| WebLLM (WebGPU) キャッシュなし | 50.53s | +354MB |
| WebLLM (WebGPU) キャッシュあり | 2.76s | +547MB |
| Transformers.js (WebGPU) キャッシュなし | 78.65s | +2757MB |
| Transformers.js (WebGPU) キャッシュあり | 4.28s | +35MB |
| Transformers.js (WASM) | - | - |
※ Transformers.js (WASM) は、モデルサイズ（2702MB）がWASMの制限（2000MB）を超えるため、読み込みができませんでした。
| WebLLM (WebGPU) キャッシュなし |
|---|
| モデルの読み込み |
 |
| WebLLM (WebGPU) キャッシュあり |
|---|
| モデルの読み込み |
 |
| Transformers.js (WebGPU) キャッシュなし |
|---|
| モデルの読み込み |
 |
| Transformers.js (WebGPU) キャッシュあり |
|---|
| モデルの読み込み |
 |
「こんにちは」を返すまでのレスポンス（thinkingモードON）
| LLM ランタイム | 合計時間 | TTFT | 速度 |
|---|---|---|---|
| WebLLM (WebGPU) | 1.01s | 481ms | 35.6 tok/s |
| Transformers.js (WebGPU) | 1.53s | 798ms | 8.2 tok/s |
| WebLLM (WebGPU) |
|---|
| レスポンス |
 |
| Transformers.js (WebGPU) |
|---|
| レスポンス |
 |
Qwen3-0.6B の検証
モデルの読み込み
| LLM ランタイム | 読み込み時間 | RAM増加量 |
|---|---|---|
| WebLLM (WebGPU) | 11.91s | +310MB |
| Transformers.js (WebGPU) | 20.70s | +225MB |
| Transformers.js (WASM) | 15.16s | +596MB |
| WebLLM (WebGPU) |
|---|
| モデルの読み込み |
 |
| Transformers.js (WebGPU) |
|---|
| モデルの読み込み |
 |
| Transformers.js (WASM) |
|---|
| モデルの読み込み |
 |
「こんにちは」を返すまでのレスポンス（thinkingモードON）
| LLM ランタイム | 合計時間 | TTFT | 速度 |
|---|---|---|---|
| WebLLM (WebGPU) | 0.34s | 194ms | 100.9 tok/s |
| Transformers.js (WebGPU) | 0.43s | 301ms | 23.7 tok/s |
| Transformers.js (WASM) | 6.20s | 1221ms | 0.6 tok/s |
| WebLLM (WebGPU) |
|---|
| レスポンス |
 |
| Transformers.js (WebGPU) |
|---|
| レスポンス |
 |
| Transformers.js (WASM) |
|---|
| レスポンス |
 |
結論：ブラウザでのローカルLLMは「アリ」か「ナシ」か？
個人的な結論としては、「現時点では、まだナシ」 です。
理由は以下の3点です。
- ハードウェアの制約
「ローカルLLMを動かせる環境」を持っているユーザーは、まだ限られています。
今回の結果は、Apple M4 Proという非常に高性能なマシンでの検証によるものです。 - モデルの配布とメモリ問題
モデルファイルをクライアントへダウンロードさせる必要があります。サイズの大きいモデルはロードに膨大な時間を要し、カスタマイズモデルの配布にはリソース面でのリスクも伴います。 - ブラウザバージョンの依存
WebGPUなどの最新技術に依存するため、ブラウザのバージョンが求められます。- PC版 Chrome: v113 (2023/05/02)
- Android版 Chrome: v149 (2026/06/16)
「ローカルLLMを動かすサーバがないなら クライアントで動かせばいいじゃん」
このスローガンの通りに世界が動くには、まだ時間がかかりそうです。
まとめ
ブラウザ上でローカルLLMを動かしてみました。
全人類が、1B（10億パラメータ）程度の軽量なLLMモデルを、手元のPCやスマホでサクサク動かせる世界になったら、ようやく「アリ」と言えるかもしれません。
その日が来るのを、楽しみに待ちたいと思います。
Appendix: WebGPU以外の手法は？
Transformers.js は WebAssembly (WASM) を使用して動作させることも可能です。
WASMはWebGPUよりも 幅広いブラウザをサポートしています が、以下のデメリットがあります。
- 速度: WebGPUに比べるとかなり遅い。
- メモリ制限: LLMの読み込みサイズに制限（例：2GB）がある。（エラーメッセージが出ましたが、ログは残していません。🙇）
