![]() Shifts caused by user interaction are not counted. We want the page to be 0.1 or under to pass this Core Web Vital. While LCP and FID are measured in milliseconds, CLS is a unitless number output by a complex calculation. In real life, a user will scroll down the page and may get more content dropping in causing more shifts.ĬLS is also a bit of an artificial number that is calculated based on how much of the page is moving about and how often. 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. 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). That’s not to say solving issues with these two metrics are easy, but they are reasonably well-understood problems. Optimizing that is usually a matter of cleaning up (or reducing!) your JavaScript and is usually site-specific. How to optimize your LCP should be a relatively well-understood problem for most web pages.įirst Input Delay (FID) measures any delays in interactions and seems not to be a problem for most sites. 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. Looking briefly at the other two Core Web Vitals, Largest Contentful Paint (LCP) does exactly as its name suggests and is more of a twist on previous loading metrics that measures how quickly the page loads. It’s a very different beast to the other two Core Web Vitals. So, it often requires new techniques and ways of thinking to attempt to optimize it. Why CLS Is DifferentĬLS 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. However, I will give a little background needed to understand some of the techniques. Nor will I talk too much about the mechanics of how CLS is calculated: Google has some good documentation on that, and Jess Peck’s The Almost-Complete Guide to Cumulative Layout Shift is an awesome deep dive into that too. I’m not going to talk too much about measuring CLS as I’ve covered that already in a previous article. In this article, I’m going to discuss some front-end patterns to reduce CLS. 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! It calculates a score based on how much of the page is unexpectedly moving about, and how often. ![]() 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.Ĭumulative Layout Shift (CLS) 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. Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |