Are legacy browsers worth supporting?

Lassi Heikkinen — Tue, 22 Oct 2019 08:15:06 +0000

TL;DR

Yes, if your potential users use them.

Introduction

In June 2019 verkkokauppa.com was visited or tried to be visited by 34 different browser vendors, by 1518 browser versions, by 20 operating systems and by 4271 screen dimensions. That's a lot to support especially when considering the number of possible combinations.

A fundamental problem in web development since the early days has been drawing the line which browsers and devices to support and which not. Ultimately the question is how to keep the website serving as many users as possible while making use of the helpful features of the modern browsers which the vast majority of users use anyway.

When tackling the problem two questions are asked: if non-standard code (aka browser hacks) are justified and how small ROI (Return of Investment) is justified in order to support a broader set of browsers. In other words the second question is: how much time can be invested to support more browsers.

Perhaps we should also take a closer look if the browsers are used to generate any revenue or are some browsers used more like for fun.

Let's look at one approach how to determinate which browsers are worth supporting.

Tools

First we want to gather all data available to make as good decisions as possible. Our tools and sources include:

Google Analytics 360 (GA) to know how the users behave.
Browserslist (BL) to see what browsers our potential users use.
Can I use (CIU) to see what technologies different browsers support.
CrossBrowserTesting (CBT) to test how our website behaves in different browsers.
BrowserHacks (BH) to find technical solutions to specific browser errors.

Results

While the actual data is business critical and classified we can share a few interesting highlights from June 2019. We use revenue weighted data ourselves but that cannot be shared.

Operating systems by visits

OS                   Share
--------------------------
Android            38.79 %
Windows            29.56 %
iOS                24.70 %
Macintosh           5.66 %
Linux               0.98 %
Chrome OS           0.20 %
Windows Phone       0.06 %
Playstation 4       0.01 %
Tizen               0.01 %
Xbox                0.00 %

Source: GA

Other operating systems include: Xbox, Blackberry, OS/2, FreeBSD, Nintendo WiiU, NetBSD, OpenBSD, Nintendo 3DS, Playstation Vita and SunOS.

Screen dimensions by visits

Dimensions           Share
--------------------------
 360 x 640         13.01 %
1920 x 1080        11.09 %
 375 x 667          9.36 %
 768 x 1024         4.74 %
1366 x 768          3.84 %
1536 x 864          3.48 %
 375 x 812          3.17 %
 360 x 740          3.06 %
 360 x 720          2.64 %
 320 x 568          2.63 %

Source: GA

Browser vendors by visits

Browser                  Share
------------------------------
Chrome                 53.02 %
Safari                 24.62 %
Firefox                 7.47 %
Samsung Internet        3.93 %
Android Webview         3.60 %
Edge                    2.38 %
Internet Explorer       2.21 %
Safari (in-app)         1.62 %
Opera                   1.00 %
YaBrowser               0.09 %

Source: GA

Browser versions by visits

Browser                Version       Share
------------------------------------------
Chrome                    74       27.93 %
Chrome                    75       20.86 %
Safari                    12       20.05 %
Firefox                   67        5.39 %
Samsung Internet           9        2.94 %
Chrome                    73        2.18 %
Internet Explorer         11        1.99 %
Android Webview           74        1.82 %
Safari (in-app)        (n/a)        1.46 %
Edge                      17        1.21 %
Safari                    11        1.21 %
Chrome                    72        1.16 %
Android Webview           75        1.04 %

Source: GA

According to this data 9.15 % of our website users use mobile in-app browsers (Samsung Internet, Android Webview and Safari in-app) which is surprisingly high number.

Browser versions used by at least 1 % of Finnish internet users

Browser                Version       Share
------------------------------------------
Chrome                    74        36.3 %
Chrome                    73        16.5 %
Safari                    12        16.7 %
Firefox                   66         4.9 %
Chrome                    71         2.4 %
Internet Explorer         11         1.8 %
Chrome                    72         1.6 %
Samsung Internet           8         1.5 %
Chrome                    57         1.4 %
Edge                      17         1.4 %
Safari                    11         1.2 %
Chrome                    70         1.0 %
Samsung Internet           9         1.0 %

Source: BL

On average our website users seem to use more modern browsers than Finnish internet users in general.

Discussion

Looks like the in-app browsers are gaining popularity. They should be investigated in a more detailed manner.

But the question of this study, what browsers to support? Should we focus on browsers that are used most today or browsers that have more potential?

The easy answer is that let's support all browsers. The better browser supported website in technical terms, the more revenue, right? Unfortunately in business we don't have time to support browsers that do not generate revenue. But first we must know the reason why a browser isn't generating revenue. Either users just don't want to use that particular browser to purchase or our website isn't working on that browser. If the latter is the case, we might want to fix it - or not.

To make the decision we can't look at our own data because it doesn't reveal the browsers which don't work with our website. Luckily we have market data from BL to tell the browser shares of Finnish internet users, our primary customer base.

To use BL data we must decide first how many different browsers we have the resources to test often enough to be able to keep the promise of supporting it. In our case a realistic set could include 10-20 browsers but how to select those browsers to have as broad coverage as possible?

After making a few iterations it looks like that by supporting 11 browser versions we can attain over 93 % coverage if we assume that when a website works in a specific version (like Chrome 49) it works in all newer versions too (eg. Chrome 57, 59 etc).

Here are the commands and data to find out the numbers:

