The 2022 Web Development Baseline
The 2022 web development baseline stands at low specification android devices for performance, for web standards, it is Safari from a couple of years ago, and in terms of networks, it is 4G. The web is found to not be addressing these needs in the right manner, in terms of performance when there are factors that may involve over-dependence on JavaScript that are tending to hinder the performance of websites. The primary reason for the introduction of big changes in the web from 2921 to 2022 will affect the way web development is viewed as a whole. This article discusses those changes and how web developers need to adapt through analysis.
Retirement of Internet Explorer
Many changes have been made in 2021, but no other change was as critical as the retirement of Internet Explorer. The announcement was made by Microsoft in May 2021, and many products by Microsoft such as Microsoft 365 were also officially retired from providing support to Internet Explorer. The official retirement has been dated for June 2022, but many reasons point to complete retirement. Many websites have also dropped support for the Internet Explorer browser. Projects have also dropped their support after the announcement.
Japan was using Internet Explorer as their recommended browser, but with the announcement of ending support, it has become non-recommended since September 2021. Users can continue using the browser but they may face issues such as pages not behaving right or not loading correctly. It is better to shift to another browser before the end of the date of usage of Internet Explorer.
Internet Explorer was being supported because of its maker share and now there was no good reason to keep providing that support. The new problem that arises is that Internet Explorer served as the baseline support for many tools. With the stop in the development of Internet Explorer, the web-standards that were supported are different from those that are supported by modern browsers. The baseline seems to be a bit blurry with Internet Explorer gone.
User Devices And Browsers
The three main browsers that need to be supported are Chromium, which serves as the base of Opera, Chrome, Edge; Gecko, which serves as the base for Firefox; and WebKit, which serves as the base for Safari. The number of Safari users in Japan is higher than the average globally. Android covers around 70% of the global mobile operating systems and iOS own 28%.
The difference observed in terms of the performance of the operating system is not just under software, but also with hardware. The major difference is to be found in the CPU performance. Devices that use iOS tend to have better CPU performance, and Android devices also have similar results. Mid and tier devices have worse scores in comparison.
Browser Alignment To Web Standards
The implementation of different web standards by browsers is what has the most effect on web development with respect to browsers. The number of web standards that are implemented by both Chrome and Firefox is far greater than the web standards Implemented by Safari alone. A close relationship is also shared by iOS and Safari. Generally, an update takes place in mobile browsers regardless of the updates in the operating system of the device.
But Safari is the only mobile browser that will need to be updated with an update in iOS. Without support for the latest iOS, the device will not be able to work with the latest version of Safari. The browsers of iOS use WebKit as their base. Chrome and Firefox versions exist for iOS but both of them are making use of the same engine as Safari. This is in accordance with the Apple guidelines that state that iOS browsers must make use of WebKit.
The relationship between Safari and iOS also has an impact on the market shares with each version of iOS released. 90% of the market share of iOS is made of the major versions that were released in the last 2 years. That means supporting the versions of Safari that were released last year will be very beneficial.
Mobile Networks
Network connections have an impact on the user experience, and it is not under the influence of web developers. When connected to WiFi, the connection can be stable, but so is not the case with mobile networks. Discussed below are some of the more often used mobile networks.
3G and 4G
When Lighthouse and similar tools are being used, the network will simulate a 3G mobile network. But 4G is more widely available globally. It is safe to assume that most users will be making use of it. 4G mobile network.
5G
The 5G network is far from becoming a reality. It is limitedly available globally.
The New Baseline
The web standards’ new baseline is Safari, specifically the versions released in the last 2 years. For performance, low tier android devices serve as the new baseline. They have advanced a little over time so it is good to ensure that the websites developed are performing on these devices. The baseline for networks in 4G, has become stable and fast globally.
HTML
Currently 112 HTML elements in use exist. The median HTML makes use of around 31 elements in a page. Not every element is used, and the number of tags that are used for displaying content is very less. The most used element for displaying content is <div>. The <main> elements can be used with other elements for applying special styles and it is also the element that contains semantic meaning. Use of this element can be used as an indicator of the proactiveness of a page in terms of semantic meaning.
CSS
71% of the pages make use of Flex and 8% make use of Grid. The main reason for the existence of this difference is the support for Internet Explorer, which only gives support to some old specifications of Grid. It is also difficult to polyfill the features of CSS in comparison to features of JS, which is why many web developers are moving away from using Grid. But now support for Internet Explorer can be cut and Grid is becoming more usable.
Performance
Core Web Vitals are widely being used for measuring performance. It is also being used for determining Google search ranking. Most pages score low in terms of CWV, with the scores being worse for the mobile passes when compared to desktop pages. The key contributing factor for this is the difference in performance between mobile and desktop devices. This is also due to the fact that the JS files of websites tend to have bigger sizes compared to the performance budget.
A direct relation can be seen between the number of views a website gains and its CWV score. This can be due to the fact that the sites with better CWV scores tend to rank higher in Google search engines. The sites with better performance also tend to have higher ranks. This means that making improvements to the performance of a site is a way of increasing revenues through projects.
JS Libraries And Frameworks
The amount of JavaScript that is served will have an impact on the performance of the site. Many developers tend to make use of large JavaScript files, libraries or frameworks in various ways. React is the most popular among the frameworks used. While the size of JavaScript can be used as an indicator for performance, it does not give the complete picture. Frameworks are used for developing Single Page Applications as well as static sites.
Accessibility
About 1 billion people globally have some form of disability, and the disability can have an impact on how these users interact with their network devices. Accessibility refers to the actions that are necessary for disabled users to have interactions with the website. These actions, when incorporated, lead to a better user experience for all users in general. Some of these actions can be similar to trying to use the phone when the user is eating with one hand or settings that help enable a white or black filter on the screen after a certain time has passed so that sleep quality is improved.
If the website is built with these situations in mind, the users who may face these situational disabilities will be able to better use these websites. Users not having the ability to have access to websites can also lead to legal issues. On the basis of the legislation, users can also sue websites that do not take these guidelines into account.
77% of the websites do not contain good contrast between the colours in the background and the colour of the font, meaning that the users who have a visual imparity are not able to fully use the web. 29% of the sites do not allow zooming although some browsers are designed to ignore this setting. 42% of the websites do not have properly ordered headings. This can be problematic for users who make use of assistive technology.
29% make use of buttons that need to be clicked. Buttons must also be designed to respond to actions taken through keyboards as well and have proper handling of focus. This can be made with and without the help of JavaScript. 32% of the websites online make use of input elements but do not have accessible labels. This eventually means that there is no associated element for the label. This is a bit problematic as it can lead to a loss of revenue. If an input is needed for a credit card and it is not labelled, users who wish to make a purchase but do not know where they can input the information.
Conclusion
Currently, the needs of the users in terms of the disability guidelines are not being fulfilled. JavaScript is overused in websites in code as well as in dependencies. HTML and CSS are overused for supporting Internet Explorer but that is not needed anymore, making many features usable.
If you want to develop a website using CSS, it can be done. A lot of the features that could only be done using Javascript can not be programmed using CSS. This can help in the reduction of the amount of JavaScript code. Make sure you make an evaluation of your toolset. Many new tools offer better performance but not for every project. Just be ensure that you are developing it for modern browsers. Support for Internet Explorer has been dropped, and you can set the standard as ES 2017. This will help you reduce the bundle size and see improvements. Make sure you are taking the disability guidelines into consideration from the beginning. This will help in building, and improving the font, contrast, semantic usage as well as include keyboard navigation that can make a huge difference.