[Performance] Investigate using an icon font instead of pngs

RESOLVED DUPLICATE of bug 901989

Status

P3
normal
RESOLVED DUPLICATE of bug 901989
6 years ago
4 years ago

People

(Reporter: kgrandon, Unassigned)

Tracking

({perf})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [c= p= s=2013.11.22 u=])

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
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

6 years ago
Created attachment 716927 [details]
building block with font-awesome font-icon

Comment 2

6 years ago
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>
(Reporter)

Comment 3

6 years ago
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?
Flags: needinfo?(gasolin)

Comment 4

6 years ago
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
Flags: needinfo?(gasolin)

Comment 5

6 years ago
another worth to check tool: 
that can bind some Icon fonts into a single file 
http://www.fontello.com/
(Reporter)

Comment 6

6 years ago
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.
(Reporter)

Comment 7

6 years ago
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.
(Reporter)

Comment 8

6 years ago
Created attachment 726833 [details] [diff] [review]
WIP icon fonts integration
(Reporter)

Updated

6 years ago
Attachment #726833 - Attachment is patch: true

Updated

5 years ago
Keywords: perf
Whiteboard: c= ,
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

5 years ago
Kevin, is this being considered in the upcoming Haida work?
Assignee: kgrandon → nobody
Flags: needinfo?(kgrandon)
Priority: -- → P3
Whiteboard: c= , → [c= p= s= u=]
(Reporter)

Comment 11

5 years ago
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.
Flags: needinfo?(kgrandon)

Comment 12

5 years ago
Closing per comment 11.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 901989

Updated

5 years ago
Whiteboard: [c= p= s= u=] → [c= p= s=2013.11.22 u=]
You need to log in before you can comment on or make changes to this bug.