Introduction: The Ultimate Guide to High Web Performance React and Next.js Applications

The "Art of War" for the Web Performance Ninjas in 2023 (and in more years to come)

Shipping epic web performance is not just a business necessity these days, it's also a prerequisite to become a badass frontend ninja master. - me

While that opening statement is not necessarily true, that’s how I always felt about web performance. For me, performance optimization is the most challenging and exciting part of frontend engineering work and in this series I want to help you master this skill with a special focus on React.js and Next.js apps.

I believe web developers can benefit immensely from this expertise on multiple levels. Performance is one of the top goals that drives the creation of the newest and most innovative frontend technologies. Some of the best developers of our time are dedicated to relentlessly pushing the boundaries of what’s possible in web and browser performance. It’s a world full of exciting challenges, surprising discoveries to be made and there’s always something new in the making. It’s just a lot of fun to be involved with.

But that’s not all! Web performance optimization is about so much more! I’m 100% sure you already have a pretty good understanding about the why. We all abandoned websites because they were loading or reacting frustratingly slowly and for businesses that translates to lost revenue, sometimes lots of lost revenue. It’s not a surprising fact that big companies are willing to go far to prevent those losses from happening.

However, for us developers, the story is a bit different. I believe most of us want to create web experiences that we can be proud of and that’s exactly what I want to help you to do! I will teach you all the intricacies of developing, shipping and maintaining fast (and furious) React or Next.js web apps, capable of serving millions of daily users with a top-notch user experience that you can proudly reference on your CV, LinkedIn or your social media channel of choice (and get tons of likes or whatever).

I will cut open the internals of the Browser platform, React.js and Next.js to teach you the ultimate techniques of web performance optimization. It’s going to be super insightful, practical, results oriented, full of examples, case studies and useful tips.

And there’s a final truth behind all this, that I will teach throughout the whole material.

Web performance is a state of mind.

To get performance right long term, It should permeate every aspect of our work so I will teach you the everyday habits and the mindset necessary to do so.

What’s Included?

We will analyze React and Next.js to the deepest level and learn all the foundational and advanced tools and techniques to fine-tune their performance characteristics. The material also covers all the necessary, framework independent topics like: the RAIL model, controlling the browser cache - header configuration and invalidation strategies, utilizing web- and service workers and other native browser APIs like the Navigation and Resource Timing APIs, Intersection and Resize Observers and different animation techniques.

You will learn about the most efficient use of the popular performance measurement tools: Chrome Dev Tools, Lighthouse, WebPageTest, React Development Tools, Storybook (yes, that Storybook) and more.

The guide covers how to build a performance culture in an organization, including development process best practices for measuring, tracking, monitoring, maintaining and continuously improving the performance of a project. It also covers human factors for example with an intro to communication techniques used to reach alignment on performance goals with business stakeholders.

And the list is far from over. I will equip you with the whole set of tools and techniques required to develop and maintain (mostly but not exclusively) React based websites that serve millions of daily users while offering a world class user experience. If that doesn't sound exciting for a frontend engineer I don't know what does!

Take a look at the whole list of topics in the Table of Contents if you haven’t done so and start your web performance journey straight away! It's gonna be lit devs!