Chapter 1. The Importance of Web Performance in Modern Web Development

The most solid reasons why you and your product owner should care about performance

Hey Web Devs,

Welcome to the first chapter of the ultimate web performance guide! I’m super excited to start this journey with you! This is the basic tutorial that the first time gamer needs to learn how to play the performance game. If you are a pro feel free to press the skip button, but I put in here some really interesting case studies and stats from big companies and big projects to make a solid and not-boring case for the importance of performance. With all that out of the way, let’s dive right into the world of performance optimization.

1.1. The Basic Definition of Web Performance

Web performance is a measure of a web application's speed, efficiency, and overall ability to load, render, and respond to user interactions. In future chapters we are going to cover each of those areas in depth but for now this simple definition is a good starting point.

📋 Case Study: What constitutes "fast"? We will define that later, now it’s enough to say that in a 2017 study made by Akamai researchers found that even a 100-millisecond delay in loading time can decrease conversion rates by 7% so even small performance changes can have huge financial consequences.

📚 Future Reference: We will learn how to quantify performance in the chapter: “Optimizing Core Web Vitals With React and Next.js“ and how to measure and analyze it in multiple chapters about the usage of 4 tools: “How to Use The React Developer Tools for Performance Optimization“ & “Google Lighthouse For Advanced Performance Measurements“ & “WebPageTest For Advanced Performance Measurements“ & “How to Use The Chrome Dev Tools Performance Panel“.

1.2. User Experience and Web Performance

First and foremost, web performance is all about creating a positive user experience and a key part of that experience is speed. When your site loads quickly, users can find what they're looking for without staring at “the loading screen” / “spinner hell“. And as we all know, happy users are more likely to stick around, recommend your site to others, and even make purchases.

📋 Case Study: In 2016 the Financial Times ran an experiment where they artificially delayed their page load times and found that a 1-second delay in page rendering could potentially cost them up to 4.9 million users per year.

📚 Future Reference: We will learn how to identify the user experience impact of our React/Next.js app’s speed in the chapters: “The RAIL Model, the React and the Next.js“ and “What is a Performance Culture and How to Build One?“

1.3. Web Performance and SEO

Web performance isn't just about retaining users on your site; it's also about attracting them in the first place. This is where Search Engine Optimization (SEO) comes in. Google, the most widely used search engine, includes site speed (and as of today, Core Web Vitals) as one of the many factors influencing search result rankings.

Improving your site's performance can increase your visibility on search engine results pages (SERPs), drive more organic traffic to your site, and enhance user engagement and conversion. Conversely, a slow-loading site can cause your SERP rankings to drop, reducing your site's visibility and impacting your site's ability to attract new users.

📋 Case Study: Pinterest managed to improve their site speed and witnessed a 15% increase in search engine traffic and a 15% increase in sign-ups.

📚 Future Reference: SEO is vaguely related to a couple of topics covered in “The RAIL Model, the React and the Next.js“, “Optimizing Core Web Vitals With React and Next.js“ and

1.4. Web Performance and Business Success

The impact of web performance extends beyond user experience and SEO. It directly affects business metrics like conversion rates, customer retention, and overall revenue. This is the key to the special attention this field enjoys. As the Akamai study showed, a one-second delay in page load time can lead to a 7% loss in conversions. That means an e-commerce site making $100,000 per day could potentially lose $2.5 million in sales every year from that small delay.

📋 Case Studies: Rakouten 24 a Japanese online-store giant (as reported on web.dev) have achieved amazing results by improving web performance: an increased revenue per visitor by 53.37% and conversion rate growth by 33.13%. A more recent Portent study showed that websites that load faster than 1 second have 3 times the conversion rate compared to sites that load in 5 seconds.

📚 Future Reference: The chapter “What is a Performance Culture and How to Build One?“ has extensive coverage of topics like how to communicate performance concerns to business stakeholders. There I show you how to define the connections between performance and business metrics, company KPIs and OKRs.

1.5. Web Performance and Accessibility

