ダッシュボードの SVG アイコン読み込みを速くした話

自分が運営する SaaS のダッシュボードアイコンは、一部を除きすべて SVG です。以前は home.svg、settings.svg のように 1 つずつ読み込んでいました。

この方法だと 1 ファイルにまとめるより全体の読み込みが遅く、ダッシュボードが表示されたあともアイコンがまだ出ていない、ということもありました。

1. SVG スプライト方式 (失敗)

まず試したのが、SVG を 1 つにまとめる一般的なスプライト方式です。

単純な白い SVG は問題ありませんでしたが、ブラウザアイコンなど複雑な SVG は色が崩れたり黒くなったりして、うまく当たりませんでした。

調べていると、Claude の回答で「複数 SVG を 1 つにまとめる方式では複雑なアイコンは自然に壊れ、直せない」とあり、次の方法に進みました。

icons.css と browsers.css を作り、background-image の url() で SVG を埋め込みました。

CSS の url() は通常のファイルパスだけでなく、data: で始まるインラインデータも受け取れます。

既存の SVG 1 ファイルをこの形式にするのは、次のコードを実行するだけです。

node -e "const fs=require('fs'); const s=fs.readFileSync('./filename.svg','utf8'); console.log('data:image/svg+xml,' + encodeURIComponent(s));"

ターミナルでこのスクリプトを実行すると、SVG は data:image/svg+xml 形式になり、CSS の background-image: url("ここに貼る") に入れます。

方法 2 を適用すると、ダッシュボード読み込み時に 10 個以上の SVG を取る代わりに CSS ファイル 1 つで済むようになり、速度はかなり上がり、順番に表示される問題も消えました。

適用前の数値は残していないので厳密な比較はできませんが、体感では 2 倍以上速くなったと言えます。