https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022/ Skip to content Line Engineering Main Menu * Blog * Engineering Culture * Open Source * Careers * News * Research * LINE Developers * EnglishMenu Toggle + Ri Ben Yu ! This post is also available in the following language. Japanese The baseline for web development in 2022 [avata]By Alan Davalos | 2022.01.26 2022.01.26 Front-end Engineer - @AlanGDavalos TL;DR:The baseline for web development in 2022 is: low-spec Android devices in terms of performance, Safari from two years before in terms of Web Standards, and 4G in terms of networks. The web in general is not answering those needs properly, especially in terms of performance where factors such as an over-dependence on JavaScript are hindering our sites' performance. Hello there! I'm Alan Davalos, a front-end engineer at LINE. You might have thought this article's title is just clickbait but bear with me for a while, I promise it's worth it. The main reason for that is that there were some big changes in the web between 2021 and 2022 and those affect the way we should face web development as a whole. So, today I would like to address those changes and how well we are adapting to them as web developers by analyzing many different data points. The biggest change that happened in 2021 ~ The retirement of Internet Explorer There were many changes in 2021 but none were as big as the official retirement of Internet Explorer (IE). Microsoft made the announcement in May 2021 and by August many Microsoft products including Microsoft 365 had officially dropped support for IE. The official retirement date for IE is scheduled for June 2022 but there are several other reasons why we can consider IE as fully retired by now. Some of the Web's biggest sites drop support for IE After Microsoft's announcement, many other projects started dropping support for IE. Among them are sites most internet users interact with. For example, Google search dropped support for IE in October 2021. A tweet from October 2nd, 2021 by Principal Software Engineer and Engineering Director Malte Ubl mentioning Google search dropped support for IE.Twitter @cramforce In Japan, Yahoo! JAPAN announced set IE as a non-recommended browser in September 2021 (website in Japanese). An excerpt from Yahoo! JAPAN's page regarding their recommended browsers. The next quote has a full translation. Yahoo! JAPAN had Internet Explorer 11 as a recommended browser. But following the end of support of Internet Explorer announcement by Microsoft Yahoo! JAPAN decided to set Internet Explorer 11 as a non-recommended browser starting from September 7th, 2021. Furthermore, you can still use Internet Explorer 11 to use some of our services but you might face issues where the page doesn't behave or render properly. We would also recommend any users using Internet Explorer 11 to use other of our recommended browsers as the official end-of-support date for Internet Explorer 11 is getting close. Furthermore, WordPress, which is used in about 33% of the Web, also announced that they would drop support for IE in WordPress version 5.8 released in July 2021. [Wordpress-Support-1]When WordPress 5.8 is released in July of this year, Internet Explorer 11 will no longer be supported. IE's current market share There is a good reason why the announcements above didn't wait until IE's official retirement. IE's market share dropped sharply throughout 2021. A pie chart for the global browser market share in November 2021. A more detailed explanation is below.Graph derivative of "Browser Market Share Worldwide" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. A pie chart for the Japanese browser market share in November 2021. A more detailed explanation is below.Graph derivative of "Browser Market Share Japan" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. Globally, IE's current market share is under 0.5%. And even in Japan, which has a higher market share of IE compared to other countries, IE's market share is close to 2% and has a downward tendency. The new baseline for web development Until now we kept supporting IE due to its market share. But now, there are basically no good reasons to keep supporting IE. However, this brings up a new problem, IE was the support baseline for many tools. IE's development mostly stopped quite a while ago, so the web standards it supports are very different to those supported by modern browsers. Now that IE is gone, that baseline has become blurry. So, I'll take upon the task of defining a new baseline by analyzing the current status of our users' devices. Users' devices and browsers The market share for browsers and OS Let's take a look at the browser market share chart in a different format. A bar chart for the global browser market share in November 2021. A more detailed explanation is below.Graph derivative of "Browser Market Share Worldwide" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. A bar chart for the Japanese browser market share in November 2021. A more detailed explanation is below.Graph derivative of "Browser Market Share Japan" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. There are two tendencies I want to highlight here: 1. There are 3 browser engines we need to support 1. Chromium, the base for Chrome, Edge, Samsung Internet Browser, and Opera. 2. Gecko, the base for Firefox. 3. WebKit, the base for Safari. 2. The rate of Safari users in Japan is higher than the global average. The reason for the latter of those points is easy to figure when looking at the following charts. A pie chart for the global mobile OS market share in November 2021. A more detailed explanation is below.Graph derivative of "Mobile Operating System Market Share Worldwide" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. A pie chart for the Japanese mobile OS market share in November 2021. A more detailed explanation is below.Graph derivative of "Mobile Operating System Market Share Japan" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. As you can see, Android has around 70% of the global mobile OS market share while iOS has 28%. On the other hand, the opposite applies in Japan, where Android has only 33% of market share compared to iOS's 66%. The difference in CPU performance The difference in OS is not only on the software side, it also implies hardware differences. The biggest one could be considered the CPU performance. A bar chart comparing the multi-core CPU performance of representative iOS and Android devices released between 2011 and 2020. A more detailed explanation is below. A bar chart comparing the single-core CPU performance of representative iOS and Android devices released between 2011 and 2020. A more detailed explanation is below.Source: "The Mobile Performance Inequality Gap, 2021" - Alex Russell As seen in the charts above, iOS devices have had the best CPU performance scores every year for the past 10 years. Compared to that, high-tier Android devices have somewhat similar results, but mid-tier and low-tier devices perform quite worse than that. Quoting Alex Russel, the author of the article the above two charts came from : 2020's high-end Androids sport the single-core performance of an iPhone 8, a phone released in Q3'17 Mid-priced Androids were slightly faster than 2014's iPhone 6 Low-end Androids have finally caught up to the iPhone 5 from 2012 Browser's alignment to web standards The part of the different browsers that most affects web development is their implementation of the different web standards. As mentioned above, there are 3 browser engines we should care about. So, let's take a look at how these different browsers implement web standards. The easiest way to check these difference is with the following data of the Web Platform Tests. A bar chart comparing the number of tests failed in only one browser. A more detailed explanation is below.Source: "Browser Specific Failures" - extracted on December 4th, 2021 This chart shows how many Web Platform Tests fail in only one browser. In other words, how many features the other two browsers have already implemented. One fact becomes evident here, the number of web standards only Safari hasn't implemented is many times bigger than those of Firefox and Chrome. To be precise, 2.4 times as much as Firefox and 4.7 times as much as Chrome. Moreover, we should also take in consideration the close relationship Safari and iOS have. Specifically, these two points: 1. Other mobile browsers update independently from the OS, whereas Safari is only updated when there is an update to iOS. iOS devices that are no longer supported with newer versions of iOS cannot update to the latest version of Safari. 2. All browsers in iOS are based on Webkit: There are Chrome and Firefox versions for iOS but those use the same engine as Safari in iOS. This is because of an Apple guideline which mentions that all iOS browsers must use Webkit. This relationship between iOS and Safari also means that we must also check how the market share of iOS versions changes with each new major iOS version release. A line chart showing the quarterly variation in market share for iOS major versions from 2019 to 2021. A more detailed explanation is below.Graph derivative of "Mobile & Tablet iOS Version Market Share Worldwide" by Statcounter used under CC BY-SA 3.0. This graph is licensed under CC BY-SA 3.0 by Alan Davalos. To have a deeper understanding on how the market share of each iOS version changes let's take a look at how the market share for iOS 12 changed in the past 2 years: * From Q1 to Q3 2019, iOS 12's share was gradually growing, but that number plummets once the iPhone 11 and iOS 13 came out in Q3. * From there, iOS 12's share fell under 20% throughout the next year. * Then, as soon as the iPhone 12 and iOS 14 came out in Q3 2020, iOS 12's share had such a sharp decline, by Q2 2021 its share was negligible. * The same pattern that happened to iOS 12 was also observed in later years with versions 13 and 14. In conclusion, we can safely assume that over 90% of the iOS market share will be constantly made up of major versions released in the past 2 years. In other words, we only need to support Safari versions released in the last 2 years. Mobile networks So far, we've mostly talked about devices and browsers, but now let's take a look at one of the factors that has a big impact on the UX that web developers have no influence on: network connections. When connected to a Wi-Fi network, the connection is mostly stable but the same can't be said for mobile networks. Let's take a look at the current state of mobile networks. 3G and 4G When using lab tools such as Lighthouse, the network is tethered to simulate 3G, but mobile networks worldwide have changed recently. According to a May 2020 report by Opensignal, the worldwide average availability for 4G is 86.8%. So, we can safely assume that most users will have access to a 4G network worldwide. And among the tested countries, Japan had the highest 4G availability with 98.5%. 5G However, 5G networks are still far from being a reality. According to a November 2021 report by Opensignal, the highest 5G availability worldwide was only 29.1% in South Korea. What's the new baseline? Taking all the data above in consideration, the new baseline for web development would be: 1. Safari is the baseline in terms of web standards: The sites we develop must work in Safari versions at least 2 years old. 2. Low-tier Android devices are the baseline in terms of performance: Low-tier Android devices have advanced little in the past few years so we must make sure our sites are super performant. 3. 4G is the baseline in terms of networks: Mobile networks have become a lot faster and stabler worldwide in recent years. How well are we answering to user needs? We have successfully defined the 3 parts that make up our baseline but that's not enough. We need to take a look at how well we're answering to user needs. However, an in-depth analysis would bring up different results for different projects. So, talking about a specific project in LINE wouldn't be as helpful for most people. With that in mind, I'll go big and analyze the whole web. Fortunately, we have a great data source for it, the Web Almanac 2021 . This is an annual report created by the HTTP Archive. In it, they analyze over 8.2 million sites to create 24 chapters. For this article, we'll take some data excepts from some of these chapters to see how well the current web is matching the baseline defined above. The median website in 2021 The median website in 2021 weights 1,923 KB. If we separate the size by file type we can see that images and JavaScript (JS) make up most of that size. A bar chart showing the weight of the median website in 2021 by file type. A more detailed explanation is below.Source: "Page Weight" - Web Almanac 2021 Looking at this data, it's easy to focus on the images as those are the heaviest, but we should pay special attention to the JS size. The biggest reason for that is that processing images is not as complicated as processing JS. Images can basically be rendered as soon as they are downloaded but JS needs to be parsed and executed too. So, generally speaking, JS processing takes up more resources. Furthermore, according to the article by Alex Russell mentioned above, when testing a low-tier Android device on a 4G network, the budget for a website to keep a good performance is up to 100 KB of HTML and CSS and up to 350 KB of JS. In other words, the current median site meets the performance budget in terms of HTML and CSS but it goes way over it in terms of JS. HTML and CSS usage The Web Almanac has a chapter on both markup and CSS which contain plenty of information. I want to highlight a few key data points that I think serve to exemplify how we're using HTML and CSS currently. HTML Let's first talk about HTML, there are currently 112 non-deprecated HTML elements. But the median amount of HTML elements used in a page is 31. There's obviously no need to use every single element in all pages, but these 31 elements include elements such as , , and