Wie ich das Laden von SVG-Icons im Dashboard beschleunigt habe

Die Dashboard-Icons des SaaS, das ich betreibe, sind bis auf wenige Ausnahmen SVG. Früher wurden sie einzeln geladen, zuerst home.svg, dann settings.svg und so weiter.

Das dauerte länger als ein einzelnes File und führte dazu, dass Icons noch fehlten, obwohl das Dashboard schon vollständig sichtbar war.

1. SVG-Sprite-Methode (gescheitert)

Zuerst probierte ich die weit verbreitete Sprite-Methode, mehrere SVGs in einer Datei zu bündeln.

Einfache weiße SVGs funktionierten, aber komplexe Icons wie Browser-Icons wurden falsch dargestellt, etwa schwarz oder ohne Farben.

Bei der Suche nach einer Lösung las ich, dass diese Methode mehrere SVGs kombiniert und komplexe Icons deshalb brechen und sich nicht reparieren lassen. Ich ging zur nächsten Methode über.

2. SVGs in CSS einbetten (Erfolg)

Ich legte icons.css und browsers.css an und fügte die SVGs per url() in background-image ein.

CSS-url() akzeptiert neben Dateipfaden auch Inline-Daten mit data:.

So wandelt man eine einzelne SVG-Datei in ein für CSS nutzbares Format um:

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

Das Skript im Terminal erzeugt data:image/svg+xml, das Sie in CSS einfügen, z. B. background-image: url("hier einfügen").

3. Leistungsgewinn

Mit Methode 2 lädt das Dashboard nicht mehr über zehn SVG-Dateien, sondern nur noch eine CSS-Datei. Es ist deutlich schneller, und das nacheinanderige Einblenden der Icons ist weg.

Vorherige Ladezeiten habe ich nicht gespeichert, ein exakter Vergleich fehlt. Der Gewinn ist klar spürbar, grob mehr als doppelt so schnell.