The core of H5 page CLS optimization is to ensure stable layout and avoid displacement when elements are loaded. Common problems include unsize images, font rearrangements, advertising pop-ups, etc. High CLS issues can be identified through Chrome DevTools, Lighthouse and RUM tools. 1. Leave space for pictures and videos; 2. Use font-display: swap to reduce font rearrangement; 3. Delay loading ads and reserve placeholder; 4. Avoid inserting large chunks of content after loading. You can continuously monitor and optimize the results with the help of PageSpeed Insights, Chrome plug-in and front-end buried points.

The core of the CLS optimization of H5 pages is: make the page layout as stable as possible and avoid sudden displacement. Especially when mobile users swipe to browse, if the content suddenly "jumps away", it will not only have a poor experience, but also affect the performance rating.

What is CLS? Why is it important?

Cumulative Layout Shift is a metric used by Google to measure the visual stability of the page. Simply put, it is the extent to which the element position changes unexpectedly during the page loading process. The higher the value, the more "shaking" the page and the worse the user experience.

In H5 pages, common problems include the layout after the image is loaded, the font loading causes text re-arrangement, and the sudden insertion of advertisements or pop-ups. These problems will significantly increase the CLS value and affect the page score.

How to identify high CLS problems?

To optimize CLS, you must first be able to accurately discover it. There are several ways to:

• Chrome DevTools Performance panel : directly view the CLD records and you can see the time and impact of each layout offset event.
• Lighthouse report : Run a Lighthouse audit and will clearly give CLS scores and improvement suggestions.
• Real User Monitoring (RUM) : Use tools like Sentry and Datadog to collect CLS data of online users, which is closer to the real scene.

Once you find that the CLS is too high, you can locate the specific reason.

Common optimization methods

1. Make space for pictures and videos

The size not specified before the image is loaded will cause the rendering to be re-layouted after the rendering is completed. The solution is simple: add width and height attributes to the img tag, or set a fixed aspect ratio with CSS.

 <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="example diagram">

If it is a responsive design, you can use aspect-ratio to maintain the scale:

 img {
  width: 100%;
  aspect-ratio: 3 / 2;
}

2. Avoid reordering caused by fonts

Web fonts are loading slowly, and the browser may first render with the default font and replace them after the custom font is loaded, causing text jumps. You can use font-display: swap to reduce this effect:

 @font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

Although swap will switch fonts once, it will not block rendering, and the overall experience will be smoother.

3. Ad/embed content delays loading and reserves placeholder

Ads, iframes and other content are often loaded dynamically, which can easily disrupt the original layout. There are two solutions:

• Reserve a blank area with a fixed height before loading
• Use Intersection Observer to delay loading and request resources when the user is about to see it

for example:

 <div class="ad-placeholder" style="height: 200px;"></div>

Then listen in JS and enter the viewport before loading the ad content.

4. Do not insert large chunks of content after the page is loaded

For example, some pop-up windows and floating buttons are inserted only after the DOM is loaded, which can easily cause layout shaking. suggestion:

• Write the structure in advance, use CSS to control the display and hide it
• Or make sure that the main content stream is not affected when inserting

Tool-assisted and continuous monitoring

In addition to manual optimization, some tools can also be used to automate detection and repair:

• PageSpeed Insights : Provides CLS-related optimization suggestions
• Web Vitals Chrome Plugin : View page CLS values in real time
• Front-end point reporting : Regularly collect CLS data from the user side, which facilitates long-term tracking

Optimizing CLS is not a one-time transaction, but a process of continuous improvement. Every time a new feature is launched, it is best to run Lighthouse to check it out.

Basically all this is not complicated but easy to ignore.

The above is the detailed content of Optimizing H5 Cumulative Layout Shift (CLS). For more information, please follow other related articles on the PHP Chinese website!