Skip to main content Skip to secondary navigation Accessibility Feedback

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 ViewSubsequent Views
Icon Font0.711s0.322s
External SVG0.752s0.355s

That’s true on desktop devices, but on mobile devices, icon fonts actually perform far better than SVGs.

Desktop First ViewDesktop Subsequent ViewsMobile First ViewMobile Subsequent Views
Icon Font0.711s0.322s1.490s0.692s
External SVG0.752s0.355s2.388s0.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.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests