Why Web Performance Matters

Not understanding why web performance matters can be costly to your business. Here we discuss why and what you can do about it.

Everyone wants the best experience possible when accessing, browsing and buying products and services online and an important aspect of this is ensuring your online service is fast. This discussion is for Business, IT and Digital stakeholders and highlights some of the reasons why this is important. Ignore it at your own cost!!

If you are Lewis Hamilton on the front row of the grid in a Formula 1 (F1) race, he is not thinking about how good his car looks, only one thing is in his mind; Performance. He is concerned about the performance of his competitors and wants to make sure he can beat them in every situation that arises.

The same is true for a company’s website, for a multitude of reasons. It display’s their online presence to everyone who visits it and as such it is a business-critical imperative that an excellent level of service and experience is given to each and every visitor. If it is unable to do this then it may leave the visitor with a negative perception of the company and by inference, their products and services, may not be excellent either.

Ensuring that webpages load fast, efficiently and correctly is therefore a major part of delivering important online services.

In addition, the speed webpages load contributes to Google’s, and perhaps other search engines, page ranking algorithms that contribute to organic SEO (search engine optimization) ratings further identifying how important ensuring your online presence is fast!

Customer Experience is King

Customer Experience is a key initiative for many organisations. As a very diverse subject it has many different facets that often occur through personal contact. However, in the online digital world, driving customer experience initiatives means that your customers interact with you through your website, SaaS application or mobile app, so it is critical that it not only looks great and works well but it must also work fast.

The aesthetic look of webpages, their ease of use, ability to perform calls to action tasks and how well visitors move through their online journey are key tenets of digital experience. Speed is also important in digital experience and it is only when the experience is slow that it becomes important to the eventual outcome.

Subliminally, visitors have their own personal set of parameters that they apply when online. Visitors now expect webpages to load very quickly, irrespective of the technology being used to load them. Consequently, it has become irrelevant if your customer is using a low-powered Android device on a slow network connection or a laptop on a very fast wired connection as both have an expectation of fast service and become impatient when they are made to wait.

In some cases visitors will wait and see delays through but there will be many others that will leave a website if they have to wait too long. Studies have shown that over 50% will leave if the webpage does not load within 3 seconds and of these as many as 80% may not return. This can be bad for two reasons. Firstly the loss of a potential customer and secondly the potential negative impact on brand reputation which they may relate as a poor experience to others.

Few retailers have completely unique offerings and do not have to compete as hard to get website visitors and customers. However, in fiercely competitive markets, such as retail, finance or travel, web authors must benefit from every advantage available. Over the past decade, web performance has become such an advantage and as an important aspect of competitiveness, faster websites have been more successful than slower ones.

Extensive studies previously conducted by retailers have identified the impact of poor web performance on their business. Amazon improvement in milliseconds The Amazon case is well known where they proved that a modest 100ms delay in their website performance could impact revenues by 1% annually. At Amazon, this equates annually to over $1.5 Billion. There are numerous other well documented cases on the internet such as Shopzilla, another major online retailer, who substantially increased conversions, and with it revenue, by reducing average page load time by over 50%.

The Human Factor

As customers expect fast service standards the downside is that when your service degrades from ‘normal speed’ by even just a small amount, such as 0.5s, then a neurological changes can be observed. Several studies have been completed that look at the human body and how it reacts to differences in online service. As our attention span and desire to wait for a response is limited this aspect of human behaviour is necessary for inclusion in the design and delivery of any online service.

In 1968 IBM’s Robert Miller, investigated the basis for the way humans interact with computers. His study looked at many different types of interactions and he concluded that we work in either a conversationally or transactional manner. He found that quick computer responses enabled a conversational approach but if the wait for a response was too long then conversation activity ceased and became transactional in nature. This change in behaviour allowed other activities to be performed while waiting for the computer to respond.

Consequently, from a human perspective, the shorter the interaction time the better, but if it became too short the response could induce a delay in response time a while the human recognised that a response had occurred.

To avoid this induced delay he determined that the sweet spot was at about one second as this was considered seamless and enabled human interaction to occur uninterrupted. He found that transactional behaviour began to become prevalent when responses were greater than 3 seconds and that at 10 seconds human interaction could be considered wholly transactional.

Observing human interaction from conversational to transactional response

Today’s computing landscape is completely different to the mainframe-based computing world of 1968, but the principles of this work are as relevant today as they were then. Currently industry best practice is 3 seconds for page download, which may appear to be a long delay against a 1 second seamless objective. However, current website and networking technologies work hard to achieve this and only the fastest commercial websites that have been built with this in mind deliver to a 1 second download objective.

Today, best practice has accommodated these concepts with a pragmatic 1 second objective being adopted that aims to engage and maintain conversational human interaction. This 1 second objective focusses solely on the visible screen area of the device, known as the viewport, with the objective that the viewport being completed within 1 second.

Session Performance Distribution

This theoretical base shows itself to be true in practice. Using real user monitoring techniques it is possible to see how long a visitor will tolerate poor performance by observing the relationship between webpage download time and session length.

Session Performance Distribution for a UK Retailer

The above histogram shows this relationship for a UK retailer. It shows that the number of sessions peaks about 3 seconds and falls off quickly after this. This type of behaviour has been observed on many different websites and closely aligns with Miller’s conclusions.

From a commercial aspect the high number of sessions in the long tail shows that there is potential latent demand for products and services exists on these websites that may be accessible with improved performance for these visitors.

Make the Browser Work Harder

There is always a case for improving the server side of a request to load a webpage. However, the majority of time consumed, over 90%, in building webpages occurs in the browser and it is here that investment is needed to keep visitors working conversationally with your website.

Therefore to complete the viewport in 1 second and finish download in 3 seconds, the browser must work extremely efficiently to deliver the webpage as required.

London-hunts web performance filmstrip
Web performance filmstrip showing how the viewport loads

The above filmstrip is an example of how difficult this can be as for the first 2 seconds the viewport remains blank, then the viewport is almost completed within the next 0.7 seconds.

Achieving these objectives begins with the website design and architecture. Consequently, web performance is best built in to the website as early as possible otherwise addressing performance issues once a website is in production becomes not only expensive but can adversely impact on business (revenue) objectives

Loading a webpage on a PC or smartphone (client) is a complex process. From the initial request to load a webpage a number of technologies must seamlessly interact otherwise the webpage will fail to successfully load. These technologies connect the client device through networks, to servers. The servers then deliver resources back to the client’s browser to process and build the webpage from. Understanding and managing these processes is the key to achieving excellent web performance.

Although there are inherent differences in different vendors browsers, they all conform to the W3C consortium’s published standards and it is this conformance that enables a systemic approach to web performance to be adopted for the majority of slow loading websites and webpages.

Making Progress with Web Performance

Few websites have resolved the problems of poor web performance as to completely resolve this issue requires that you go back to the requirements definitions and create well constructed and thought through non-functional requirements (NFRs) that address the performance issue and these need to be agreed with the website stakeholders. The presence of NFRs that have been accepted in the business analysis and design phase should ensure that they become part of the development and release project cycle and therefore proven, reviewed and confirmed at each project milestone gate.

Unfortunately, this approach is rarely adopted and web performance has become a very expensive after thought for many organisations as they realise the cost of not adopting excellent performance objectives into the project.

Well defined industry best practice KPIs exist that are used to measure and benchmark against when defining what web performance should look like. As organisations adopt a serious approach to web performance they retro-fit processes into their development cycles that work towards achieving these KPIs.

Key Performance Indicator (KPI) Value
Time to First Byte 0.25s
First Paint (Render Start) 0.75s
Content Ready (DOM Interactive) 1.00s
Page Loaded 3.00s
Page Weight 1 MB

Achieving these KPI objectives is not easy and requires a significant investment in initial analysis, prioritisation, development and testing and it is a recursive, and not a one-off, exercise. Digital teams find this difficult to follow through on when new important website features, functions and updates are necessary to keep the business moving forward. However, by adopting the principles of a continuous improvement programme and assigning a few units of each sprint cycle to web performance enhancements, initial benefits can be observed in a relatively short time period.

Finally to ensure that objectives are being met it is necessary to adopt good governance for web performance so that all of the stakeholders of the website and digital services are kept aware of the importance of web performance.

Fast Websites on Slow Networks

A look at how cellular network speed really can affect website performance.

Time is Money

In 1748 Benjamin Franklin wrote in an essay titled Advice to a Young Tradesman, Time is Money. This maxim was as relevant then as it is now as we apply pressure on our web development teams to deliver not only high functionality websites but also ever faster websites. To achieve this developers are implementing proven best practices, such as image compression, content delivery networks and techniques to avoid render blocking to meet an almost insatiable demand for fast loading content to improve the user experience.  

The complexity of the technology required to deliver fast websites means that numerous different causes exist of why user experience can be impacted through slow loading or slow responding webpages. Even though considerable effort is expended in optimizing the speed of loading of webpages, the potential impact a slow network connection can have is often overlooked.

