Pages

July 3, 2014

Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark

If you could only choose one browser, which one would it be? Which is best: Firefox, Chrome or Opera? We’ll show you.
The war between web browsers has become more diverse as Internet Explorer, the former giant of the space, has given up ground. That space has been filled by Chrome, Firefox and Opera, a trio of free competitors known across the globe.
You really only need one browser, though, and once you choose you’re likely to feel locked in as you accumulate plugins and bookmarks. We’ve taken a close look at each browser to see which comes out on top for a variety of benchmarks.

Look And Feel

In many ways these three competitors look and behave similarly. All three are tabbed browsers, all three have a small main menu tucked into an upper corner of the display, and all three have a neutral gray-and-white theme. Opera, which has a photo background for its default home page, is the only one that adds any visual variety.
All three of the browsers have a home page which consists of icons and/or previews of frequently visited websites that can be customized to include those specific websites you’d like featured. Chrome and Opera add Google Search to the mix, however, while Firefox does not include search by default. Chrome and Opera also incorporate a few extra options into the home page while Firefox includes only website previews.
firefoxhomepage   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Chrome and Opera continue to show similarities in their streamlined options menus, which open a new tab in the browser instead of in a separate window. Firefox, meanwhile, keeps it old-school with a more traditional options menu, though the browser does open at least some of its options within the browser window, including plug-ins, history and print options.
Opera has a couple of unique customization options worth mentioning. These include support for themes and a Discover page that draws in top stories from various news feeds. Users of other browsers can mimic these extras with plugins, however, so this is unlikely to swing most users one way or another.
operahomepage   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
These broad strokes aside, there are relatively few differences in look and feel, though that doesn’t mean finding a preference is difficult. Everyone will have their own opinion; I personally find Firefox’s new menu contrived, but others may find the streamlined feel of Chrome un-intuitive. Those who are sticklers about interface design should try all three – but those who are not can likely ignore the interface as a factor and decide based on other tests, which we’ll now dig into.

Sync

All three of these browsers can sync user preferences and bookmarks across different devices, and all three do so in a similar way. You’ll have to create an account, log in with it on each device you’re using – and that’s it. Your bookmarks and preferences are synced automatically and stored on third party servers. Sync even works with the mobile versions of each browser.
firefoxsync   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
The only important difference between the three is that only one, Chrome, is produced by a company with a reason to do something with your data besides keep it 100% secure. Google has been clear about the fact that it examines Gmail data, so it’s hardly inconceivable the company would do the same with bookmarks and saved tabs. This can make the Chrome sync feature look a bit dubious to users who are concerned about privacy.

Text Scaling

Scaling has become a major issue for web browsers because of the very wide range of displays they may be used on. A PC owner may be using an 18″ 1280×1024 monitor from ten years ago, or could be using 30″ 4K display they just brought home.
I use a 2560×1440, 27″-inch Dell monitor. To provide a comparison of how these browsers scale I’ve taken screenshots of each at 100% scaling, 125% scaling and 150% scaling. The browsers, left to right, are Chrome, Firefox, and finally Opera. We’ll start at 100%.
browsertest1   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Chrome and Opera are almost identical in this test, while Firefox stands out with its much larger, bolder type. All three are readable on my 1440p, 27-inch monitor, but Firefox is undeniably the least taxing due to its significantly larger text. The trade-off is approximately six lines of less readable text per full browser page.
Now let’s increase the size a bit to 125% (120% in the case of Firefox, which skips from 120% to 133% by default).
browsertest2   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Once again Chrome and Opera are about the same, while Firefox is much larger. An extremely close look at each will show signs that text has begun to blur due to the scaling involved, but everything remains readable. Chrome and Opera show themselves to be far more readable at 125% than at 100% – on this page, at least. Were I to view is page frequently, I would not want to view it at less than 125% scale on those browsers.
Let’s go big and ramp up to 150%.
browsertest3   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Firefox is really too large at this scale, as text is gigantic and the white space between paragraphs is huge. Chrome and Opera are more reasonable, and users with less than perfect eye-sight may find this the preferable setting on a high-PPI monitor. There are noticeable signs that scaling has taken its toll in Chrome and Opera, though, as both are coarser than Firefox.
To drive this point home let’s blow up a smaller portion of each browser’s text by an additional 400%. First take a look at Chrome.
browsertest400chrome   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
And now take a look at Firefox.
browsertest400firefox   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Firefox simply does a better job of aliasing, which translates to a sharper, more refined look. This becomes subjectively apparent as scaling in each browser is increased, and by 150% the difference is obvious, particularly when viewing high contrast (black on white, or white on black) text.
Oh, and you may be wondering why Chrome and Opera are so similar. The answer is that they’re the same, at least so far as web page layout is concerned. Both use the Blink engine, which was developed by Google in cooperation with Opera. Firefox, on the other hand, uses an engine called Gecko.

