Win The Performance Race: Website Speed and Performance Optimization Guide

• Home
• Insights
• Win The Performance Race: Website Speed and Performance Optimization Guide

Every millisecond counts

In our fast-paced world, stacked with digital technology, website speed and performance optimization becomes everything. It transforms our day-to-day habits and the way we live. Nowadays, we can shop, make travel plans, communicate, entertain ourselves much faster – all due to being online.

According to a Pew Research Center study, 81% of Americans go online daily, including 28% who are online almost constantly, and 45% who say they go online several times a day. With this, consumer expectations are rising dramatically. When it comes to technologies, we want to minimize pain and maximize pleasure. The less time we have, the higher our expectations are for a website to load quickly.

Louis C.K., a standup comedian at one of his shows, famously pointed out that people should be more grateful for modern technology but have no patience to wait for pages to load on their cell phones. “Could you give it a second? It’s going to space! Can you give it a second to get back from space?” he cried at the audience. Yet the reality is different – when people are online-shopping, they are unwilling to wait for a website to load for more than 5 seconds and marvel at the miracle of modern technology.

We would like to browse fast, buy fast and get on with our lives.

Web performance, or website speed, refers to the amount of time it takes for fully functional web pages to load and display on the user’s web browser. Naturally, poorly performing, slow sites drive users away, and websites that load quickly receive more traffic and have higher conversion rates.

Website speed optimization matters

Consumers form their first impression about a business based on its website loading time. And it applies to every business that is represented online. Website performance contributes to the consumers’ brand experience; it’s no longer only about the products to guarantee customer loyalty. In order to engage and retain users better, the site has to become a high performing one.

Performance affects everything from accessibility and user experience to search engine optimization. Web performance has to be measured and improved continuously because 40% of brands regress on performance after 6 months, as this internal Google study shows. So how exactly does poor website speed influence the business? We listed the most important reasons why website performance matters in detail below.

Reason 1: User experience

Every one of us has been impatient and irritated when waiting for a few seconds (that feels like forever!) for some website to load and become active to interact with it. It is especially noticeable when we are pressed for time and are trying to do something quickly. In such moments, when a website fails to perform the basic functions it was created to do, we are more likely to question the necessity of its heavy nifty features, like videos in the hero section that are not loading.

There is a direct correlation between page loading time and user frustration. Jakob Nielsen defined three response time limits determined by human perceptual abilities, which have been the same for 30 years:

More recent studies show us a bit different (even less promising) insight into users’ behavior online. A study from Google confirms that slight delays influence consumer behavior. A study about how website performance affects shopping behavior by Gomez found that 88% of online consumers are less likely to return to a site after a bad experience. This study also revealed that “at peak traffic times, more than 75% of online consumers left for a competitor’s site rather than suffered delays.” Poor site performance results in dissatisfied customers leaving the website.

Even if people stay on the page after 10 seconds of waiting, they won’t have a pleasant experience. The unexpected waiting makes users feel that they don’t have control over the system and people do not like losing control.

Reason 2: Returning customers

Only 2% of users convert on the first visit, so it is crucial to get the other 98% to come back. It’s becoming obvious that website performance plays a very important role in this. Websites with a well-done website performance optimization engage users with their content and make them re-visit.

Users are returning to faster sites and avoiding coming back to slow ones for a long period of time after their first try. As the recent study from Think Tribe revealed, nearly 80% of users who have had poor performance experience avoid the pages permanently and never return.

Here’s an example that shows how high-performing sites engage and retain users better than low-performing ones – Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. Your site’s performance influences how much your audience returns to your site and shares it with others.

Reason 3: Conversions

A website’s conversion is measured by dividing the number of people visiting a website by the number of people who performed the desired action on it – submitted a form or made a purchase. Many things influence a high conversion rate; good discoverability and great engagement are among the first ones that come to mind. But there is one more crucial factor.

