From 25d93de9fe0a18734071aaae07dec69097907bc2 Mon Sep 17 00:00:00 2001 From: Ismael Rumzan Date: Fri, 4 Feb 2022 18:30:55 +0200 Subject: [PATCH] Updated going-to-production with loading performance (#33179) ## Documentation Update Based on this issue: https://github.com/vercel/next.js/issues/29319 ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Steven <229881+styfle@users.noreply.github.com> Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com> --- docs/going-to-production.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/going-to-production.md b/docs/going-to-production.md index aa713bf04577c..f65f055d06776 100644 --- a/docs/going-to-production.md +++ b/docs/going-to-production.md @@ -22,6 +22,7 @@ Before taking your Next.js application to production, here are some recommendati - [`next/image` and Automatic Image Optimization](/docs/basic-features/image-optimization.md) - [Automatic Font Optimization](/docs/basic-features/font-optimization.md) - [Script Optimization](/docs/basic-features/script.md) +- Improve [loading performance](#loading-performance) ## Caching @@ -117,6 +118,26 @@ When an unhandled exception occurs, you can control the experience for your user You can also log and track exceptions with a tool like Sentry. [This example](https://github.com/vercel/next.js/tree/canary/examples/with-sentry) shows how to catch & report errors on both the client and server-side, using the Sentry SDK for Next.js. There's also a [Sentry integration for Vercel](https://vercel.com/integrations/sentry). +## Loading Performance + +To improve loading performance, you first need to determine what to measure and how to measure it. [Core Web Vitals](https://vercel.com/blog/core-web-vitals) is a good industry standard that is measured using your own web browser. If you are not familiar with the metrics of Core Web Vitals, review this [blog post](https://vercel.com/blog/core-web-vitals) and determine which specific metric/s will be your drivers for loading performance. Ideally, you would want to measure the loading performance in the following environments: + +- In the lab, using your own computer or a simulator. +- In the field, using real-world data from actual visitors. +- Local, using a test that runs on your device. +- Remote, using a test that runs in the cloud. + +Once you are able to measure the loading performance, use the following strategies to improve it iteratively so that you apply one strategy, measure the new performance and continue tweaking until you do not see much improvement. Then, you can move on to the next strategy. + +- Use caching regions that are close to the regions where your database or API is deployed. +- As described in the [caching](#caching) section, use a `stale-while-revalidate` value that will not overload your backend. +- Use [Incremental Static Regeneration](/docs/basic-features/data-fetching#incremental-static-regeneration) to reduce the number of requests to your backend. +- Remove unused JavaScript. Review this [blog post](https://calibreapp.com/blog/bundle-size-optimization) to understand what Core Web Vitals metrics bundle size affects and what strategies you can use to reduce it, such as: + - Setting up your Code Editor to view import costs and sizes + - Finding alternative smaller packages + - Dynamically loading components and dependencies + - For more in depth information, review this [guide](https://papyrus.dev/@PapyrusBlog/how-we-reduced-next.js-page-size-by-3.5x-and-achieved-a-98-lighthouse-score) and this [performance checklist](https://dev.to/endymion1818/nextjs-performance-checklist-5gjb). + ## Related For more information on what to do next, we recommend the following sections: