PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $995
Our team of 体育平台app Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

info@seowebdesignllc.com

REQUEST QUOTE
体育平台app Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

体育平台app / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Top
体育平台app Web Design  /  Web Design  /  How To Fix Cumulative Layout Shift (CLS) Issues

世界杯买球推荐

Google’s Core Web Vitals initiative has taken the 体育平台app and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.

Cumulative Layout Shift (CLS) [1] attempts to measure those jarring movements of the page as new content — be it images, advertisements, or whatever — comes into play later than the rest of the page. It calculates a score based on how much of the page is unexpectedly moving about, and how often. These shifts of content are very annoying, making you lose your place in an article you’ve started reading or, worse still, making you click on the wrong button!

In this article, I’m going to discuss some front-end patterns to reduce CLS . I’m not going to talk too much about measuring CLS as I’ve covered that already in a previous article [2] . Nor will I talk too much about the mechanics of how CLS is calculated: Google has some good documentation on that [3] , and Jess Peck [4] ’s The Almost-Complete Guide to Cumulative Layout Shift [5] is an awesome deep dive into that too. However, I will give a little background needed to understand some of the techniques.

Why CLS Is Different

CLS is, in my opinion, the most interesting of the Core Web Vitals, in part because it’s something we’ve never really measured or optimized for before. So, it often requires new techniques and ways of thinking to attempt to optimize it. It’s a very different beast to the other two Core Web Vitals.

Looking briefly at the other two Core Web Vitals, Largest Contentful Paint (LCP) [6] does exactly as its name suggests and is more of a twist on previous loading metrics that measures how quickly the page loads. Yes, we’ve changed how we defined the user experience of the page load to look at the loading speed of the most relevant content , but it’s basically reusing the old techniques of ensuring that the content loads as quickly as possible. How to optimize your LCP should be a relatively well-understood problem for most web pages.

First Input Delay (FID) [7] measures any delays in interactions and seems not to be a problem for most sites [8] . Optimizing that is usually a matter of cleaning up (or reducing!) your JavaScript and is usually site-specific. That’s not to say solving issues with these two metrics are easy, but they are reasonably well-understood problems.

One reason that CLS is different is that it is measured through the lifetime of the page — that’s the “cumulative” part of the name! The other two Core Web Vitals stop after the main component is found on the page after load (for LCP), or for the first interaction (for FID). This means that our traditional lab-based tools, like Lighthouse, often don’t fully reflect the CLS as they calculate only the initial load CLS. In real life, a user will scroll down the page and may get more content dropping in causing more shifts.

CLS is also a bit of an artificial number that is calculated based on how much of the page is moving about and how often. While LCP and FID are measured in milliseconds, CLS is a unitless number output by a complex calculation [9] . We want the page to be 0.1 or under to pass this Core Web Vital. Anything above 0.25 is seen as “poor”.

Shifts caused by user interaction are not counted . This is defined as within 500ms of a specific set of user interactions though pointer events and scroll are excluded [10] . It is presumed that a user clicking on a button might expect content to appear, for example by expanding a collapsed section.

CLS is about measuring unexpected shifts . Scrolling should not cause content to move around if a page is built optimally, and similarly hovering over a product image to get a zoomed-in version for example should also not cause the other content to jump about. But there are of course exceptions and those sites need to consider how to react to this.

CLS is also continually evolving [11] with tweaks and bug fixes. It has just had a bigger change announced that should give some respite to long-lived pages [12] , like Single Page Apps (SPA) and infinite scrolling pages, which many felt were unfairly penalized in CLS. Rather than accumulating shifts over the whole page time to calculate the CLS score like has been done up until now, the score will be calculated based on the largest set of shifts within a specific timeboxed window.

This means tha if you have three chunks of CLS of 0.05, 0.06, and 0.04 then previously this would have been recorded as 0.15 (i.e. over the “good” limit of 0.1), whereas now will be scored as 0.06. It’s still cumulative in the sense that the score may be made up of separate shifts within that time frame (i.e. if that 0.06 CLS score was caused by three separate shifts of 0.02), but it’s just not cumulative over the total lifetime of the page anymore.

Saying that, if you solve the causes of that 0.06 shift, then your CLS will then be reported as the next largest one (0.05) so it still is looking at all the shifts over the lifetime of the page — it’s just choosing to report only the largest one as the CLS score.

With that brief introduction to some of the methodology about CLS, let’s move on to some of the solutions ! All of these techniques basically involve setting aside the correct amount of space before additional content is loaded — whether that is media or JavaScript-injected content, but there’s a few different options available to web developers to do this.

Set Width And Heights On Images And iFrames

I’ve written about this before [13] , but one of the easiest things you can do to reduce CLS is to ensure you have width and height attributes set on your images . Without them, an image will cause the subsequent content to shift to make way for it after it downloads:

An example layout with a title and two paragraphs, where the second paragraph has to shift down to make space for an image.
Layout shift after image loads. ( Large preview [14] )

This is simply a matter of changing your image markup from:

																		
																		...
																	
																

To:

																	
																	...
																
															

You can find the dimensions of the image by opening DevTools and hovering over (or tapping through) the element.

