Modern Approaches for Creating Extremely Fast Websites

Rate this content
Bookmark

In this talk is focused on performance-optimizations and standards-based approaches to achieving the fastest version of your site that you can have. We'll also talk about modern tooling and frameworks like Remix which help make your site fast with very little effort.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Brad Westphal focuses on website performance, discussing various aspects including DOM rendering performance, animations, and techniques like lazy loading and prefetching.

This statement emphasizes optimizing website performance by minimizing unnecessary requests, suggesting that avoiding a request altogether is the most efficient way to enhance speed and efficiency.

Brad Westphal suggests making only necessary requests, anticipating future needs, and fetching resources in advance to optimize performance. He also recommends fetching data in parallel to prevent slower tasks from delaying faster ones.

Brad discusses techniques like lazy loading, prefetching resources, and using HTML standards such as the 'link rel=preload' for anticipating user navigation and loading subsequent pages in advance.

Brad explains that SPAs typically respond faster initially but rely heavily on JavaScript for building UI elements, which can lead to loading delays. MPAs, on the other hand, may load fully formed HTML pages directly from the server, potentially offering a more immediate full page experience.

Remix offers benefits like parallel data fetching, efficient code splitting, and the ability to prefetch data for upcoming navigations, potentially providing a faster and more seamless user experience.

Prefetching on hover can improve performance by preloading data before the user actually navigates to a link, thereby reducing load times when the user decides to follow the link.

Brad Westfall
Brad Westfall
24 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses performance optimization in software development and engineering. It covers topics such as optimizing requests, anticipating future needs, and comparing single-page apps to multiple-page apps. It also explores the advantages of single-page apps and the use of Remix for building pages. The Talk emphasizes code splitting, optimizing data fetching, and solving client-side state. It concludes with a discussion on pre-rendering, Remix adoption, and prerendering with React.

1. Introduction to Performance Optimization

Short description:

Hi everyone, I'm super happy to be in Amsterdam. I teach React on a pretty regular basis and love it. Let's talk about performance. The fastest requests you can make is the one that you don't make at all. But what if you do need to make a request? Let's only get what we need. Anticipate future needs and fetch things in advance. Pick and choose what works for you. Get it nearby, like from a cache.

Hi everyone, I'm super happy to be in Amsterdam. It's been real fun, and thank you for having me. My name is Brad Westphal, I work at React Training. I teach React on a pretty regular basis, and I love it.

Let's do some cool things. I came up with this talk, like a lot of speakers do, you have like a general concept, and you don't really know exactly how you're going to make it or what direction it's going to go in, but I knew I wanted to talk about performance. I didn't know if I was going to talk about DOM rendering performance, or maybe animations, or all of the above, and make it just a big scatter of everything.

I started asking around, and I asked some friends and some people on Twitter and stuff, what do you think of when you think of website performance? This is one of the more common responses that I got. The fastest requests you can make is the one that you don't make at all. Have you ever heard that? Whenever I hear this one, I kind of do a little bit of a, like, what? Okay, that's kind of philosophical, they kind of mic drop and walk away, like, there you go, there is performance. But we're in the business of making websites. That make requests. I can't take away all my requests. It's not really practical.

So, I started thinking about this and I thought, okay, that's fine. If that works, if that helps. But, what if you do need to make a request? Because we're all going to need to do that. So, that's what this talk is about. Let's maybe only get what we need. Pretty simple? Sounds good. Okay. Advice. Moving on. Maybe anticipate future needs. For example, fetch things in advance when you think that you're just going to need them. Sometimes it might seem like these two are a little bit at odds with each other. But you kind of pick and choose whichever one works for you in this situation. Of course you're going to want to get it nearby. Like from a cache. That would be nice.

2. Optimizing Requests and Anticipating Future Needs

Short description:

Sometimes you need to request two things at once. And if you do that, I think we should try to do them in parallel. Only get what you need. Lazy loading images can make a website faster. Anticipate future needs by pre-rendering content.

Sometimes you need to request two things at once. And if you do that, I think we should try to do them in parallel. And don't let the slow thing hold up the fast things. So let's start right here.

If you need to make a request, only get what you need. Let's just start with something that's more standard and not so much React. With images, I'm sure most of you know, this has been around for a little bit now. We can do lazy loading, which is really great. So below the fold, if you can identify certain images as being something that doesn't necessarily need to be loaded. Maybe this is the fastest request you can make is the one you don't make at all, maybe. But only get what you need. Things that only need to be loaded when the user needs them. So the user scrolls, they get the image, very good. Okay. So that's what I'm talking about. Things that you can do to make a website just a little bit faster.

Anticipate future needs. A standard example of that would be maybe this is one that you haven't seen. Link, pre-render, lowercase l. This is not a React component. This is a standard HTML thing. I know, funny, right? Okay. So this is something that you can maybe use. If a user visits your site, whatever page they land on, imagine anticipating very easily what page they're going to go to next, because you probably have an idea, and you're downloading those pages behind the scenes ahead of time. And then the user visits the second page and then you're downloading the third and fourth possible pages they might want to go to. So this is really nice. MDN describes this as when the user navigates to the prerendered content, the current content is replaced by the prerendered content instantly. This is nice. You know why? Because it makes me feel like it makes me feel like the user is getting an experience like local development. Like, we all get the best version of our websites, right? Because we're doing local development.