$ ./node_modules/browserslist/cli.js "> 0.1% in FI"
and_chr 74
and_ff 66
android 4.4.3-4.4.4
android 4.2-4.3
chrome 73
chrome 72
chrome 71
chrome 70
chrome 64
chrome 63
chrome 59
chrome 57
chrome 49
edge 18
edge 17
firefox 66
firefox 65
firefox 60
firefox 52
ie 11
ios_saf 12.2
ios_saf 12.0-12.1
ios_saf 11.3-11.4
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 10.0-10.2
ios_saf 9.3
ios_saf 8
op_mini all
opera 58
safari 12.1
safari 12
safari 11.1
safari 10.1
samsung 9.2
samsung 8.2
samsung 7.2-7.4
samsung 4

$ ./node_modules/browserslist/cli.js --coverage=FI "> 0.1%"
These browsers account for 93.66% of all users in the FI

Then we combine the versions to minimize the number of tests needed:

Browser             Version
---------------------------
Android Chrome           74
Android Firefox          66
Android WebView         4.2
Chrome                   49
Edge                     17
Firefox                  52
Internet Explorer        11
iOS Safari                8
Opera                    58
Safari                 10.1
Samsung Internet          4

After combining the versions we have a set of 11 browser versions to cover 93.66 % of Finnish internet users (2019-07-02). The coverage is actually a bit higher because there are also some newer but less popular versions of for example Chrome which were left out of data because of the 0.1 % threshold.

Conclusion

One takeaway of this study is quite many users use mobile in-app browsers. Those browsers are difficult to test and support but they could probably generate more revenue if they were looked more carefully.

The introduced approach to select browsers worth supporting is a so-called quantitative model based on hard data. But in real life the result should be adjusted by the knowledge of experienced developers who may have a good grasp what are the estimated efforts of supporting different browsers. For example supporting Samsung Internet 4 might require too much effort compared to its 0.23 % share.

To sum up: use data but use it wisely.

Afterword

If the browsers could be tested automatically, the set could be much broader and the coverage could get closer to 100 %. CBT has an API but it lacks some browsers and it's not trivial to automate purchasing tests.

Another takeaway here is that we could monitor GA data to see if generated revenue by some browser version suddenly drops to zero in one day. The reason could be a regression bug that has affected the specific browser to make it not work on that website anymore. Depending on the amount of the revenue loss, the bug is fixed.

The last point is a little bit out of scope of this study but the anti-pattern from the '00 that tells users the website is best viewed in browser X, had a good point that no-one is going to switch their browser because of some website tells so, even if it's Verkkokauppa.com. But on the other hand if no-one tells the user about it, how can he know that his browser is out-of-date? It's like a closed door in a physical store not telling when it will be open. The relevant information should be offered for the customer but let himself to decide what to do.

Development work at Verkkokauppa.com

Lassi Heikkinen — Tue, 27 Aug 2019 05:56:00 +0000

TL;DR

We use React, Node, PHP, MariaDB and ~101 other open-source technologies in a big company. We are very pro and hip.

Foreword

Verkkokauppa.com is the largest online retailer in Finland, turnover being roughly 500 million. We have developed our systems in-house and used open-source software since the company was founded in 1992. The strategy to have internal software development teams has been one of the key decisions to land where we are today, building one of the best ecommerce websites in the market.

But we are not just professional and proud of our work, we are also super trendy. We even started to blog what we do and how we do in order to give something back to the dev community. Being transparent is also an evil attempt to lure you to join us. (fluency in Finnish is a requirement)

This article discusses briefly how our development work is done and what our technological choices are today. Focus is on the customer facing website.

Organization

Roughly half of our sixty employees in the tech department are working with internal systems such as product management, storage, logistics, point-of-sale machines and other physical world problems. About a fourth of people are in supportive teams and roles such as infra, testing, planning, DevOps, SecOps and DBAs. And then there are two web teams dedicated to the website the customers face and use. One web team is focusing on the platform (APIs, integrations, build tools etc.) and the other team is looking after the user experience (design, usability, accessibility etc.)

Process

We manage working by using agile model based on Scrum since 2013. Two weeks sprints are in use and we have dedicated Scrum Masters, Product Owners and a coach. Planning, Grooming, Cross-Team Planning, Retrospective, Review, Demo and Daily, we have it all! We have also opportunity to play and find new things every second sprint in Proto Friday.

From the developer's point of view it takes about 4-5 hours per week to participate all scrum meetings. Because heavy processes will always become overhead for the actual work, we try to keep the meetings as compact and relevant as possible. The same ideology goes with project management where Trello has been our choice since 2014.

We use git, GitLab and A Sane git Workflow to control our codebase state. Code reviewing is encouraged.

Technologies

Finally here's a list of the most essential technological choices of our site that make it possible to deliver a great customer experience for thousands of simultaneous online users.

Platform

Kubernetes
Docker

Persistent data

MariaDB
MongoDB

Non-persistent data

Redis
LocalStorage

Back-end

PHP: Symfony, Composer
Node: Hapi, NPM
Webpack, Babel, code splitting
PHPUnit, Robot, jest

Front-end

React: Redux, universal rendering
HTML: schema.org
CSS: Sass

Future

We are quite happy with our choices at the moment. Today radars are reporting on Styled Components, Preact, Svelte, GraphQL, WebAssembly but our focus at the moment is on refactoring codebase to use the technologies listed above and making new features for the users. Plus keeping the business people happy–you never know what they figure out next week.

DEV Community: Lassi Heikkinen

Are legacy browsers worth supporting?

TL;DR

Introduction

Tools

Results

Operating systems by visits

Screen dimensions by visits

Browser vendors by visits

Browser versions by visits

Browser versions used by at least 1 % of Finnish internet users

Discussion

Conclusion

Afterword

Development work at Verkkokauppa.com

TL;DR

Foreword

Organization

Process

Technologies

Platform

Persistent data

Non-persistent data

Back-end

Front-end

Future