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)
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
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’.
The following graphs show the average time, in milliseconds, each event takes to ‘complete’.
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).
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.