This may be because we develop websites on fast desktop devices connected through fast network backbones to the internet or pre-delivery testing does not include proving performance non-functional requirements (NFRs) across all network speeds and device platforms.

Unfortunately the end result is not as envisioned, except for those connected with the fastest devices on the fastest networks!

In this article we look at what happens to user experience when networks slow down or fast network coverage is not available at all.

What Devices Are Used to Access Websites

Network issues are experienced generally by smart devices, such as tablets and smartphones that are connected through the cellular networks, and are rarely experienced on devices connected on cable connections.

An overview of the extent of the potential problem that exists is shown in Figure 1 the chart shows the breakdown of about 100 million page impressions, organised by operating system (OS). The breakdown shows that over 65% of traffic occurs on smart devices (IOS and Android). These devices will be connected by either cellular network or Wifi.

Of these smart devices, three-quarters of them are running IOS with only 25% of them Android.

This breakdown confirms why many website owners consider the Apple IOS market as one they should be targeting as it is possibly their most lucrative.

Webpage impressions by OS for May 2019
Figure 1: Breakdown by OS Family: May 2019

The Mobile Marketplace

However, when we look at the market share of IOS against Android devices a different picture emerges.

Figure 2 shows that over time in the UK the share of Android devices has risen to be on a par with IOS devices and since 2015 market share has been similar in number. In the same period the competitive OS devices have fallen away leaving only IOS and Android.

Breakdown by OS/Device family in UK
Figure 2: Breakdown by OS/Device Family UK

The global market is significantly different though. Figure 3 shows how Android devices has had a dominate market share of 80% for the last 6 years.

This skew is affected by the high number of Android devices in third world countries where price can be a key factor in the purchase, consequently, many of these devices may not be feature rich or very powerful in CPU and network connectivity.

Breakdown by OS/Device family globally
Figure 3: Breakdown by OS/Device Family Global

Historically Apple’s IOS-based devices have had a significantly higher performance capability than Android phones and it is only recent editions of Android phones, such as the Samsung Galaxy S9 and S10, that some degree of competitive performance has been delivered. However, recent Apple announcements (June 2019) have re-established the performance superiority of Apple’s IOS-based devices.

Even though faster devices are being continually brought to market, these faster devices are in a minority compared to the high number of Android devices in use today.

Consequently, it is not unreasonable to consider that a considerable latent demand may exist of Android users if they are able to connect and utilise websites at acceptable speeds.

Cellular Network Advancement

As the demand for newer and faster smart devices continues, so has the need for the rapid evolution and improvement in cellular network speed and availability.

Proposed as an original idea by Bell labs in 1947 to develop an hexagonal cellular network it was not until the late 1970s before technology advancement allowed for the development of a commercially viable opportunity. This manifested itself as an analog-based service and was effectively the first generation (1G) of mobile telephony. It is in the 1990’s, termed as 2G, that full digital services became a reality.

Since then we have seen many iterations and developments of the standards, (Figure 4) that ensure a common approach to ensuring effective communication services are delivered. Whereas these technical advancements have been successful in driving communications services on a global scale fast, the advent of the fifth generation, 5G, technology is now being delivered with pilot programmes being conducted in many different countries.

Figure 4 shows how the standards have evolved and the theoretical network speeds associated with each standard.

We use smart devices for so many different things now but it is interesting to see how far and fast these developments have brought us and is easy to see why expectations of instant response are demanded.

Cellular network generations and standards
Figure 4: Cellular Network Generations and Standards

What is a Good Connection Speed

The use of raw download bandwidth is a blunt approach on defining how to view the performance of a network service. Advertisements by network providers talk about the fast download speeds of 50 to 300 Mbps as the primary reason to buy their services and the faster the bandwidth, the more expensive it should be.

Data Bandwidth, is the bit-rate of a data transmission media, and is represented as bits-per-second (bps). In English this means how much data is sent in a second. So 50 Mbps means 50 million bits per second. It takes about 5 Mbps to stream a film in HD on Netflix, so we can see that 50 Mbps is a considerable network bandwidth speed.

Network Measurement Tool from speedtest.org
Figure 5: Network Connection on my Desktop

On my office desktop Figure 5 shows that I receive a pretty good service as the speed test, (speedtest.org) shows a 77 Mbps download speed and a very impressive upload speed of 87 Mbps.

At this level of service an instantaneous response could be expected for a webpage to load. Looking at the maths, the median transfer size of a webpage, (source: httparchive June 2019) is 1.9 MB and a download speed of 77 Mbps can deliver 9.6 MB per second. However, actual webpage responses can take seconds to complete, so there are other factors affecting the load of a webpage that we must be aware of.

