Webパフォーマンスのためのsvg最適化：2026年完全ガイド

1ミリ秒が大切 — SVGが静かにあなたのミリ秒を奪っている

私はPageSpeed監査を生業にしています。昨年400以上の本番サイトを分析しましたが、同じ盲点が繰り返し現れます：チームは画像圧縮とJSバンドリングに執着し、SVGを完全に無視する。誰も語らないパフォーマンスの漏れです。

先四半期、Lighthouseスコア47のSaaSクライアントが来ました。ランディングページは23個のSVGアイコンと2つのheroイラストを読み込んでおり、すべて未最適化 — SVGだけで3.1MBのページ重量のうち1.2MBを占めていました。集中的なSVG最適化スプリント後、JavaScriptを一行も変更せずにスコアは89に。直帰率は最初の週で22%低下しました。

「読み込み時間から削る1ミリ秒がコンバージョン率に直接影響します。SVG最適化だけでイラスト豊富なページのLighthouseを30ポイント以上動かすのを見てきました。」

ビフォー＆アフター：実際のクライアントメトリクス

Core Web Vitals影響分析

LCP： ファーストビュー最大要素がSVG heroなら、ファイルサイズがLCPを直接決定。クライアントのhero SVGはFigmaから340KB。VectoSolveのオプティマイザー通過後41KBに。LCPは3.9sから1.6sへ。

CLS： 明示的なwidth/heightやviewBoxのないSVGはレイアウトシフトを引き起こす。常にディメンションを事前宣言。

INP： 大きなインラインSVGはDOMを肥大化。未最適化インラインSVGイラストで50,000超のDOMノードを計測したことも。

SVGO：本番用プラグイン設定

module.exports = {
  multipass: true,
  plugins: [
    {
      name: \'preset-default\',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupNumericValues: { floatPrecision: 2 },
          convertPathData: { floatPrecision: 2, utilizeAbsoluteIfShorter: true },
          mergePaths: { force: true },
          removeUnknownsAndDefaults: { keepRoleAttr: true },
        },
      },
    },
    \'removeDimensions\', \'removeXMLProcInst\', \'removeComments\',
    \'removeMetadata\', \'removeEditorsNSData\', \'reusePaths\',
    { name: \'removeAttrs\', params: { attrs: [\'data-name\', \'class\'] } },
  ],
};

実際の結果：

オリジナル（Figmaエクスポート）：48.2KB
デフォルトSVGOプリセット：      19.1KB（60%削減）
カスタム設定：                   8.7KB（82%削減）
+ Brotli圧縮：                  2.9KB（合計94%削減）

Brotli vs Gzip

遅延読み込み

外部SVG：

<img src="/illustrations/feature-chart.svg"
     loading="lazy" decoding="async"
     width="600" height="400"
     alt="機能比較チャート">

ビルドパイプライン統合

Webpack： { test: /\.svg$/, use: [\'@svgr/webpack\', { loader: \'svgo-loader\' }] }

Vite： import svgo from \'vite-plugin-svgo\';

Next.js： const withSVGO = require(\'next-svgo\');

SVG最適化チェックリスト

• カスタム設定でSVGOを実行（multipass有効、floatPrecision: 2）
• エディターメタデータ、コメント、非表示レイヤー、未使用<defs>を削除
• 互換パスを結合し座標精度を削減
• 全SVGにviewBox属性があることを確認
• CLS防止のため<img>タグに明示的なwidth/heightを設定
• 装飾的SVGにaria-hidden="true"、意味のあるSVGにrole="img" + <title>
• 4KB未満のファーストビューSVGをインライン化
• ファーストビュー外の全SVGを遅延読み込み
• アイコンセットをSVGスプライトシートに統合
• image/svg+xmlにBrotliまたはGzip圧縮を有効化
• SVGOをWebpack/Vite/Next.jsビルドステップに統合

パフォーマンスを無駄にするのをやめよう

SVG最適化は、チームが一貫して見落としている最高ROIのパフォーマンス改善です。このガイドのテクニックでSVGペイロードを85〜95%削減し、Lighthouseスコアを20〜40ポイント向上できます。

VectoSolveのSVGオプティマイザーでソースから最適化されたSVGを開始し、SVGエディターでパスとマークアップを調整。ユーザーは違いに気づきます。Googleは違いに気づきます。肥大化したSVGの配信をやめましょう。

参考資料

• web.dev: Core Web Vitals — LCP、CLSとSVG最適化に関するGoogle公式ガイド
• MDN Web Docs: SVG — SVG構造と属性のリファレンス
• Google Search Central — ページパフォーマンスがランキングに与える影響
• Smashing Magazine — SVGパフォーマンス最適化の実例
• Moz Blog — 画像最適化によるオーガニックトラフィック改善のSEO視点