Image Scaling

While text is the most important part of a web browser’s scaling, it’s not alone. Images can also be impacted, particularly when the image itself includes text. To see how each browser handles image scaling I’ve picked one of my favorite hardware sites, The Tech Report, as a testing ground. This site is a great test bed because it does not dynamically scale image content and it includes images with text in the header.
Again, we’ll start at 100%. I’ve once again laid out Chrome on the left, Firefox in the center and Opera on the right.
browsertest4   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Here we see the downside of the Gecko engine. Its larger scaling across the board improves the readability of text, but drastically decreases the fidelity of images. The Tech Report’s logo is so fuzzy it almost looks as if something is wrong with the page.
On the flip side, though, Firefox’s text is easy to read at this scale, while many users may need to increase scale in Chrome and Opera to make browsing The Tech Report’s page comfortable. What happens when we go up to 125% (120% in Firefox)?
browsertest5   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Firefox is already hopeless at this scale, as its blurry rendering of the The Tech Report’s logo is terribly obscured. Chrome and Opera, meanwhile, aren’t as sharp as before, but still retain a surprising level of clarity.
Chrome and Firefox are, in fact, better at 125% than Firefox is at 100%. Have a look at the image below. On the left is Chrome at 125% scaling, while the right is Firefox at 100% scale.
browsertest7   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Chrome’s image rendering is sharper despite the fact that the images and fonts in both browsers are now almost identical. This puts Firefox at a severe disadvantage, and it explains why I’ve always “felt” that Firefox doesn’t look as crisp as its contemporaries. Turns out I wasn’t just seeing things; the browser’s Gecko engine does, in fact, have some trouble with images.
Now let’s go big by kicking up the scale to 150%.
browsertest8 640x426   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Firefox, which was already hopeless, is now…well, something worse than hopeless. All this comparison does is rub salt in the wound and reaffirm that the Blink engine used by Chrome and Opera offers sharper image rendering.

Performance

Virtually all the browsers available try to make claims that they are the quickest. Usually such claims are based on a particular benchmark which is favorable to them. This can make deciding which is actually quicker very complicated. Let’s take a look at five different benchmarks and see how the scores stack up.
All the following benchmarks were conducted on the same Windows 7 desktop. The system had a Core i5 3450 processor, eight gigabytes of RAM and a GTX 780 video card. Every test ran individually without other programs or browser windows open.

Peacekeeper

peacekeeperbench   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
Peacekeeper, developed by well-known benchmark powerhouse Futuremark, is a demanding test that primarily tests HTML5 performance. It spans WebGL, video playback, 2D games and a variety of other workloads. Here’s how each browser stacked up when gaining points.
Chrome: 5,132 points
Firefox: 3,677 points
Opera: 4,778 points
This is a clear win for Chrome, which defeats Opera by several hundred points despite their use of a common engine. Firefox is far behind, scoring about two-thirds of what Chrome managed.

SunSpider

sunspider   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
The SunSpider test is the elder of these browser benchmarks, as it has existed since 2007. Several updates have been released, but JavaScript performance remains the focus. In this test, unlike the others, a lower number is better as the results are the milliseconds required to complete the request.
Chrome: 147.2 ms
Firefox: 139.9 ms
Opera: 158.2 ms
Here we see a reversal of fortunes for Firefox, which takes the lead over Chrome. Opera, meanwhile, comes in a distant third, as its score is more than 10 milliseconds higher than Google’s browser. That’s one win for Chrome, one for Firefox, and none for Opera.

RightWare BrowserMark