Looking at Latency

Latency is the delay that data experiences as it makes a round trip through the network. It is measured in milliseconds and for a webpage resource is the time taken for a request from the client browser through the network to the webserver and back again.

Generation Typical Latency
2G 500 ms (0.5 seconds)
3G 100 ms (0.1 seconds)
4G 50 ms (0.05 seconds)
5G 1 ms (0.001 seconds)*

Figure 6: Latency standards by Network Generation

Each of the cellular networking standards sets out the requirements for latency that should be met and as Figure 6 shows, the expected latency has been substantially improved on in each new standard.

Consequently latency is a key component that contributes to network performance.

In 2009 Mike Belshe, a computer scientist with Google, investigated the impact of latency on performance. His paper, More Bandwidth Doesn’t Matter (much), documents that by maintaining a constant latency of 60 ms while increasing bandwidth against 25 selected webpages shows a minimal reduction in page load time (PLT) occurs from about 5 Mbps. Figure 7 shows his published results.

Maintaining Latency While Increasing Bandwidth
Figure 7: Maintaining Latency While Increasing Bandwidth

However, in a second set of tests on the same set of candidate websites he set the bandwidth at 5 Mbps and progressively reduced the latency. Figure 8 shows a linear progression of improvement was observed for page load time. He concluded from this is that lower latency will improve webpage performance.

Maintaining Bandwidth While Reducing Latency
Figure 7: Maintaining Bandwidth While Reducing Latency

The Truth is Out There

However when we get away from the fibre, cable and Wifi connections and we become reliant on cellular networks a different level of experience is received. Cellular technology is unable to deliver consistently high performance, such as 77 Mbps download speeds and although the specifications document the theoretical capabilities of the technology, the delivery speeds are rarely delivered and service levels are inconsistent.

Download and Upload Survey Results
Figure 8: Download and Upload Survey Results

Figure 8 shows the download and corresponding upload bandwidth speeds collected from a survey across southern and eastern England, including London. The left hand Y-axis provides scale in Mbps. The histogram is ordered by ascending download speed. Consisting of over 100 tests, using the speedtest.org app on an Apple iPhone 6+ on the Vodafone network the survey measured the native connection speeds.

The survey shows that there is a wide range in the service were observed including 2.75G, 3G, 3.5G and 4G services. The data points represent the average speeds achieved during the candidate tests.

A key observation is that none of the candidate records show anything close to the theoretically available bandwidth for each of the services delivered.

The results also show that there is a wide spectrum of service delivered, even in built up areas and that upload speed does not appear to be a function of download speed.

Figure 9 overlays the latency for each test, with the right hand side Y axis providing the scale of latency in milliseconds. It is significant that latency is also shown to be variable and cannot be relied on as being a set value at any given download speed.

The higher values for download speed, above 10 Mbps see the latency reduce to 50 ms and below and in many cases even below 40 ms. However, the observations also show that latency can vary to over 100ms especially on slower bandwidth connections.

The 2018 annual review by Opensignal found that 4G coverage is now highly accessible in the UK with an average of over 75% connections being served on a 4G network. However, even though the connection maybe 4G, the network may scale the connection back to a lower standard connection to alleviate capacity or performance issues in their network. Consequently, at certain times 3.5G or even 3G is still necessary.

Consequently, it is necessary to consider how the UX for a website is delivered at different bandwidths as your website may be accessed across slow performing network connections.

Download and Upload Survey Results With Latency Overlaid
Figure 9: Download and Upload Survey Results With Latency Overlaid

Can 5G Help?

As the new kid on the block all of the talk and hype is about 5G. It is undoubtedly a technology with considerable potential to change how many services are delivered and as an enabler for new services. 5G boasts very high bandwidth potential with latency as low as 1ms but little is really known about how it will actually impact on web performance and user experience.

Global Intelligence, as in Figure 10, have predicted that by 2025 5G will account for under 20% of all network connections and that 3G and 4G technologies will be still be critical in delivering 80% of cellular network connections.

This is borne out by Computer Weekly who believe that early adopters can expect to pay 32% premium for 5G but both the roll-out of the technology and acceptance by the general public will delay its replacement of both 3G and 4G.

5G is a promising technology and will open up many new avenues of business opportunity and usage but although it offers almost zero latency, smart devices will have to become considerably more powerful to ensure they are not overrun by the considerable speed up of web content and programming functionality.

Global Share of Mobile Connections
Figure 10: Global Share of Mobile Connections

What Are the Next Steps