Page speed has a direct influence on users’ behavior – the quicker the webpage loads, the more chances there are that a user will stay on the page and perform a targeted action. The website’s first load also influences the website’s discovery, but we will come to that a bit later.

Website speed impacts both the conversion rate and sales.

We would like to deep dive into the subject of how website speed and performance affect conversion and provide some facts that prove our point that the faster the website, the better the conversion rates. 47% of customers expect a webpage to load in 2 seconds or less, according to a study by skilled.co. We also have the results from testing a mPulse Mobile website by an AI healthcare software company. They found that pages that loaded in 4.2 seconds had a conversion rate of less than 1%. Here are the full results:

One more example is about a world-famous e-commerce site. Amazon makes $258,752 in sales every minute of every day. Let’s calculate: if its website is experiencing a 1-second page delay a day, it could potentially lose $1.5 million in sales a year. Similarly, research done by Amazon and Walmart found that faster-to-load pages generate significantly more revenue and conversions.

Reason 4: Bounce rate

The bounce rate is the percentage of people who leave a website after viewing only one page. If your website consists of more than one page and your site’s success is determined by users visiting more than one page (home page, for instance), then the high bounce rate is bad. Issues with page speed lead to visitors leaving the website altogether.

Users are likely to close the window if a page does not load within a few seconds.

Google found that there is a direct correlation between page load time and bounce rates. Bounce rates steadily increase as page load time increases – going from one-second delay to three-second increases the probability of a visitor leaving by 32%; going from 1 second to 5 seconds increases the bounce rate by 90%.

To give a few examples, the BBC discovered that they lost 10% of their total users for every additional second it took for their pages to load. And according to a study conducted by Section, a 10% decrease in site speed results in a 13% drop in pages viewed per session.

Reason 5: SEO ranking

No one knows the exact Google search algorithms of ranking pages, but website speed and performance makes a logical argument. Search engines are all about making it easy for users to find the information they are looking for, and we know that users value fast-loading websites more than slow-loading ones. It is an indispensable part of user experience – no one likes to wait for pages to finish loading.

We found research on how page speed affects SEO. This analysis by Backlinko revealed that pages that rank on top positions in Google search results are, on average, significantly faster compared with their competitors that are ranked lower.

Fast website performance can help you rank higher in search results.

Web performance optimization metrics

As the results of the latest studies show, businesses that are represented online need a more systematic approach to page load time testing and website performance optimization to ensure they maintain the loyalty of their customers. Among factors that add to customer’s frustration are functionalities that do not work, error messages or broken links, and website speed. Users expect images to load fast, buttons to work as soon as they are visible, and layouts not to jump.

There are some key website performance metrics that developers should focus on to achieve good results, like:

• First Contentful Paint (FCP) that marks the first point in the page load timeline where the user can see anything on the screen
• Time to Interactive (TTI) that is the amount of time it takes for the page to become fully interactive
• Speed Index that shows how quickly the contents of a page are visibly populated
• Total Blocking Time (TBT) measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.

Keep in mind that this all is especially important for the new users who, upon discovering your website, will get an uncached first load, which is the worst possible experience. After optimizing your website for the first load, pay attention to site optimization for the next steps of the conversion funnel. Get to know at which steps users drop out and optimize for engagement by making navigation faster or increase chances of re-engagement by optimizing for fast repeat loads.

Website performance benchmark reports

We have conducted website speed and performance audits of industry leaders using the Lighthouse web tool for desktop versions of the websites and would like to share the results for the Retail, Travel, and Airline industries.

The overall performance score from 90 to 100 is considered good and is hard to achieve; score from 50 to 89 – needs improvement, from 0 to 49 – poor. For every result, 4 runs were performed. The first run was ignored and the final run was the best among the remaining 3 runs.

For Retail

The average website performance score for industry leaders in the fashion and apparel industry (such as H&M, Nike, Zara, Asos, Adidas, etc.) is not very good – 68/100. This result may surprise you and even give a false sense of hope, but let us remind you that these businesses are world-famous and have strong brand images. Industry giants with loyal fan bases may get away with their poor site performances today but with the ever-growing user demand for high speed, they will have to adapt tomorrow.

