Perceived Speed Performace

June 16, 2010 at 2:25 pm | Tags: , , , ,

Firefox is fast, no doubt about it. But for many people it feels pretty slow when starting up. Chrome, while only marginally faster than Firefox at starting, feels much faster. By analyzing videos of these start-up processes we can start to understand what makes Firefox feel slow.

First, last start with some definitions of browser start-up events.

  • Before Spinner: the time from when the user clicks the application icon to when the spinner starts running.
  • Spinner Running: the time while the spinner is actually running (may appear and disappear).
  • Before Window Draw: the time from when the spinner stops running until the window begins drawing.
  • Window Drawing: the time from when the window starts drawing until the title bar comes into view.
  • Drawing Title Bar: the time it takes the title bar to come into view.
  • Window Done Drawing: the time it takes for the window to draw after the title bar is seen.
  • Drawing Chrome: the time it takes for the browser chrome to be drawn.
  • Website Drawn: the time it takes for the entire website to be drawn (different websites used).
  • Close Window: the time it takes from when a users presses the close button on the browser until when the browser is no longer shown.
  • Active Icon Disappears: the time it takes from when the browser is no longer shown until the application is no longer running.
  • “Fresh”: brand new profile; standard set of plugins enabled: Acrobat, Google Update, Java Deployment Toolkit, Java(TM) platofmr SE 6 U20, Microsoft Office 2010, Shockwave Flash, Silverlight, WPI Detector 1.1
  • “Full”: fresh profile (only the history data used to create the 50 bookmarks below); standard set of plugins; 50 bookmarks (the 50 top alexa global sites); 5 tabs in the session (google, facebook, youtube, wikipedia, live.com); 2 common add-ons installed (ietab and adblock plus)

Videos

My colleague Alex Faaborg shot the following videos with an SLR at 60fps. Furthermore he created a very small application that would show time flying by in milliseconds. He then loaded up each browser, with different configurations, three times each.

Firefox Fresh (no plugins): http://www.youtube.com/watch?v=HtC7XVdq8Ko
Firefox vs Chrome (Fresh): http://www.youtube.com/watch?v=S3oLFHkeCco
Firefox vs Chrome (Full): http://www.youtube.com/watch?v=t7uAFp4gRq4

General Observations

Spinner Count: Upon starting Firefox, the spinner graphic is shown (and disappears) a total of three times, meanwhile in Chrome the graphic is only shown twice.

Window Drawing: In Firefox, the window is drawn (animated to size), then the browser chrome is drawn, then the website is drawn. In Chrome, the window and browser chrome is drawn all at once and then the web- site is drawn. This helps Chrome to feel faster because there is less visually going on at different times. Firefox feels very sequential in it’s loading, while Chrome seems to do everything at once. This allows Chrome to feel fast because once the window is animated the size, everything is pretty much ready to go. This is especially true if google.com is set as your homepage on Chrome.

Webpage Drawing: In Chrome the webpage loading icon is fairly small and is never ‘fully’ seen. While in Firefox the loading icon is large, grey, and can always be seen in it’s entirety. This is visually ‘bloated’ and makes Firefox seems slower. Furthermore, because Chrome’s loading icon animation goes ‘around’ faster, Firefox’s loading icon takes more time (seemingly) to get ‘around’.

Page Title: In Firefox, a page’s title is shown on the tab right away, while in Chrome the title is not shown un- til the website has completed loading. This is a simple trick that allows Chrome to feel faster in that once the title is shown, the page is ready. While in Firefox, a page’s title makes it seem like a page has loaded but
in fact the page isn’t ready to be interacted with quite yet and the user has to ‘wait longer’.

Graphs

The following graphs show the average time, in milliseconds, each event takes to ‘complete’.

Firefox Fresh Full

Explanation of Deltas

In the Firefox vs Chrome Fresh Installs graph, Firefox was loaded up with the default minefield page. This page is significantly heavier (both in text and images) than the Chrome Fresh Installs default page (google.com).

It should also be noted that Chrome draws the window and browser chrome at the same time.

