Web performance is really, really important.
Despite the ever increasing speed of internet connectivity, the experience users are getting through native apps is changing expectations; slow websites simply do not cut it any more. There are various studies and reports on the correlation between poor page speed and bounce rates, but the general guidance is that visitors are willing to wait just 2-3 seconds for a page to load before they abandon it (i.e. bounce to another site). Believe it or not, this is generally lower on mobile devices.
I’m going to be talking a lot about web performance in the coming months, but this article is about very simple, quick tip that will make a big difference to your site’s speed …. swap your icon images for a CSS font.
Use of CSS fonts has several benefits:
- A font is a single, tiny request, compared to several relatively large requests for images. Even if you are using CSS sprites to reduce the request count, the sprite itself is still way bigger than a font file
- A font is fully scalable without quality degradation, which means it will look super crisp on those all important retina displays
- Using a font means you can have a consistent, high quality design for your icons
- Who wants to spend their time creating or searching for icon images?
To add font awesome to your ASP.net project just run this in Package Manager Console:
Once the package is installed, you just need to reference the style sheet which will be in ~/Content/font-awesome.css by default.
You can then use the font by using <i> elements which the CSS for whichever icon you’d like. Here are some examples:
You can see more examples here http://fortawesome.github.io/Font-Awesome/examples/