Website speed benchmarking for Retail industry

Brands to Compare	Overall Performance	First Contentful Paint	Speed Index	Time to Interactive	Max Potential First Input
H&M	23	1.4 s	2.6 s	10.8 s	1,242 ms
Nike	20	1.4 s	6.0 s	6.6 s	1,615 ms
Zara	41	1 s	3.3 s	3.3 s	1,025 ms
Asos	27	1 s	3.3 s	8.4 s	2,265 ms
Adidas	10	1.5 s	6.8 s	14.4 s	2,787 ms

Consumers who are noticing lags in the pre-checkout stage of their journey are more likely to abandon the site. To meet their expectations, you need to focus not only on the performance of your homepage but also on all product detail pages. As little as 0.1s improvement in mobile site speed makes retail consumers spent almost 10% more.

For Travel

Here we have audited desktop sites of the major online travel agencies such as Booking.com, Airbnb, Vsbo, Trivago. We have found their average web performance score to be a bit higher than the one for retail – 86/100 as opposed to 68/10, although both scores fall into the “needs improvement” category. The average Time to Interactive is 3.3s which is not an excellent score but quite tolerable.

Website speed benchmarking for Travel industry

Brands to Compare	Overall Performance	First Contentful Paint	Speed Index	Time to Interactive	Max Potential First Input
Booking	38	1.7 s	2.1 s	7.7 s	788 ms
Airbnb	52	1.1 s	1.7 s	5.1 s	1,048 ms
Vrbo	51	1.2 s	1.8 s	5.9 s	645 ms
Trivago	27	1.5 s	3.0 s	6.4 s	1,060 ms

Performance optimization of travel websites has the most significant impact on conversion rates. An improvement of 0.1s increased the conversion rate by +10.1% and a slight increase in average order value of 1.9% with travel consumers, as according to a site speed study conducted by Deloitte.

For Airlines

It seems that airlines yet have to tackle not only flight delays but also delays on their own websites. Our analysis of the airline landing pages’ performance revealed that many sites suffer from the poor performance that undoubtedly drives customers away. TTI on those sites can last as long as 13s with an average score of alarming 9s, which is simply unacceptable compared with 3.3s of websites from the adjacent travel industry.

Website speed benchmarking for Airline industry

Brands to Compare	Overall Performance	First Contentful Paint	Speed Index	Time to Interactive	Max Potential First Input
Fly Dubai	56	1.7 s	9.1 s	14.5 s	560 ms
Ryanair	56	2.8 s	3.9 s	9.7 s	1,040 ms
Lufthansa	42	1.9 s	5.5 s	19.5 s	1,450 ms
Iberia	38	2.4 s	10.9 s	20.2 s	590 ms
Air Asia	36	1.1 s	12.8 s	25.3 s	1,320 ms

Website performance directly correlates with the airline’s conversion rate and financial growth. Even a slight improvement in site speed in this industry gives an instant competitive advantage. And what happens when you increase your performance three-fold?

Each website performance-boosting case is different but most of the time it is about legacy transformation. It often entails migration to cloud or microservices architecture adoption. One of our clients, the world’s largest airline, wanted to increase the company’s business operations. They turned to Euristiq to eliminate its main bottleneck – a slow operating main website.

Case study: Re-engineering legacy website to 3x faster performance

The Challenge

The client is Europe’s largest airline company that needed to develop a new version of the main website including services for buying tickets, booking accommodation, and renting cars. They approached Euristiq for complex legacy software modernization services mainly focused on re-engineer their legacy website to a fast and high-performing application aiming to improve the company’s revenue and business operations.

The Approach

• Step 1: Rearchitecting. Enterprises that operate on monolithic architecture are neither flexible enough to innovate quickly nor can they offer exceptional user experience to their clients. In such cases, the best practice is to break down a frontend monolith into micro frontends that are better suited for optimizing performance, implementing new features and functionalities to web applications with no disruptions to other parts of the code.

