00:00:00 Okay, now we've learned what the metrics are.
00:00:03 But how do you measure these metrics?
00:00:05 Well, we have Chrome's Lighthouse to generate the performance report.
00:00:10 There is also a special tool that I specifically use to measure the performance of a website called GTmetrics.
00:00:17 It will not only provide you with web scores and rate your website, but will also provide you with more detailed analysis like structure.
00:00:25 It tells you about how a web page is put together and if there are any issues that might slow it down.
00:00:31 It's like an x-ray of a website.
00:00:34 You can visit this section and see what you did best or what you need to improve on your website.
00:00:39 It's like peeking under the hood of a car to see how it's put together and making sure it runs smoothly.
00:00:45 Everything clear so far?
00:00:47 Now, let's talk more about how we can actually achieve these results.
00:00:52 From time to time, we have been talking about using Next.js instead of React for enhanced performance.
00:00:58 and a head of Google Chrome Developer Experience released a Netflix's web performance case study.
00:01:04 There, he said that there are no silver bullets to web performance.
00:01:08 Simple static pages benefit from being server rendered with minimal JavaScript.
00:01:13 Libraries can provide great value for complex pages when used with care.
00:01:18 If you properly offload the page from the client side and render some pages on the server side, you'll have great performance.
00:01:25 And guess what?
00:01:25 That's exactly what Next.js 13 does.
00:01:28 It allows you to pre-render some of your code on the server and send content such as HTML, CSS, and minimal JavaScript files.
00:01:36 The client refers to the device you're currently using, such as your smartphone or computer.
00:01:42 The device sends requests to the server and displays the interface that we can then interact with.
00:01:48 The server is essentially just a computer device, but it is equipped with a strong configuration and remains operational continuously.
00:01:57 It is where all the code for our application is stored.
00:02:00 So when the client, meaning our device, sends a request, The server performs the necessary computations and sends back the required outcome.
00:02:08 Client-side means executing the code on the user's browser.
00:02:12 This means that the server sends the HTML, CSS, and JavaScript code to the client.
00:02:18 Then the browser executes the JavaScript code and the page is displayed.
00:02:22 Server-side means executing the code on the server before it is sent to the user.
00:02:28 The server executes the JS code, pre-renders the content, and sends the pre-rendered HTML file.
00:02:34 That doesn't mean it doesn't send JavaScript files at all.
00:02:37 It still sends some, but a lot less than before.
00:02:41 This leads to the page loading faster because the user's browser doesn't have to download a bunch of JavaScript code and execute it to render the page.
00:02:50 But how do we render our content on the server side?
00:02:53 This is where Next.js has the upper hand over React.
00:02:56 Even though React introduced the feature of React server components, it's Next.js 13 that has deeply integrated that feature.
00:03:04 By default, any component you create will be rendered on the server side.
00:03:08 Now that we know how Next.js architecture works, let's see how these things improve the performance in a nutshell.
00:03:15 First, faster initial page load.
00:03:18 With the above strategies, we generate the HTML on the server and send it to the client with minimal JavaScript.
00:03:25 Therefore, the page loads faster.
00:03:28 And closely related to that is reduced client-side load.
00:03:32 With React, we're doing everything on the client's device.
00:03:35 Thus, a higher JavaScript bundle size.
00:03:38 Remember the Netflix case study where they say that they reduced the JavaScript bundle by 200 kilobytes.
00:03:44 doesn't sound like a lot, but they're proud of it.
00:03:47 So with Next.js server-side features, we send pre-rendered HTML pages and minimal JavaScript code.
00:03:54 The argument against SSR is that devices and the internet are getting faster every day.
00:04:00 And that is true.
00:04:01 But still, there are hundreds of millions of people in developing world and areas with slower devices and internet.
00:04:08 Of course, it depends on where your users are.
00:04:11 If you have a website for a local sushi restaurant in New York, you don't really need to take into account international users.
00:04:17 It all depends on the context.
00:04:19 So with server-side rendering, because the server takes the load of executing the JavaScript code, users with slower internet and slower devices can start
00:04:29 seeing content more quickly, which is never a bad thing.
00:04:32 Next.js's next benefit is image optimization.
00:04:36 They offer their own image component, which is highly optimized.
00:04:40 But of course they're going to say it's good.
00:04:42 It's theirs.
00:04:43 So let's not take their word for it.
00:04:45 Let's test whether they're right or not.
00:04:48 I created two projects with Sanity with the same code using Next.13 and React 18. In the performance report of React 18 website,
00:04:58 network payloads was a critical downfall.
00:05:01 As you can see, images were served as they're coming from Sanity.
00:05:04 Whereas using Next.js 13's image component, that wasn't the case.
00:05:09 it actually optimized these images.
00:05:12 As you can see, all the images have been optimized and are less than 1 MB in size.
00:05:17 All we had to do was replace the lowercase IMG component with the Next.js's image component, and you have amazing performance.
00:05:26 And I think you can see which core Web Vitals will experience enhancement by using the Next.js' image optimization, the LCP,
00:05:34 or the largest Contentful Paint.
00:05:36 The third reason to use proper Next.js is SEO.
00:05:40 Better SEO means that search engines like Google can understand your website better and recommend it to more users.
00:05:47 Think about how often you look things up on a search engine.
00:05:51 SEO can make a big impact on businesses.
00:05:54 And it's one of the reasons I recommend using Next when working on projects for most clients.
00:05:59 Client-side rendering has worse SEO because it sends minimal HTML content along with heavy JavaScript files.
00:06:06 Search engine crawlers can't understand JavaScript that well.
00:06:10 Server rendering is different.
00:06:11 The server will send the complete HTML file and minimal JavaScript, meaning that the crawlers read the bigger HTML file,
00:06:18 resulting in better SEO.
00:06:21 Also, faster initial load speed matters.
00:06:24 Google values it as the top ranking factor when deciding whether to display your website or not.
00:06:31 There is a reason why so many famous companies, including Netflix, TikTok, Twitch, Hulu, Notion, Target, and many more use Next.js.
00:06:42 And as we've been going through all of these benefits, you can see that there are many, many ways in which Next.js improves web performance.
00:06:51 Next.js offers all of these features by default.
