{"id":120,"date":"2020-12-15T05:45:30","date_gmt":"2020-12-15T13:45:30","guid":{"rendered":"https:\/\/blog.mozilla.org\/performance\/?p=120"},"modified":"2021-03-01T07:22:40","modified_gmt":"2021-03-01T15:22:40","slug":"2020-year-in-review","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/performance\/2020\/12\/15\/2020-year-in-review\/","title":{"rendered":"Our Year in Review: How we\u2019ve made Firefox Faster in 2020"},"content":{"rendered":"<p>This year was unlike anything any of us has experienced before. The global pandemic affected how we learn, connect with others, work, play, shop, and more. It affected directly or indirectly every aspect of how we live. Consequently, a universally open and accessible Internet became more important to our daily lives. For some Firefox users, access to the Internet is not just important, it is essential.<\/p>\n<p>As the Firefox team adjusted to focus on features and improvements to help our users live a more Internet-based life, the performance program redoubled our efforts to deliver on the vision of &#8220;performance for every experience.&#8221; We hoped that by speeding up key parts of Firefox and Gecko like page load, JavaScript responsiveness, and startup, and by ensuring new features performed their best, that we could make the new normal a little less painful and a little more\u2026 well, <i>normal<\/i>.<\/p>\n<p><iframe loading=\"lazy\" title=\"www.mozilla.org - en-US-firefox - page load Fx71 vs Fx84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/sojDdzDiEiA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>With that in mind, we\u2019d like to share the work that we\u2019re most proud of this year and highlight how we make each version of Firefox faster than the last. Since we\u2019ve accomplished a lot this year, we\u2019ve broken the accomplishments into a few sections related to how we think about our work:<\/p>\n<ul>\n<li>\u201cPerformance for every experience\u201d details all the changes to Firefox itself.<\/li>\n<li>\u201cCulture of Performance\u201d includes all the work to develop tests, metrics, processes, and the other pieces to ensure that performance is central to everything that Firefox builds.<\/li>\n<li>Finally, \u201cBrowsing at the Speed of Right\u201d covers the work to improve performance for the Web beyond the borders of the Mozilla ecosystem.<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"Firefox slow reference device - startup 71 vs 84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/k2azNXhviHM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Performance for Every Experience<\/h2>\n<p>We believe that interactions with the browser and web pages should be quick and smooth. Pages load quickly. The web is responsive. And resources are used thoughtfully. This is the baseline performance we expect for all Mozilla products. In 2020, we improved all of these areas.<\/p>\n<p><iframe loading=\"lazy\" title=\"www.coursera.org\/learn-algorithms-part1 - page load Fx71 vs Fx84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ZwVBMlqZ3d8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h3>Page load<\/h3>\n<ul>\n<li>Firefox 75 included support for <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1542784\">the lazy image loading standard<\/a>. This feature can improve page load performance and reduce data by loading images when needed rather than on the critical path for the initial page load.<\/li>\n<li>Firefox 80 added an <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1492538\">optimization for Flexbox reflows<\/a>. This improves page load performance by more than 20% in some cases and reduces layout shift during page load.<\/li>\n<li>Firefox 82 features <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1606652\">speculative JavaScript parsing<\/a> that allows the browser to parse external JavaScript scripts as soon as they are fetched, even if never executed. This change generally improves page load by 3-4%, but for some sites can improve page load by more than 67%.<\/li>\n<li>Firefox 83 introduces the new <a href=\"https:\/\/hacks.mozilla.org\/2020\/11\/warp-improved-js-performance-in-firefox-83\/\">Warp<\/a> feature in the SpiderMonkey JavaScript engine.<\/li>\n<li>Firefox 84 adds support for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content\">link preloading<\/a>, which gives developers more control over resource loading and can improve page load by more than 10 percent.<\/li>\n<li>The new Firefox for Android that launched in August loads pages 20 percent faster than at the start of the year making it the fastest Firefox browser ever on Android.<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"docs.google.com - spreadsheets - page load Fx71 vs Fx84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xxvTvaA88GA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h3>Responsiveness<\/h3>\n<ul>\n<li>Firefox 72 included a change to how Firefox manages the addon blocklist which resulted in up to a 7 percent improvement to startup and session restore times.<\/li>\n<li>Completed the first two of three planned phases for the <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1606879\">Fast Shutdown<\/a> project resulting in Firefox shutting down three times more quickly.<\/li>\n<li>Firefox 85 Nightly for Windows includes a new <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1665451\">skeleton UI<\/a> for startup that means the first sign that Firefox is starting occurs in 10 percent of the time as before. This improvement to perceived performance of Firefox is especially helpful for users on slower machines. We hope to ship this new experience by default in early 2021.<\/li>\n<li>Implemented a <a href=\"https:\/\/blog.mozilla.org\/performance\/2020\/07\/16\/improving-firefox-startup-time-with-the-abouthome-startup-cache\/\">cache for the about:home page<\/a> at startup that improved the time to when Top Sites render during startup by just over 20%.<\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1624683\">Lazily loading<\/a> parts of the Firefox UI when they\u2019re needed, instead of automatically, results in browser windows opening more quickly. Between Firefox 77 and Firefox 80, the time to open new windows once Firefox decreased by about 10% on Windows.<\/li>\n<li>Firefox 81 includes <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1649515\">better playback quality<\/a> for 60fps VP9 videos on macOS when WebRender is enabled.<\/li>\n<li>WebRender also includes <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1604615\">optimizations<\/a> for shaders compilation that improved startup and session restore time by more than 10 percent.<\/li>\n<li>The new Firefox for Android that launched in August opens links from other apps 25 percent faster. On some devices this means it is 60 percent faster than the old Firefox for Android.<\/li>\n<li>General startup didn\u2019t improve much when compared to the MVP that launched in June 2019. While holding ground isn\u2019t normally a reason to celebrate, being able to do so while features were added to develop the browser from a MVP to the flagship Firefox browser on Android is a considerable accomplishment.<\/li>\n<li>Firefox for Android also shipped with a number of improvements to the responsiveness of key parts of the user interface including <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1615858\">accuracy<\/a> and <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1458653\">control<\/a> for touch scrolling, <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1676771\">reduced panning jitter<\/a>, how quickly the keyboard is shown, text appears when typing, and menus respond to user input.<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"Firefox fast reference device startup - Fx71 vs Fx84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/7V3Ub2ZaUZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h3>Resource Usage<\/h3>\n<ul>\n<li>Firefox 83 included WebRender support of macOS and further improvements to power use, especially when scrolling or watching videos. This work builds off improvements that were released in late 2019 and <a href=\"https:\/\/mozillagfx.wordpress.com\/2019\/10\/22\/dramatically-reduced-power-usage-in-firefox-70-on-macos-with-core-animation\/\">reduced Firefox power use on macOS by 300 percent<\/a>.<\/li>\n<\/ul>\n<h2>Culture of Performance<\/h2>\n<p>We believe everyone contributing to Mozilla products owns a share of performance. In order for everyone to share ownership, the Performance Program must build a foundation of validated tests, tools, metrics, and other resources (e.g., dashboards, documentation) that empower everyone to understand and impact the performance of the browser. In 2020, we improved our test infrastructure and enhanced our performance tools to measure improvements and diagnose performance regressions.<\/p>\n<h3>Maintain Table Stakes Performance<\/h3>\n<ul>\n<li>Improved the performance dashboard <a href=\"https:\/\/arewefastyet.com\">https:\/\/arewefastyet.com<\/a> by adding categories for memory, network, both cold and warm page loads, and live page loads. Also added results for WebRender and Fission variants.<\/li>\n<li>Introduced and refined sheriffing efficiency metrics for measuring the time taken for sheriffs to triage and raise regression bugs. These metrics were the focus of the <a href=\"https:\/\/blog.mozilla.org\/performance\/2020\/10\/15\/performance-sheriff-newsletter-september-2020\/\">performance sheriffing newsletter in September<\/a>.<\/li>\n<li>Introduced <a href=\"https:\/\/blog.mozilla.org\/performance\/2020\/11\/03\/dynamic-test-documentation-with-perfdocs\/\">dynamic test documentation with PerfDocs<\/a>.<\/li>\n<li>Introduced <a href=\"https:\/\/blog.mozilla.org\/performance\/2020\/11\/12\/using-the-mach-perftest-notebook\/\">mach perftest notebook<\/a> for analysing and sharing performance test results.<\/li>\n<li>Added support for running performance tests in a batch mode over several builds in a single CI job, resulting in a more efficient use of machine time without compromising coverage.<\/li>\n<li>Several improvements to <a href=\"https:\/\/blog.mozilla.org\/performance\/2020\/07\/15\/whats-new-in-perfherder\/\">Perfherder<\/a> to include support for ingesting results from tests running in batch-mode, the ability to sort results in the compare view, and improved bug templates.<\/li>\n<\/ul>\n<h3>Measure What Matters<\/h3>\n<ul>\n<li>Introduced visual metrics for page load tests in the continuous integration (CI) pipelines for Android, Linux, and macOS, with Windows expected by the end of the year. This effort replaces our proprietary page load engine with the popular open source browsertime tool.<\/li>\n<li>Completed the first version of a new visual completeness-based test for Firefox startup to provide a more user representative view of how quickly Firefox starts.<\/li>\n<li>Introduced mach perftest, a modern framework for performance testing with the goal of simplifying running and writing tests. All new tests will use this framework, and the existing tests will be migrated to it over time. Several teams have already taken advantage of this new test framework, including QUIC and Fenix.<\/li>\n<li>Enhanced mach perftest to support network throttling, and used this for our first user journey tests to compare http\/2 and http\/3.<\/li>\n<li>Combined cold and warm page loads into a single CI job, reducing the total execution time whilst increasing the test coverage.<\/li>\n<\/ul>\n<h3>Help Feature Teams<\/h3>\n<ul>\n<li>Replaced the Gecko Profiler add-on with Firefox\u2019s new Profiler toolbar, unifying recording flows for both desktop and remote mobile profiling\u00a0 (and eventually for both Firefox engineers and web developers).<\/li>\n<li>Setting up the Profiler got easier as well. As soon as the Profiler icon is in the toolbar, the start\/capture shortcuts will just work. Enabling it via \u201cTools -&gt; Web Developer &#8211; Enable Profiler Menu Button\u201d is no longer needed.<\/li>\n<li>The Profiler\u2019s sidebar is handy to summarize the currently selected stack\/leaf. We saw it delighted our users, so we made it more prominent by switching it default-on in the Call Tree.<\/li>\n<li>Right-click on markers in the Profiler timeline now provides the same context menu as the marker table and graph; letting you select to\/from timings and copy data.<\/li>\n<li>The media team added the first custom preset to the Profiler, giving contributors quick access to recording media performance with all the necessary threads and settings.<\/li>\n<li>In case of failed symbolication, the Profiler\u2019s metadata dropdown now provides a handy button to re-trigger the process.<\/li>\n<li>Dragging profile files to load them, which previously only worked on the homepage, now also works on a loaded profile<\/li>\n<li>Profile storage backend migrated to an official Mozilla-owned storage space<\/li>\n<li>The Firefox Profiler\u2019s support for showing FileIO markers for main thread I\/O has been extended to also show markers for off main thread I\/O, and even for threads that are not being sampled.<\/li>\n<li>The Firefox Profiler, used successfully by Firefox engineers to improve Firefox performance, has been made available for web developers. It replaces the legacy \u201cPerformance\u201d devtools panel. Using the Firefox Profiler from Firefox devtools will show profiles with a new view focused on the current tab.<\/li>\n<li>Markers 2.0 &#8211; Self-service profiler markers: in Gecko you <a href=\"https:\/\/firefox-source-docs.mozilla.org\/tools\/profiler\/markers-guide.html\">tell how you want the marker to look<\/a>, and it will appear in the Firefox Profiler front-end where you want it to, without needing to patch the front-end.<\/li>\n<li>Added the ability to delete profiles to provide users with agency over stored profiles.<\/li>\n<\/ul>\n<h3>Learn From Our Users<\/h3>\n<ul>\n<li>Created a new dashboard to more easily identify performance-related user feedback from sources like Google Play Store reviews and support.mozilla.org forums.<\/li>\n<li>Developed a proof of concept technique for observational analysis that correlates changes to performance metrics with user behavior metrics.<\/li>\n<li>Ran experiments on desktop and mobile to inform ship decisions and guide performance optimizations related to startup, page load, link preloading, and Warp.<\/li>\n<li>Started an audit and gap analysis of performance telemetry as part of a project to improve real user metrics.<\/li>\n<li>Added new telemetry to better understand performance and user impact related to slow startups, long-running scripts and resulting browser hangs, mobile performance, page load performance when using link preloading, garbage collection and JavaScript execution time, and more fine-grained page load metrics.<\/li>\n<li>Added annotations to the Background Hang Reporter to better understand hangs occurring in the Firefox UI and how they impact users.<\/li>\n<\/ul>\n<h2>Browsing at the Speed of Right<\/h2>\n<p>This means building the <i>right<\/i> performance for the web. There is no trade-off between performance (the \u201ceasy\u201d choice) and purpose (the \u201cright\u201d choice). Mozilla is uniquely positioned to bring a balance between what is good for the users of the web and what is good for the builders of the web. This includes influencing web standards and finding ways to make the web faster for everyone (regardless of location, income, or even browser). Members of the performance program also actively participate in the W3C Web Performance Working Group.<\/p>\n<p>This year, contributed to the discussions and feedback for Google&#8217;s <a href=\"https:\/\/web.dev\/vitals\/\">Web Vitals<\/a> proposal. This included in-house analysis of the <a href=\"https:\/\/web.dev\/lcp\/\">Largest Contentful Paint (LCP)<\/a> metric and how it compares to existing performance metrics\u2014both visual metrics and standardized web performance APIs\u2014that Mozilla uses internally to test performance on desktop and mobile. Our analysis found that while LCP is a promising improvement over some previous page load metrics, when the render time is not available, the value of the metric is significantly reduced. This work lays the groundwork for more complete implementations of Web Vitals in 2021, and closes the gap between measurement and performance analysis capabilities on desktop and mobile.<\/p>\n<p>In 2020 we also made progress on the Firefox implementation of the <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1667836\">PerformanceEventTiming API<\/a>.<\/p>\n<p><iframe loading=\"lazy\" title=\"Firefox wikipedia page - 71 vs 84\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ToB-qwATbMg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>What&#8217;s Next<\/h2>\n<p>The end of 2020 isn\u2019t the end of performance work for Firefox, but rather a milestone marking our progress. We still have a lot more that we want to accomplish.<\/p>\n<p>For the next few months our focus will remain on improving the responsiveness of key areas of the browser like long-running scripts that cause hangs, intra-site navigation, and startup. We\u2019re also laying the foundation for work later in 2021 related to how Firefox uses resources like CPU, battery, and network bandwidth. Work on improving page load will continue with some focus on performance cliffs that result in egregiously poor performance. Likewise, our work to develop the culture of performance across the Firefox org and influence performance of the broader web will continue as well.<\/p>\n<p>We hope that our work in 2020 made the new normal a little less painful for you. Our goals for 2021 are ambitious, so we invite you to join us as we work to make normal, whatever it might look like, less and less painful. At least when it comes to browsing the web.<\/p>\n<hr \/>\n<p><em>Have a question about performance? Find us on <a href=\"https:\/\/wiki.mozilla.org\/Matrix#Getting_Started\">Matrix<\/a> in the #perf room<\/em><\/p>\n<p><em>Found a performance issue on Firefox? <a href=\"https:\/\/bugzilla.mozilla.org\/enter_bug.cgi?product=Core&amp;component=Performance\">We&#8217;d love a bug report<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This year was unlike anything any of us has experienced before. The global pandemic affected how we learn, connect with others, work, play, shop, and more. It affected directly or &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/performance\/2020\/12\/15\/2020-year-in-review\/\">Read more<\/a><\/p>\n","protected":false},"author":1803,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[453323,457013,2022],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/120"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/users\/1803"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}