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|
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|
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.
🔥 Hot off the press! I just launched a new pocket guide. Learn about ES6 arrow functions,
const, function hoisting, and more.