FCP measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. This includes text, images, SVGs, and non-white canvas elements.
LCP measures the time it takes for the largest content element visible in the viewport to load. Optimizing LCP involves improving the loading of the largest elements on the page, which often includes images, videos, and large blocks of text. Here are the key optimizations:
How to improve FCP, LCP
Code splitting and lazy loading
- By Lazy in Nextjs, you can reduce the initial bundle size. Smaller bundle size means the browser can download, parse, and execute the JavaScript code faster, leading to a quicker rendering of the largest contentful element.
Minimize render-blocking resource
- Use Tailwind Css’s utility classes to avoid large Css files and reduce amount of blocking Css. See this article together https://nitropack.io/blog/post/eliminate-render-blocking-resources
Optimize images
- Use
next/imagecomponents for images
Minimize third-party scripts
- Minimize the usage of external libraries and third-party scripts that can impact LCP.