The execution: introducing the new architectural approach

Obviously, our first step was focused on implementing the new architectural approach. The client’s main website was a front-end monolith that was not suitable for implementing web performance changes that wouldn’t affect the whole system. We implemented micro front-end architecture, which allowed deploying different parts of the application separately with no need to redeploy the entire thing.

The new architectural approach improved the application’s interoperability and gave the ability to add third-party components quickly. It significantly enhanced the airline company’s business operations.

• Step 2: Cloud Adoption. Performance optimization of high-load apps (in our case it’s the selling airline tickets website with monthly traffic of 25M+ users) often entails migration to cloud as cloud provides high flexibility and scalability that help businesses to deploy faster. Systems run more quickly in the cloud, and it gives the organization a competitive edge. It is especially crucial when the company’s application is directly involved in generating revenue.

The execution: migrating to the AWS

Airline’s main website ran on-site using Adobe Experience Manager, and migration to Amazon Web Services was a strategic requirement since the client was moving all their infrastructure to AWS.

Migration to the cloud is a complicated process that couldn’t be performed in one go. Breaking software into micro frontends allowed us to move one page at a time, keeping the website up and running all the way. At some point, the user’s navigation between the website’s pages consisted of constant redirections from old versions to new ones. It was even more complicated considering that mobile and desktop versions were not transferred to the cloud simultaneously. Thanks to the new architectural approach our cloud migration went smoothly and we didn’t encounter any major problems.

• Step 3: Framework migration. When dealing with website speed optimization, the transition to new technologies is often contemplated. But is it worth the hassle? It depends on the technologies in question and what you would like to achieve. If your priority is performance, then changing to faster technologies might be the right choice.

The execution: transitioning to new technologies

The old version of the airline’s website was built with AngularJS. Compared with Angular, it is five times slower in performance and doesn’t support many features, for instance, lazy loading.

Having a performance boost in mind, we migrated from AngularJS framework to Angular. This transition gave us access to new infrastructure and new libraries. Angular is also more mobile-driven, but most importantly, it is much faster than AngularJS due to out-of-the-box support for code tree-shaking and a new flux architectural pattern based on unidirectional data flow.

• Step 4: New UI/UX. While optimizing the website for fast performance, one cannot overlook the importance of a good UI/UX design. Many elements like images, gifs, videos, or rare fonts can be bulky in size and take more time to load, which results in a bad user experience.

If a website loads for more than 3 sec, visitors need some sort of feedback to show them it is trying to fetch the information – like skeleton screen animation. Web pages can also start loading images based on scrolling, showing them when the user reaches them. This web performance pattern that delays the loading of images is called lazy loading.

The execution: improving user experience

A good UI/UX design can not only boost website performance but help increase customer engagement. The old version of the airline website had obsolete UX/UI and a simple responsive design. Instead of developing one responsive website for both web and mobile, we decided to split them and develop two separate versions with different designs.

One of the main optimization techniques we used was the implementation of lazy loading or progressive loading. We also concentrated a lot of effort on image optimization. Firstly, we compressed images to new, more lightweight formats and then added low-quality image placeholders of each image (which look like a blurred picture of an original) to show users right away, while the full resolution version is still loading.

The Results

The combination of cloud adoption, new architectural approach, interoperability improvement, and implementation of new UI/UX increased the website’s speed as well as organic traffic significantly. The results of the website performance optimization and comparison of the main metrics we presented in the table below.

Performance Improvement	Old Version	New Version
Page size (KB)	3018	632
Time to first visible element	5.4 s	2.6 s
Time to interaction	10.3 s	3.1 s
Load time on "slow 3G" Chrome preset	65 s	5 s

New website with 3X performance and 13x page load time improved.

We can say with utmost certainty that such improvements influence the company’s business operations’ success.