Frontend Performance: First Contentful Paint (FCP) Optimization

FCP refers to the first content drawing time. Optimization methods include: 1. Compress and delay non-critical resources; 2. Inline key CSS; 3. Enable server-side compression; 4. Preload critical resources reasonably; 5. Avoid blocking rendering JS operations; 6. Use asynchronous loading strategies; 7. Optimize image format and loading; 8. Using lazy loading and responsive images; 9. Use server-side rendering reasonably. These measures can effectively shorten the time for the first time of content presentation on the page and improve user experience.

Page loading speed is crucial to the user experience, and First Contentful Paint (FCP) is an important indicator to measure the time when a web page first presents content, directly affecting the user's first impression. Optimizing FCP is to make the page "look" and start working as soon as possible and reduce the sense of waiting.

What is FCP?

FCP is a core metric in Lighthouse performance score. It records the time when the page is loaded from the beginning to the browser for the first time it renders any visible content such as text, pictures, non-white canvas, etc. The shorter this time, the earlier the user will feel that the page is "moving" rather than blank.

Simply put: FCP reflects the time when the user first sees the content of the page.

Reduce the loading time of critical resources

One of the most direct factors affecting FCP is the loading and execution time of key resources. These resources include HTML, CSS, JS, and pictures required on the first screen.

• Compress and delay non-critical JS/CSS : Split out JavaScript or CSS that is not needed on the first screen, or delay loading.
• Use inline key CSS : Write the home screen style directly into HTML to avoid additional requests to block rendering.
• Enable server-side compression (such as Gzip or Brotli) : reduces transmission volume and speeds up loading.
• Use preload reasonably : Use <link rel="preload"> to load key resources, such as fonts or key JS in advance.

For example, if your main JS file is large and there is no code splitting, it will block the first rendering of the entire page. By loading on demand with tools such as Webpack, FCP can be significantly shortened.

Avoid blocking rendering operations

Many front-end operations will prevent the browser from drawing content quickly, thus slowing down FCP.

• Don't put a lot of synchronized JS in it: This will completely block HTML parsing.
• Avoid long-running JS tasks : Long tasks will cause the main thread to be occupied and rendering will be delayed.
• Use an asynchronous loading strategy : for example, add async or defer attributes to the script.

For example, you introduce a synchronously executed third-party statistics script at the top of the page, which may have to process a bunch of logic before continuing to render the page, which will affect FCP.

Picture and resource optimization

Images are usually the heaviest part of the content on the home screen. If handled improperly, they can become a bottleneck in FCP.

• Using modern image formats : such as WebP, it can significantly reduce the volume compared to PNG/JPG.
• Set width and height attributes : prevent layout offsets and can also help browser render earlier.
• Lazy loading non-first-screen images : implement it with loading="lazy" or Intersection Observer.
• Use responsive image srcset : Provide the right size according to the device and reduce loading.

For example, a page has 10 large images, but only the first two are displayed on the first screen, and the rest can be delayed loading, so that the first screen content can be rendered first screen content and improve FCP.

Rational use of server-side rendering (SSR)

For applications that rely heavily on JavaScript, if all content is rendered by client, FCP is often worse.

• Using SSR can output the first-screen HTML content faster, allowing users to see things faster.
• Combined with Hydration technology, the interaction capability is activated based on server rendering.

For example, if a React application does not do SSR, the initial HTML may be empty, and the content will only start to be rendered after JS is loaded, which is very unfriendly to FCP.

Basically that's it. FCP optimization seems complex, but in fact the core idea is very clear: reduce the number and size of resources on the critical path and display the content as soon as possible . Although each step is not complicated, it can bring significant improvements when combined.

The above is the detailed content of Frontend Performance: First Contentful Paint (FCP) Optimization. For more information, please follow other related articles on the PHP Chinese website!