WebARのパフォーマンス最適化｜読み込み速度を上げてユーザー離脱を防ぐ方法

WebARの最大の敵は「読み込みの遅さ」です。調査によると、読み込み時間が3秒を超えると離脱率が約50%に達し、5秒を超えると75%以上のユーザーが離脱します。本記事では、WebARのパフォーマンス最適化手法をコード例付きで解説します。

WebARのパフォーマンス目標値

指標	目標値	許容上限
初回読み込み時間（4G回線）	3秒以内	5秒
初回読み込み時間（3G回線）	5秒以内	8秒
3Dモデルファイルサイズ	5MB以下	10MB
テクスチャ解像度	1024×1024px以下	2048×2048px
ポリゴン数（1モデル）	10万ポリゴン以下	30万ポリゴン
FPS（フレームレート）	30fps以上	—

ボトルネック特定方法

• Chrome DevTools ネットワークタブ——各リソースの読み込み時間を確認。3Dモデル（.glb）が最大のボトルネックになりやすい
• Lighthouse（PageSpeed Insights）——モバイルパフォーマンススコアとFCP・LCPを確認
• WebGL インスペクター——Three.js/A-Frameのレンダリング処理時間とドローコール数を確認
• Chrome DevTools パフォーマンスタブ——JavaScriptの実行時間とメモリ使用量を確認

3Dモデル最適化

① Draco圧縮

Googleが開発した3D圧縮アルゴリズムDracoを使うと、glbファイルのサイズを最大90%削減できます。gltf-transformなどのツールで適用できます。

# gltf-transformを使ったDraco圧縮
npm install -g @gltf-transform/cli

# Draco圧縮の適用
gltf-transform draco input.glb output-draco.glb

# 複数の最適化を一括適用
gltf-transform optimize input.glb output.glb   --compress draco   --texture-compress webp   --simplify

② Meshopt圧縮

Dracoの代替として利用できるMeshoptは、頂点データの圧縮に特化しており、アニメーション付きモデルでの圧縮率が高いのが特徴です。

③ KTX2テクスチャ圧縮

テクスチャの圧縮にはKTX2形式（Basis Universal）が効果的です。GPU上で直接展開されるため、テクスチャのメモリ使用量を最大8分の1に削減できます。

# KTX2テクスチャ圧縮の適用
gltf-transform optimize input.glb output-ktx2.glb   --texture-compress ktx2

遅延読み込みの実装

// Intersection Observerを使った3Dモデルの遅延読み込み
const modelViewer = document.querySelector('model-viewer');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // ビューポートに入ったら3Dモデルを読み込む
      modelViewer.setAttribute('src', 'product.glb');
      modelViewer.setAttribute('ios-src', 'product.usdz');
      observer.unobserve(entry.target);
    }
  });
}, {
  rootMargin: '200px' // 200px手前から読み込み開始
});

observer.observe(modelViewer);

CDN活用とキャッシュ設定

# Nginx設定例：3Dモデルファイルのキャッシュ設定
location ~* \.(glb|gltf|usdz)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    add_header Vary "Accept-Encoding";
    gzip off;
}

CDNサービスとしてはCloudflare・AWS CloudFront・Fastlyなどが一般的です。3Dモデルファイルを世界中のエッジサーバーにキャッシュすることで、地理的な遠距離でのレイテンシを削減できます。

before/after比較表

最適化項目	最適化前	最適化後	改善率
3DモデルサイズDraco圧縮適用	45MB	4.2MB	91%削減
テクスチャKTX2変換	8MB（PNG）	1.2MB（KTX2）	85%削減
遅延読み込み実装後の初期FCP	6.2秒	1.8秒	71%改善
CDN導入後の平均読み込み時間	4.5秒	2.1秒	53%改善
全最適化適用後のLighthouseスコア	42点	78点	+36点

よくある質問