browsermark   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
BrowserMark is another advanced benchmark that tests a wide variety of standards including JavaScript, HTML5, WebGL and CSS3/3D. This makes it a very broad, complete benchmark, much like Peacekeeper. Does this mean Peacekeeper’s results will be repeated? Here are the points each browser obtained.
Chrome: 5,358 points
Firefox: 4,591 points
Opera: 5,189 points
Yes, these figures line up much like those of Peacekeeper’s, though the gaps between the competitors are much smaller. Chrome and Opera are extremely close, as you might expect given their similarities.

Babylon.js Train Demo

trainbenchmark   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
This extremely demanding demo uses WebGL to render large landscapes through which a train trundles about. Because my test desktop had a GTX 780 Ti, an extremely powerful graphics card, I used the most demanding test this benchmark allows; all FXAA 4x on and a camera that views the entire landscape at once. Here’s the average frame rate each browser managed under those conditions.
Chrome: 60 FPS
Firefox: 47 FPS
Opera: 60 FPS
The cap in this benchmark is 60 frames per second, which is achieved by both Chrome and Opera. Firefox is left behind with an average of 47 frames per second. While this may not seem like a huge difference, the demo’s animation was noticeably less fluid in Firefox.

Wirple BMark Canvas 3D

bmark   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
BMark is a 3D test that can be used to look at either the Canvas 3D or WebGL standards. Since we’ve already looked at WebGL with the train demo and in other benchmarks, we’ll only be using BMark to focus on Canvas 3D.
This benchmark renders a constantly increasing number of boxes on screen. When this causes the frames-per-second to dip to 10, the number of boxes rendered is counted and this becomes the score. Thus, a higher score is better.
Chrome: 551 boxes
Firefox: 459 boxes
Opera: 542 boxes
Well, no surprises here. Once again we see that Chrome comes out on top while Firefox crawls behind the pack and Opera lands smack in the middle.

Performance Conclusions

The numbers say that Chrome is the quickest browser of the three. Whether that translates to any meaningful real-life difference, however, is debatable, and there are also benchmarks that will buck these trends. Google and Mozilla both have their own in-house tests, and as you might expect, their respective browsers tend to win their tests.
Personally, I have difficulty claiming any noticeable difference in performance between the three browsers in daily use. Web pages load in approximately the same time, YouTube videos play smoothly in each, and games run without a hitch. While the benchmarks indicate there is indeed a difference, and Chrome generally wins, you may never encounter a situation where the difference becomes relevant.

Verdict: Chrome Wins

We’ve now taken a look at features, scaling and performance, three major factors that determine every user’s preference in web browsers. When everything is considered it becomes clear that Google’s Chrome has a lead on the competition, which explains why it’s now judged the world’s most popular browser by most usage share monitors.
Chrome has two things going for it. The first is excellent image scaling. Image clarity is far superior to Firefox, which looks downright fuzzy at times. The result is a crisp, beautiful browsing experience. Opera shares this victory because it uses the same web layout engine.
chromekingofthehill   Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark
The second advantage is speed. Chrome beat Firefox and Opera in most of the benchmarks, and Firefox suffered a severe thumping overall. As mentioned, I have a hard time seeing a difference in performance during everyday use, but just knowing Chrome is faster gives it an edge. All three browsers have very similar feature sets, so why not use the quickest of the bunch?
There’s also a familiarity to Chrome. Google Search is the homepage, bookmarks are synced with your Google account, and Google’s massive Chrome Web Store, which offers free and paid plug-ins, is similar to the Google Play store on Android devices.
Chrome has just one flaw, and that’s text scaling. Fonts are rendered much smaller than in Firefox by default, and don’t look as sharp even when Chrome is scaled up to match Mozilla’s alternative. Users who read a lot of text online, have poor eye-sight, or own a very high PPI display may find Chrome frustrating. Opera, of course, shares this flaw.
Still, defeat in a single battle does not cause Chrome to lose the war. On balance it’s a quicker, more attractive experience, and it easily hooks into the Google ecosystem so many people already use. Chrome has become the browser to beat.

Share Your Favorite Browser

Is Chrome the right option for you, or do you love another browser? Let’s talk about the browsers that work best for you, and which benchmarks you find to be most important. Is it the ecosystem of a browser that keeps you using it? Or is it all about speed? It’s time to have your say!

Source: http://www.makeuseof.com/tag/browser-wars-firefox-vs-chrome-vs-opera-definitive-benchmark/