test the perf impact of not using SVG in the newtab page

RESOLVED FIXED

Status

()

RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: ttaubert, Assigned: alexbardas)

Tracking

Trunk
Points:
2
Bug Flags:
firefox-backlog +
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

We're using an SVG for all the control icons on about:newtab. Are SVGs still considered slow? Should we rather use an optimized PNG sprite here?

We're also doing some interesting stuff for e.g. #newtab-customize-button where we afaict take a 32x32 rect of the SVG and scale it down to 28x28? Same thing for .newtab-control elements which are 24x24.

Maybe that's not too bad considering SVG is vector-based but I just don't know.
(Assignee)

Updated

4 years ago
Assignee: nobody → abardas
Status: NEW → ASSIGNED
Points: --- → 2
Flags: qe-verify-
Flags: firefox-backlog+
Summary: Compare SVG/PNG usage on newtab page and maybe switch to PNG sprite → test the perf impact of not using SVG in the newtab page
Iteration: --- → 35.3
(Assignee)

Comment 1

4 years ago
I've done lots of measurements for 3 main cases:

1. baseline
2. svgs replaced with some background-images
3. lots of svgs in the page (there are just a few svgs in the newtab page, so in case we'll add more, how good will be the perf?)

Raw data is here: https://etherpad.mozilla.org/M2wqIpBBof

Charts are here: https://docs.google.com/spreadsheets/d/1TzeeGvAPvLMGB9iX-DtRJIdt-6Q6ktaJD-8PY-LFrY0/edit?usp=sharing

General impression is that perf is a bit better with png (1-2 ms, especially on Linux), but the measured difference is so small that in can be in the stddev range.

On a small tablet device with Windows 8 (Asus Transf), the perf with svgs icons was better.
(Assignee)

Comment 2

4 years ago
Created attachment 8499288 [details]
multiple_svgs.png

How the multiple svgs test looks like
(Assignee)

Comment 3

4 years ago
Created attachment 8499290 [details] [diff] [review]
svg_none.diff

Patch with which I performed the tests. It was adapted a bit to work on Win / Linux.
(Assignee)

Comment 4

4 years ago
Created attachment 8499291 [details] [diff] [review]
svg_many.diff

Patch with which I performed the tests. It was adapted a bit to work on Win / Linux.
Ok, I think we determined that switching to PNGs has no real effect on any of our measurements. Let's just resolve this as fixed without any follow-up because we won't pursue this path any further. Do you agree, Alex?
Flags: needinfo?(abardas)
(Assignee)

Comment 6

4 years ago
I do and I can see a tiny improvement only in Linux, but it's still in the stddev range. Svgs give us other advantages, it's just not worth dropping them based on this data.
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(abardas)
Resolution: --- → FIXED

Comment 7

4 years ago
I wonder if this points towards moving other UI pieces to svg? Most of the "@" images under browser fall into osx, metro, shared and some windows.

http://mxr.mozilla.org/mozilla-central/find?string=%40&tree=mozilla-central&hint=browser

Or at least for new images if not migrating old images. ?
(In reply to Ed Lee :Mardak from comment #7)
> I wonder if this points towards moving other UI pieces to svg? Most of the
> "@" images under browser fall into osx, metro, shared and some windows.

There has been some talk of moving the tab images back to SVG. See bug 1068110.
You need to log in before you can comment on or make changes to this bug.