Next.js x SVG Icon benchmarks
Static SVG Icon (render 250 items)
| Inline SVG | SVG Sprite | Img | Img Base64 | CSS Base64 | |
| HTML size (external file size) | 297 kB | 29 kB | 20.9 kB (IMG 3 kB) | 410 kB | 21.3 kB (CSS 2 kB) |
| DOM elements | 3,256 | 521 | 256 | 256 | 256 |
| First Contentful Paint | 2.1 s | 0.8 s | 0.8 s | 2.6 s | 0.9 s |
| Speed Index | 2.3 s | 0.9 s | 0.8 s | 2.6 s | 0.9 s |
| Time to Interactive | 4.6 s | 3.1 s | 2.5 s | 3.9 s | 2.1 s |
| Total Blocking Time | 247 ms | 100 ms | 27 ms | 13 ms | 10 ms |
| main thread work | 0.9 s | 0.8 s | 0.4 s | 0.4 s | 0.3 s |
| Script Parsing & Compilation | 14 ms | 15 ms | 12 ms | 14 ms | 12 ms |
| Script Evaluation | 272 ms | 217 ms | 159 ms | 186 ms | 120 ms |
| Parse HTML & CSS | 117 ms | 31 ms | 77 ms | 51 ms | 10 ms |
| Style & Layout | 152 ms | 230 ms | 27 ms | 29 ms | 41 ms |
| Rendering | 73 ms | 85 ms | 35 ms | 39 ms | 28 ms |
| Garbage Collection | 14 ms | 15 ms | - | - | - |
| Other | 205 ms | 208 ms | 143 ms | 106 ms | 90 ms |
CSS Animation SVG Icon (render 250 items)
| Inline SVG | SVG Sprite * | Img | Img Base64 | CSS Base64 | |
| HTML size | 457 kB | 32 kB | 22.1 kB (IMG 3.6 kB) | 624 kB | 21.3 kB (CSS 2.9 kB) |
| DOM elements | 3,506 | 533 | 256 | 256 | 256 |
| First Contentful Paint | 2.9 s | 0.9 s | 0.8 s | 3.7 s | 0.9 s |
| Speed Index | 9.1 s | 5 s | 0.8 s | 3.7 s | 0.9 s |
| Time to Interactive | 36.4 s | 161.8 s | 2.2 s | 5 s | 2.8 s |
| Total Blocking Time | 28,393 ms | 129,960 ms | 27 ms | 30 ms | 30 ms |
| main thread work | 47.8 s | 162.4 s | 1.2 s | 1.6 s | 1.2 s |
| Script Parsing & Compilation | 15 ms | 14 ms | 12 ms | 13 ms | 15 ms |
| Script Evaluation | 2,753 ms | 638 ms | 174 ms | 204 ms | 142 ms |
| Parse HTML & CSS | 114 ms | 38 ms | 82 ms | 62 ms | 13 ms |
| Style & Layout | 13,388 ms | 90,283 ms | 91 ms | 102 ms | 109 ms |
| Rendering | 4,928 ms | 22,454 ms | 681 ms | 993 ms | 732 ms |
| Garbage Collection | 103 ms | 59 ms | - | - | - |
| Other | 26,446 ms | 48,920 ms | 220 ms | 206 ms | 175 ms |
* Issues affecting this run of Lighthouse: The page loaded too slowly to finish within the time limit
SMIL Animation SVG Icon (render 250 items)
| Inline SVG | SVG Sprite | Img | Img Base64 | CSS Base64 | |
| HTML size | 620 kB | 32 kB | 22.4 kB (IMG 4.4 kB) | 861 kB | 21.3 kB (CSS 3.8 kB) |
| DOM elements | 6,256 | 560 | 256 | 256 | 256 |
| First Contentful Paint | 3.6 s | 0.8 s | 0.8 s | 4.9 s | 0.9 s |
| Speed Index | 3.7 s | 1.4 s | 0.8 s | 4.9 s | 0.9 s |
| Time to Interactive | 13.1 s | 9.1 s | 2.2 s | 6.2 s | 2.2 s |
| Total Blocking Time | 6,017 ms | 3,833 ms | 20 ms | 20 ms | 10 ms |
| main thread work | 10.2 s | 9.7 s | 2.7 s | 4.1 s | 2.7 s |
| Script Parsing & Compilation | 12 ms | 14 ms | 11 ms | 13 ms | 14 ms |
| Script Evaluation | 336 ms | 195 ms | 168 ms | 206 ms | 133 ms |
| Parse HTML & CSS | 189 ms | 24 ms | 82 ms | 66 ms | 12 ms |
| Style & Layout | 3,280 ms | 5,158 ms | 73 ms | 73 ms | 105 ms |
| Rendering | 788 ms | 1,352 ms | 2,089 ms | 3,490 ms | 2,136 ms |
| Garbage Collection | 13 ms | 11 ms | - | - | - |
| Other | 5,549 ms | 2,973 ms | 319 ms | 311 ms | 288 ms |