SVGスプライトのパフォーマンス最適化

SVGスプライトのパフォーマンス

SVGスプライトは本質的にパフォーマンスが高いですが、ファイルサイズとレンダリング速度でさらなる改善を得るためのいくつかのテクニックがあります。

ファイルサイズの削減

最もインパクトのある最適化はスプライトファイル自体のサイズ削減です：

1. まず個別のSVGを最適化する

SVGをスプライトに結合する前に、各SVGをオプティマイザーに通してXML宣言、エディターメタデータ、不要な名前空間宣言、コメント、冗長な属性、パスの過剰な小数精度を除去します。

2. パスの簡略化

多くのコントロールポイントを持つSVGパスはより大きなファイルを生成します。可能な場合はカーブを簡略化します。

3. 短い小数精度の使用

座標精度を1-2桁に減らします。24x24アイコンでは2桁以上の小数が必要になることはほとんどありません。

gzip圧縮

SVGはテキストベースであり、gzipで非常にうまく圧縮されます。50KBのスプライトファイルは転送時に8-12KBに圧縮される可能性があります。サーバーが.svgファイルにgzipまたはBrotli圧縮レスポンスを送信するようにしてください。

未使用アイコンのツリーシェイキング

スプライトに200個のアイコンが含まれていてもページが10個しか使用しない場合、190個の未使用アイコンを配信しています。ビルド時のツリーシェイキング、サブセットスプライト、遅延読み込みなどの戦略があります。

レンダリングパフォーマンス

SVGレンダリングは一般的に高速ですが、複雑なパスを持つ大規模スプライトは問題を引き起こす可能性があります。スプライト内のフィルターとグラデーション、clip-pathの使用、パスの複雑さを最小限に抑えてください。