Web performance also plays a role in making the web accessible to everyone. Not all users have access to high-speed internet or high-powered devices. For many, slow connections and low-end devices are the norm. By optimizing performance, you ensure that your website is usable and accessible to these users as well.

Performance optimizations can also lead to improved accessibility in other ways. Using proper, semantic, accessible HTML tags can reduce cluttered DOM structures or weighty JavaScript solutions, or optimizing your site's images also gives you an opportunity to provide alternative text for them, which is beneficial for users who rely on screen readers.

📋 Case Studies: While I’m not aware of studies about how performance optimization improves accessibility there are indeed talks on YouTube or blog posts drawing the connection between these two areas.

📚 Future Reference: The tools and techniques related to this aspect are broad and general, spread over the whole material. Ultimately all our efforts will help to improve the Accessibility of our sites.

1.6. Web Performance and Sustainability

If you feel strongly about sustainability and environmental impact, web performance might just become a new favorite of yours! The energy consumed by servers, network infrastructure, data transfer and the devices we use all contribute to carbon emissions.

The more performant a website or application, the less processing power and energy the user's device needs to render and run the site or app. By making your websites more efficient, you're effectively reducing the energy usage on millions of devices, which can have a considerable cumulative impact. Reducing the data transmitted over those optic-fiber cables also has positive effects in this sense.

📋 References: If the internet were a country it would be the 6th largest polluter. No wonder there’s a green / sustainable web movement. You can learn more about it at places like The Green Web Foundation or the Website Carbon - where you can also calculate the CO2 emission of your website. Or you can grab a popular book on this topic: Sustainable Web Design. Perhaps take some quick tips from Fershad Irani, a web sustainability consultant.

📚 Future Reference: As with accessibility, most parts of the guide contribute to achieving a more sustainable version of any website through the overall performance improvements.

1.7 The Unique Challenges of Modern Web Applications

Modern web applications are super exciting to build! We get more support from the frameworks than ever before in web development history to create awesome apps fast, but they also come with their unique set of performance challenges.

As we increase the complexity of our projects, the size of JavaScript bundles often grows as well and it’s not always straightforward to even know what goes into them. These large bundles then take longer to download, parse, and execute, which can significantly impact performance, especially on mobile devices or slower network connections. There are many options to fix this problem but it’s not always obvious which approach would bring the best results.

On the flipside of frameworks we need to make more choices than ever before. Whether to use runtime or build time CSS tools? Or to use any at all? How to solve the issue of cache invalidation? How to import images? How to configure the bundler? Or which one to use? What’s the appropriate rendering strategy?

Having a deep understanding of every factor is an enormous challenge but they are all important decisions to be made that can impact web performance. I will give you answers or strategies to come up with your own answers for all these questions and more using a web performance mindset.

1.8. Special Considerations for React.js and Next.js Performance

React's component-based architecture makes it easy to build scalable and maintainable applications. However, inefficient rendering of components can lead to wasted computations and sluggish UI. Most of you surely know that every time the state of a React component changes, the component re-renders. If not managed properly, this can lead to unnecessary renders and under certain conditions, noticeably slow down your applications.

And our concerns are far from over! Hooks themselves are a performance tradeoff (you know invoking extra functions every render) and there’s no one-size-fits-all solution when it comes to their use. The ubiquitous question of what’s the right place to store state in a React app also has performance implications. Then there are questions about the state itself. Should it be mutable or immutable for example. Did you know that’s a performance tradeoff too?

Similarly, Next.js brings server-side rendering, static site generation and their different flavors to the React ecosystem, which are fantastic tools for performance and SEO, but also add complexity and potential pitfalls. What if SSR goes on for too long? What if SSG content gets out of date? What if your hosting provider doesn’t even support the latest features of Next?

Good infrastructure, efficient data fetching, caching strategies, streaming support and the appropriate usage of the different rendering strategies can play a crucial role in delivering a performant user experience powered by Next.js.

For all these reasons and more, it’s crucial to have deep familiarity with the tools and techniques available in the React ecosystem to max out the positive impact of speed on our projects.

If you feel like you’re up to the challenge let’s get started for real in the next chapter!