From a cellular network perspective it may be possible to exploit 5G for loading webpages, but there is currently little or no experience of how this could be achieved as mobile devices will also need to become considerably more powerful so that they can process data that is delivered considerably quicker.

Therefore faster networks is currently not the panacea as it will be many years before 5G will be ubiquitous and it’s effects on webpage loading become clearer.

User experience can be improved though by all by aligning UX testing against the major devices and networks used by your cellular connected online visitors. This is not a small task but necessary especially if your target market is predominately based on 3G technology and low power Android devices.

Other technologies are emerging or becoming established that can help with improving user experience on mobile devices and also over cellular networks including HTTP/2, QUIC, Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP). Each of these technologies can bring performance gains but as with all technologies, their use and implementation requires careful planning and testing.

The Performance Implications Of Web Security

Over the past few years all of the browser vendors have substantially enhanced the surety of their product and with it the security of the internet.  This has led to a much wider adoption of the encrypted hypertext transport protocol HTTPS, and browser will now mark websites as ‘not secure’, especially when a form, for example a login or credit card details, is requested. 

Specifically, pages that included forms where login credentials or credit card details could be entered would be labelled as not secure. 

This approach makes perfect sense and has long been part of Google’s intentions, and eventually, we can expect to see all non HTTPS, (HTTP), pages flagged as insecure.

For now though, websites that haven’t yet upgraded to HTTPS from HTTP and the site contains an input form, such as a search box at the top of every page, will see warnings triggered for all the pages on its site. 

However, while this type of protection does not have a performance implication, there are many other security initiatives that you should be aware of and how they can impact on the delivery performance of web pages, and with it customer experience.

This article takes a look at some of the security measures and their potential performance impact as a precursor to later articles that cover each of the technologies in greater depth.

HTTPS protocol displayed in the browser
HTTPS protocol displayed in the browser

Performance Impact

Other things being equal, an HTTPS website will be almost inevitably be slower than its less secure counterpart, thanks to the extra round-trips required for the TLS (Transport Layer Security) handshake that makes HTTP secure.  While this may only amount to a maximum of a less than a hundred milliseconds, human interaction could perceive that the website is slower. What’s more, this effect will be more noticeable on high-latency mobile networks.

Fortunately, there are plenty of ways to make TLS fast. Here are a few:

OCSP Stapling

OCSP stands for Online Certificate Status Protocol. This is a way to ensure that a site’s TLS certificate is valid. The client does completes this task by querying the certificate with the certifying authority. However, this is far from ideal, as it means the client has to retrieve information from a third-party before it can even start getting content from the website.

OCSP stapling works around this delay by passing responsibility for certificate verification from the client, on each webpage request, to the server.  Instead of the client having to do the look-up when it accesses the site, the server will carry out the look-up from time to time to verify the status of the certificate with the authority and will then store, or ‘staple’ the certificate on the webserver.  This enables the client request to be verified by the web server and as such negates the extra TLS handshake protocol and the time it would normally take to execute.  

TLS Session Resumption

TLS session resumption works by storing information about a TLS connection that’s already been established. This allows a client to reconnect to a host with an abbreviated TLS handshake, cutting the time it takes to make the connection.  Consequently, should the client request a second resource from the web server it will no longer need to request certificate authorisation a second time.

HSTS

HSTS stands for HTTP Strict Transport Security and it is designed as an important security enhancement to help prevent man-in-the-middle attacks on the HTTP stream.   This function comes with a knock-on benefit for web performance.

Essentially, HSTS means telling the browser or user agent that it should only ever access your website over HTTPS. This saves a costly redirect to use the HTTPS protocol when a visitor to your website requests the HTTP version. 

To implement HSTS the ability for the server issues a response header to the browser or user agent’s first call enforces connection over HTTPS and disregards any other request, such as via a script, to load over HTTP.  Although this has the disadvantage of only working after the first visit someone makes to your site. 

HTTP/2

HTTP/2, now more commonly known simply as H2, offers a range of performance enhancements that complements the improvements in security.    A pre-requisite for H2 is HTTPS which enforces a high security regime for the fastest HTTP protocol. 

As H2 implements multiple requests and responses to be multiplexed over a single connection, the risk that one slow-loading asset will block other resources is reduced.  Response Headers are also compressed, reducing the size of both requests and responses. 

Other features, such as server push, are evolving, but should offer even more performance benefits.

A More Secure Future

As we are edging ever closer to an HTTPS-only web, delivering greater privacy and better security for all web users, browser vendors seem intent on accelerating the pace of change so an understanding of how security impacts on web performance can help you prepare to ensure customer experience is not impacted.