843233 - [Performance] Investigate using an icon font instead of pngs

Status: RESOLVED DUPLICATE of bug 901989

(Firefox OS Graveyard :: Gaia, defect, P3)

Description

[Kevin Grandon :kgrandon]

Transparent PNGs are slow to load. We may be able to implement an icon font, similar to github and other sites, which is always loaded at the system level. If adopted across all apps, this should improve performance and responsiveness across the board.

Initially I'll start with the dialer app and see if I can find any concrete wins.

Comment 1

[[e-mail]]

Attachment: building block with font-awesome font-icon

Comment 2

[[e-mail]]

I tried fontawesome, its font icon works fine with building blocks (in general case)
http://fortawesome.github.com/Font-Awesome/

They take open license and provide many good tools for font icons.

Demo:

I've write some showcase with firefox building blocks that come with font-awesome icons
http://ffos.ap01.aws.af.cm/public/ffosbb/index.html

syntax:

you can embed icon with <i class="icon-beaker"></i>

Comment 3

[Kevin Grandon :kgrandon]

Hey Fred - Very nice demo! As part of this I think we'd need to get UX on board because we'd likely have to totally change the workflow. As a next step I think we should *try* to get some kind of benchmarks comparing a system font to normal images.

Would you be interested in coming up with some benchmarks to see if this is a worthwhile goal?

Comment 4

[[e-mail]]

searched some discussions about webfont vs png

Icon fonts could speed up your page loading time by *14%* compared to images
http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14


Evaluate tool:
The post use 'google speed' and 'yslow' to test a web site load time with replacing img(650kb)/web font(11kb)


The post shows some icon font advantages:

retina ready, pixel perfect at every scale and styleable with css

1. scale to any resolution (looks good in high density displays, responsive, which support future version goals)
2. in a single file (Downloading a single file is much better for the user than having to download multiple tiny images)



Ref:

* font icons vs png icons
http://stackoverflow.com/questions/12514236/font-icons-vs-png-icons
* web font DEMO
https://pictonic.co/#main-demo

Comment 5

[[e-mail]]

another worth to check tool: 
that can bind some Icon fonts into a single file 
http://www.fontello.com/

Comment 6

[Kevin Grandon :kgrandon]

Thanks for the info! I think we need to do some actual tests with gaia apps to see what kind of gain we would get. I should be able to look into this in the next week or so.

Comment 7

[Kevin Grandon :kgrandon]

Ok, the perf numbers are in. I tested two bare-bones apps. 

App A was using an icon font, which was loaded into the system.
App B used images.

Each app had four different icons.

App A constantly loaded ~395ms.
App B constantly loaded ~420ms.

(420 - 395) / 4 = 6.25. I would say that we would see a gain of about ~6ms per icon converted to a font. In addition to the increased ability of being able to scale the icons, I would recommend that we move forward with a more full implementation of this.

Comment 8

[Kevin Grandon :kgrandon]

Attachment: WIP icon fonts integration

Comment 9

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

One of the advantage as well is the advantage that if someone opt-in using them to look like the system and those are updated to fix some glitches they will automatically have the 'system' look and feel.

Sounds a good thing to me.

Comment 10

[Mike Lee [:mlee]]

Kevin, is this being considered in the upcoming Haida work?

Comment 11

[Kevin Grandon :kgrandon]

As far as I know, Arnau is doing some work with the status bar. Once that lands, we'll land it in other places.

I think this is being tracked differently, and there may be other bugs - so we may want to close this one out.

Comment 12

[Mike Lee [:mlee]]

Closing per comment 11.