In the Firefox vs Chrome Full graph, Firefox was loaded with at least four tabs while Chrome was only loaded with one tab (google.com). This has a significant affect on the Window Drawing time and the Close Window time (diaglog box that informs of closing multiple tabs opens and needs to be closed first).

Recommend Actions

With just a few changes in the Firefox start-up process, we could greatly enhance the feeling of Firefox’s speed. The changes listed below are recommendations to help better the overall Firefox experience.

  • Draw the OS spinner icon as little as possible, but one solid break isn’t bad and might be better than one really long spinner.
  • Draw the browser chrome while the window is being animated (drawn) to size. So that most of the drawing happens simultaneously rather than sequentially.
  • Make a new ‘website loading’ icon with less visual weight that animates faster but is slightly larger (would allow a user to ‘see’ the faster animation).
  • ‘Lazy’ load tabs that are being restored (already being talked about).
  • Load upgrades and add-on updates upon browser close, not browser start.
  • Delay loading the website’s title until the website is ready for interaction.
  1. Tiago Sá June 16, 2010 @ 4:01 pm

    I think the pie-chart loading icon in the favicon in the nightliesis fantastic, and it really makes it feel way WAY faster than it actually is. It’s also a fantastic solution for replacing the loading bar, and make it tab specific. It’s a fantastic solution and I hope they don’t change it (much).

  2. SilverWave June 16, 2010 @ 4:34 pm

    Yeah regards ‘Lazy’ load tabs… I use BarTab and ff just loads my 20-50 tabs when I click on them, much better.

    Anything that can be done to improve speed is welcome, and the tricks you have identified are interesting…

    But the ff parser is just slower (Lots better that 3.6!) and ff is really slow at js.

    See an example below, it is admittedly a corner case, with a large file loading, but true not the less:

    Bug 559396 – Large ShelveLogger files are slow in Firefox.

    BTW all this work is appreciated, I love ff to be fast and it is my favourite browser on the pc.

  3. Barryvan June 16, 2010 @ 5:43 pm

    In the Firefox 4 UI mockups, isn’t the website loading icon on the tabs meant to be replaced with an on-the-tab, 1px progress bar?

    I seem to recall that by using a non-linear scale on the this progress bar, the perceived load time can also be reduced.

  4. j June 16, 2010 @ 5:45 pm

    No doubt, Firefox is fast enough on modern computers. I have a machine bought in the earlier part of this decade, Chrome takes 5 seconds max, Firefox can be a lot slower, especially if I try and load it right after Windows boots.

    At work, with so many installed applications and restrictions, it’s even worse, most times it takes almost half a minute on a good run.

    But at least by the end of this decade, everything will be so fast, that startup performance should be the least of our complains about Firefox…

  5. joe June 16, 2010 @ 6:54 pm

    I call bullshit. Firefox doesn’t show up for seconds, chrome is instantaneous.

  6. David Naylor June 16, 2010 @ 8:26 pm

    The problem is that every single user out there will be comparing a bloated Firefox profile with loads and loads of history, bookmarks, extensions. To them, Chrome will always be faster because they have no way of knowing what Chrome will be like with the same amount of clutter – if they even are aware of the unfair comparison.

    In my eyes, Firefox devs need to work hard on improving the startup with such bloated profiles. It’s an unfair comparison, but sadly that’s the comparison being made by millions of users out there.

  7. John Wayne Hill : Blog – Perceived Speed Performace | Chrome OS Blog June 16, 2010 @ 8:28 pm

    [...] See original here: John Wayne Hill : Blog – Perceived Speed Performace [...]

  8. Karl Herler June 16, 2010 @ 9:55 pm

    @David Naylor My Chrome (albiet dev build) loads a lot more stuff than my firefox (minefield), I have about 4000 bookmarks, 6 extensions and a more comprehensive history in Chrome, while in minefield only loads about 10 bookmarks, 0 extensions and a quite limited history.
    I do perceive startup times in minefield to be noticeably slower even though my profile data is a lot smaller.

    @John I really like your idéas for creating a more speedy feeling, and would it be a good idea to delay loading of history and bookmarks as well as plug-ins a bit since it is unlikely that a user would need them until they click on either menu item, open a new tab, or the browser calls for them (when a page is done drawing)?

    Oh and on a side note how are you enjoying the internship? :)

  9. skierpage June 16, 2010 @ 10:22 pm

    “Delay loading the website’s title until the website is ready for interaction”

    That’s just stupid. I want to see the title ASAP. I’d even like to see the favicon ASAP, alpha-blended behind the (excellent) per-tab pie-loading animation. Have you ever reloaded a bunch of tabs or restored profile and tried to remember which tab you want? The sooner Firefox can provide me useful information about a tab, the better.

  10. henshaw June 17, 2010 @ 4:44 am

    I have to agree with skierpage – delayed loading of the title was the one thing that struck me as a loss of functionality. For example, when restoring a session I may want to cancel loading of a page [1] and that’s hard to do when I can’t identify it before it’s loaded. Additionally, would this mean that a page that is very slow to load to interaction-readiness (say many tens of seconds) would not show a title the whole time?

    [1] A few possible reasons for wanting to cancel loading a page:
    - I’m finished with it and didn’t close it before the previous session exited/crashed/was killed/was forcibly logged out.
    - It’s resource heavy and slow to load
    - It’s resource heavy in a way that causes strain on the whole system
    - It’s known to crash the browser
    - Following a link to somewhere I don’t want to go (accidentally or through a pesky internet man trick).

  11. henshaw June 17, 2010 @ 4:58 am

    “Load upgrades and add-on updates upon browser close, not browser start.”
    This is another one to be careful of. If the browser is being closed because the user is logging out, then taking too long to finish closing could lead to it being killed by the system. Possible downsides are an incomplete update or an interrupted close leading to the session restore dialogue next time round.

  12. j June 17, 2010 @ 5:50 am

    @David Naylor, those excuses don’t hold up with my own experience. I use no extensions, less than a dozen bookmarks, and Firefox can still start slow on slow PCs compared to others. This is shown time and time again on various tests.

    Either the benchmarkers are wrong, or there are real issues. Denial is not a solution.

  13. j June 17, 2010 @ 6:06 am

    To the point about Firefox not loading as fast on a fresh install “because” of the Firefox start page being more complex, I don’t think Chrome (or Firefox) would load much differently if the homepages were switched.

    I’ve never even noticed that Chrome didn’t load the title until the page was finished loading. But to regress to this type of shenanigans doesn’t make any sense. If Firefox and Chrome loaded pages at the same speed, but Firefox displayed the title before, than clearly, Firefox is overall faster to the user.

    If I could choose between 2 second sequential loading vs 5 second overall at first, but slow to follow through, I’d choose the 2 second sequential loading style. The webpage drawing “issue” seems to be recently resolved with the implementation of lazy frame construction. But it doesn’t really matter anyway, shouldn’t this type of issue be resolved by the Gecko guys?

    Here is a real world case for you all to tackle, on Oracle PeopleSoft, when I’m loading an invoice, and say, add another row, when Firefox is ready to create a new page with a new row, it displays the page from the leftmost, then reconfigures the display back to the far right, where I was inputting data.

    Chrome smartly on the new page doesn’t even bother to start the loading at the left, they just create a new page on the same position where I was.

  14. David Bolter June 17, 2010 @ 7:02 am

    If the accessibility engine in Firefox is somehow invoked this can slow things down. Common reasons are ant-spyware, windows tablet pc software, and some add-ons. It is something to consider investigating before questioning the integrity of benchmarkers.

    Add-on to check accessibility is here: https://addons.mozilla.org/en-US/firefox/addon/2407/

  15. John Wayne June 17, 2010 @ 12:17 pm

    @Tiago Sá I think you are right about the pie-chart loading icon. It does feel faster than the spinner.

    @Barryvan You are right that in the current mockups of FF4 we have a loading bar on the top of tabs. I’ve yet to actually play around with this concept, but it could easily help increase the perceived speed performance.

    @David Naylor I think you are right in calling this out. I believe it’s something we’ve been talking about.

    @Karl Herler Thanks for the great comments. I’ll likely be looking into other ways that we can make Firefox seem speedier and your thoughts are great. I’m enjoying my internship immensely, thanks for asking!

    @skierpage I think you make some good comments about getting information as soon as possible. There are many many cases for which to solve.

  16. Browser Speed – Perception IS Reality | Revelations From An Unwashed Brain June 19, 2010 @ 9:51 am

    [...] an entry on his personal blog that was reposted to Mozilla’s über-blog, Planet Mozilla, John Wayne Hill, an Indiana [...]

  17. DoTheFuture June 20, 2010 @ 6:21 am

    If Firefox will not be as fast as chrome then it will die :(

  18. Les Stroud June 20, 2010 @ 9:18 am

    @David, John
    I think you are using a convenient excuse on the profile/extensions. Two things:
    1. My chrome and firefox are running the same extensions. Sure the technologies are different, but there are the same number of extensions used for the same purpose (development extensions). Still, chrome seems more performant.

    2. It doesn’t matter about whether they are comparing browsers with extensions or not. Users don’t see it that way. For users, it is firefox and chrome. The extensions are part of the package…especially if they need those extensions to do what they need to do on the web. So, you have to find a way to make the extensions non-impactful to load time. Can they be lazy? Or at least called out when they are causing slowness?

  19. Brett Wilson June 20, 2010 @ 7:26 pm

    I wrote some of the code in Chrome that updates titles and such. I don’t think anybody considered the title update delay would make it feel faster. Rather, this is just to avoid updating the title rapidly as the page loads (if you update it right away you’ll see a flash of the default title, based on the URL, before the actual title tag is parsed). Rapid updates slow everything down and the flickering looks bad.

    The title update time has nothing to do with when the page is ready for interaction. Title and favicon updates are coalesced in 200ms intervals. I assume Firefox has something similar, although with possibly different timings. There’s no other delays, although WebKit could have a delay in the time it decides to tell us it found a title in the document.

    If I could be sure the title, URL, and favicon wouldn’t change (so there’s no risk of flicker or extra redraws), I would personally choose to update them as fast as possible.

  20. Ajaxian » Studying perceived performance of Firefox and Chrome June 21, 2010 @ 3:22 am

    [...] It isn’t just about JavaScript performance though, the battle for the hearts and minds is perceived performance. This is a tough game for Mozilla as the average user giving Chrome a shot is doing so on a fresh [...]

  21. Mathieu 'p01' Henri June 21, 2010 @ 5:27 am

    Would be interesting to see a comparison against Opera 10.60 since faster browsing experience is Opera’s motto.

    In my experience Opera’s (perceived) speed is pretty stable over time and with a big history and restored session.

  22. qfel13 June 21, 2010 @ 11:39 pm

    Hi there is small mistake in third graph. Labels are named Firefox fresh and Chrome fresh and should be Firefox full and Chrome full

  23. Arkh June 22, 2010 @ 2:54 am

    Recommend Actions : install Firefox on a SSD.

  24. Rob June 22, 2010 @ 2:56 am

    As a firefox user (with probably too many extensions installed) the most annoying delay is from clicking the ‘launch firefox’ icon to having some chrome with a workable address bar, not necessarily the loading of the homepage itself. For this reason I think not loading updates on start-up is especially important.

    However I don’t think loading updates when ff closes is a good solution as I suffer from the dreaded ‘firefox is already running’ message enough already. On top of this I might have firefox open on my work computer all day meaning there would be a long wait while potentially important updates to install.

    Why not check for add-on updates during idle time when the browser is running, then if one is found I can choose to install it now or later.

  25. Aaron Peters June 22, 2010 @ 4:00 am

    hi John,

    interesting article!

    You write “in Chrome the title is not shown un- til the website has completed loading”.
    I don’t see this (Chrome 5) at all. Tried several different pages.
    The page title appears in the tab after page rendering has started but not after the whole page being ready.

    On this same subject, you also write “This is a simple trick that allows Chrome to feel faster in that once the title is shown, the page is ready.”
    Do you have data to back this up, that this makes Chrome feel faster? Without data it’s a hypothesis and I would very much like to see this one tested/validated. As a web performance consultant, I´m very interested in perceived performance.

    Keep up the good work,
    Aaron

  26. Bob June 23, 2010 @ 3:22 am

    Perhaps history and bookmarks could be loaded in the background. That would make firefox feel faster.

  27. Estudando a performace do Firefox e Chrome | Web Absolute June 23, 2010 @ 8:52 am

    [...] sobre o desempenho de JavaScript, no entanto, a batalha pelos corações e mentes é percebida no desempenho feito por John Wayne. Este é um jogo difícil para o Mozilla como o usuário médio, o Chrome é um navegador novo, sem [...]

  28. Morten June 27, 2010 @ 9:07 am

    Firefox is slow. No doubt about it. All benchmark tests point to this. Everything else are fanboys talking.

  29. Manuel June 28, 2010 @ 7:59 am

    On my system (Intel Atom 330 + Intel SSD, so not-so-fast CPU but very-fast storage), fresh installs, Firefox takes some seconds to start (the Windows cursor shows the system is loading the application) while Chrome starts instantly. I also tried to disable the update-on-startup feature, but nothing changed.

  30. It's just plain wrong July 14, 2010 @ 1:00 am

    First of all, “Firefox was loaded with at least four tabs” and “Chrome was only loaded with one tab” – whose fault is this? Instead of writing the entire article, recording YouTube videos and drawing several charts, you could have rather done the experiment the right way and displayed a single chart. This way the whole experiment has no value.

    Second thing, the “Window done drawing time” is clearly enormous in Firefox compared to Chrome. This has nothing with perception, it’s a measured value. Firefox with no extensions takes several seconds to even show in taskbar on a cold start, while Chrome is started instantly each time!

    Since this *is* an open-source application with numerous developers working on it, it would be much wiser to concentrate on delaying a bunch of secondary stuff (which is obviously secondary, since Chrome manages to avoid it) and bringing the content as fast as possible. Chrome does use more memory however, but having 4Gb RAM is practically the lower limit these days.

    I still can’t believe Firefox has become one of the slower brosers around! Google for “browser speed comparison”, and you will find that FF3.6. is usually *the* slowest browser of all.

  31. Studying perceived performance of Firefox and Chrome July 16, 2010 @ 1:23 pm

    [...] It isn’t just about JavaScript performance though, the battle for the hearts and minds is perceived performance. This is a tough game for Mozilla as the average user giving Chrome a shot is doing so on a fresh [...]

  32. Firefox 4 startup gets faster | All my RSS September 19, 2010 @ 7:32 am

    [...] for quite a while. Over the summer, a pair of Mozilla interns looked at simple tweaks which would make Firefox appear faster. It now looks as if at least one of the suggested changes will make its way in to Firefox 4. [...]

  33. Rob December 17, 2010 @ 11:45 pm

    hi John,

    interesting article!

    You write “in Chrome the title is not shown un- til the website has completed loading”.
    I don’t see this (Chrome 5) at all. Tried several different pages.
    The page title appears in the tab after page rendering has started but not after the whole page being ready.

    On this same subject, you also write “This is a simple trick that allows Chrome to feel faster in that once the title is shown, the page is ready.”
    Do you have data to back this up, that this makes Chrome feel faster? Without data it’s a hypothesis and I would very much like to see this one tested/validated. As a web performance consultant, I´m very interested in perceived performance.

    Keep up the good work,
    Rob

  34. Identifying the problem requires understanding what correlation is (and what it isn’t) « the philosopher developer February 2, 2011 @ 5:35 pm

    [...] phenomenon: copying files in Windows Vista is faster than in Windows XP but feels slower; Google Chrome appears to load up much faster than Mozilla Firefox, even though Firefox is nearly as …; and so on. So I cannot claim that my boss was “wrong” for wanting to revert back to [...]

  35. rudraksha March 5, 2011 @ 6:05 am

    It isn’t just about JavaScript performance though, the battle for the hearts and minds is perceived

Leave your comment