Differences in mobile and desktop performance
Yesterday, I wrote a post on how to build wicked fast RWD sites. In it, I documented about a dozen performance tests using various combinations of CSS, JS, and icon implementations.
There’s one thing I didn’t discuss in yesterday’s post that I want to explore in more detail: Performance variations between desktop and mobile devices.
Performance variations between desktop and mobile
The big takeaway from yesterday’s post was that icon fonts and SVG sprites perform equally well, all other things being equal.
| First View | Subsequent Views | |
|---|---|---|
| Icon Font | 0.711s | 0.322s |
| External SVG | 0.752s | 0.355s |
That’s true on desktop devices, but on mobile devices, icon fonts actually perform far better than SVGs.
| Desktop First View | Desktop Subsequent Views | Mobile First View | Mobile Subsequent Views | |
|---|---|---|---|---|
| Icon Font | 0.711s | 0.322s | 1.490s | 0.692s |
| External SVG | 0.752s | 0.355s | 2.388s | 0.894s |
As you can see, SVGs on mobile devices take almost a full second longer to initially render than icon fonts. I ran a few tests and kept getting similar results. The SVG file was minified and gzipped, and was roughly the same size as it’s icon font equivalent.
While subsequent views perform much better, that initial view is a big deal, and a full second is a very meaningful amount of time. Based on this data, I’ll be sticking with my current icon font setup, despite some of the advantages of using SVGs.