Chrome Dev Tools screenshot showing the image, rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, file size and current source.
Chrome DevTools shows the image dimensions and aspect ratios when hovering over an element. ( Large preview [15] )

I advise using the Intrinsic Size (which is the actual size of the image source) and the browser will then scale these down to the rendered size when you use CSS to change these.

Quick Tip : If, like me, you can’t remember whether it’s width and height or height and width, think of it as X and Y coordinates [16] so, like X, width is always given first.

If you have responsive images and use CSS to change the image dimensions (e.g. to constrain it to a max-width of 100% of the screen size), then these attributes can be used to calculate the height — providing you remember to override this to auto in your CSS:

													
													img { max-width: 100%; height: auto; }
												
											

All modern browsers support this [17] now, though didn’t until recently as covered in my article [18] . This also works for elements and srcset images (set the width and height on the fallback img element), though not yet for images of different aspect-ratios — it’s being worked on [19] , and until then you should still set width and height as any values will be better than the by defaults!

This also works on native lazy-loaded images (though Safari doesn’t support native lazy loading by default yet).

The New aspect-ratio CSS Property

The width and height technique above, to calculate the height for responsive images, can be generalized to other elements using the new CSS aspect-ratio property, which is now supported by Chromium-based browsers and Firefox [20] , but is also in Safari Technology Preview so hopefully that means it will be coming to the stable version soon.

So you could use it on an embedded video for example in 16:9 ratio:

	
	video { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

	
	

Interestingly, without defining the aspect-ratio property, browsers will ignore the height for responsive video elements and use a default aspect-ratio of 2:1 [21] , so the above is needed to avoid a layout shift here.

In the future, it should even be possible to set the aspect-ratio dynamically based on the element attributes by using aspect-ratio: attr(width) / attr(height); but sadly this is not supported yet.

Or you can even use aspect-ratio on a

element for some sort of custom control you are creating to make it responsive:

	
	#my-square-custom-control { max-width: 100%; height: auto; width: 500px; aspect-ratio: 1; }

	
	

For those browsers that don’t support aspect-ratio you can use the older padding-bottom hack [22] but, with the simplicity of the newer aspect-ratio and wide support (especially once this moves from Safari Technical Preview to regular Safari), it is hard to justify that older method.

Chrome is the only browser that feeds back CLS to Google and it supports aspect-ratio meaning that will solve your CLS issues in terms of Core Web Vitals. I don’t like prioritizing the metrics over the users, but the fact that the other Chromium and Firefox browsers have this and Safari will hopefully soon, and that this is a progressive enhancement means that I would say we’re at the point where we can leave the padding-bottom hack behind and write cleaner code.

Make Liberal Use Of min-height

For those elements that don’t need a responsive size but a fixed height instead, consider using min-height . This could be for a fixed height header , for example and we can have different headings for the different break-points using media queries as usual:

	
	header { min-height: 50px; } @media (min-width: 600px) { header { min-height: 200px; } }

	
	
...

Of course the same applies to min-width for horizontally placed elements, but it’s normally the height that causes the CLS issues.

A more advanced technique for injected content and advanced CSS selectors is to target when expected content has not been inserted yet. For example, if you had the following content:

	
	
...

And an extra div is inserted via JavaScript:

	
	
.../div>
...

Then you could use the following snippet to leave the space for additional content when the main-content div is rendered initially.

	
	.main-content:first-child { margin-top: 20px; }

This code will actually create a shift to the main-content element as the margin counts as part of that element so it will appear to shift when that is removed (even though it doesn’t actually move on screen). However, at least the content beneath it will not be shifted so should reduce CLS.

Alternatively, you can use the ::before pseudo-element to add the space to avoid the shift on the main-content element as well:

	
	.main-content:first-child::before { content: ''; min-height: 20px; display: block; }

But in all honesty, the better solution is to have the div in the HTML and make use of min-height on that.

Check Fallback Elements

I like to use progressive enhancement to provide a basic website, even without JavaScript where possible. Unfortunately, this caught me out recently on one site I maintain when the fallback non-JavaScript version was different than when the JavaScript kicked in.

The issue was due to the “Table of Contents” menu button in the header. Before the JavaScript kicks in this is a simple link, styled to look like the button that takes you to the Table of Contents page. Once JavaScript kicks in, it becomes a dynamic menu to allow you to navigate directly to whatever page you want to go to from that page.

Screenshots of two Table of Contents navigation components styled like a button. With JavaScript this opens a dynamic menu as shown in the second image.
A Table of Contents header component which is initially rendered as a simple link (top), and then enhanced with JavaScript to be a dynamic menu (bottom). ( Large preview [23] )

I used semantic elements and so used an anchor element ( ) for the fallback link but replaced that with a

smashmag@seowdllc.com

Smashing Magazine is a website and eBook publisher that offers editorial content and professional resources for web developers and web designers.

英雄联盟竞猜视频比分 江湖电竞(南宁)赛表赛事 安博电竞查询直播网站 英雄联盟竞猜直播比赛网址 熊猫电竞排名今日 泛亚电竞赛事手游(泛亚电竞注册官网v6.3 IOS版)