To do this, it is important to set placeholders using <div> tags, etc. Suppressing CLS with placeholders In the example above, the gray placeholder is displayed even before the blue ad is loaded, so no layout movement occurs before or after loading. Even if the size of the ad to be loaded cannot be determined in advance, it is possible to reduce the impact by setting min-height etc. even if CLS cannot be set to 0. <div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div> Change the display location and settings of dynamic content Content that is displayed with a delay in page loading due to the use of JavaScript is also an element that is likely to cause CLS problems.
Recently, announcements regarding the response to the new coronavirus have been embedded as dynamic content at the top of sites, and this is often the cause of CLS issues. Special Data In that case, consider taking the following actions. Set placeholder Display without using JavaScript Move the display position downward Note that CLS caused by content inserted immediately after a user's click action is not counted, but if it takes a long time to load after a click, it can cause CLS issues. In that case, take measures such as setting a placeholder in the same way. Optimize CSS that causes CLS deviation Regarding lazy loading to later through JavaScript, if these are applied later, it can lead to CLS problems.
In particular, CSS involved in rendering within the first view must be loaded first. Change web font settings When web fonts are applied, slight layout deviations can occur if the applied font and fallback font are different sizes. The impact of fonts can be reduced by preferentially loading them with <link rel=”preload”> or using the CSS font-display property, but fonts alone are not the main cause of CLS failures. In most cases it doesn't. If CLS is occurring on an infinite scroll page In infinite scroll pages, the causative element itself is dynamic content, but since it is a somewhat special case, I will introduce it here.