The core of LCP optimization is to accelerate the loading of key content on the first screen and reduce rendering blockage. 1. Load the key resources on the first screen in advance, use WebP/AVIF format, fix the image size, use lazy loading reasonably, and check the CDN acceleration effect; 2. Reduce blockage items on the critical rendering path, split non-critical CSS, asynchronous loading of JS, and prioritize server-side rendering to speed up the first screen rendering; 3. Use font loading strategies reasonably, use font-display: swap, streamline word weight and character set, compress font files, or use system fonts to reduce loading delay.

Largest Contentful Paint (LCP) is an important metric for measuring web page loading performance, especially in H5 pages, which directly affects user experience and search engine ratings. The core of optimizing LCP is to make key content appear in front of users as soon as possible.

1. Load key resources on the first screen in advance

LCP is often triggered by the largest elements in the page, such as images, videos, or large blocks of text. To optimize it, you must first make sure that these "maximum content" can be loaded as early as possible.

• Images should be used in modern formats (such as WebP or AVIF) as possible, with smaller size and faster loading.
• Use loading="lazy" to load non-first-screen images, but do not delay loading the key images on the first screen.
• Set a fixed size for the picture to prevent layout jitter from affecting the browser's calculation of LCP.
• If you use the <video></video> tag as the main content, you can preload the cover image and use JS to control the playback behavior.

Sometimes you think the image has been optimized, but it may be due to improper CDN configuration, so it is recommended to check the cache policy of static resources and the CDN acceleration effect.

2. Reduce blocking items on critical rendering paths

When the browser parses HTML and renders the page, if the script or style sheet is blocked, the page content will be drawn delayed, thereby slowing down the LCP.

• Minimize the number of <script></script> and <link rel="stylesheet"> in .
• Split non-critical CSS out of asynchronous loading, or inline critical CSS.
• Asynchronously loading JavaScript, especially statistical scripts, advertisements, etc., does not affect the content displayed on the first screen.
• Avoid using synchronized document.write() , which has a greater impact on mobile.

If you use frameworks (such as Vue, React), server-side rendering (SSR) or static generation (SSG) can significantly improve the first-screen speed and can also help render LCP elements in advance.

3. Use font loading strategies rationally

Although the custom font is beautiful, if it is not handled well, it will drag down the rendering speed of the first screen, especially when the mobile network is unstable.

• Use font-display: swap to avoid text blanking (FOIT) during font loading.
• Only the necessary word weights and character sets are loaded, for example, English websites can not load Chinese characters.
• Font files are also compressed, such as WOFF2 format is more efficient than TTF.
• If the font is not particularly important, consider using the system default font directly.

Fonts are a point that is easy to be ignored. Many people only focus on pictures and scripts. In fact, slow font loading will also indirectly affect LCP because it may cause text content to be delayed.

Basically, these operations are more practical. Not necessarily every project is suitable for you. Just choose a few key points to start. The key is to let users see the main content as soon as possible.

The above is the detailed content of Optimizing H5 Largest Contentful Paint (LCP). For more information, please follow other related articles on the PHP Chinese website!