In particular, websites can qualify for a ranking boost based on several new performance metrics Google calls “core web vitals.”

Core web vitals are a set of core webpage functionalities that impact user experience. They now play a part in strategic SEO and can impact how websites rank in Google.

Google has defined three core web vitals:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

This article is part of our series about Google’s page experience update, and I’m updating it to reflect Google’s latest changes. Here I’ll discuss cumulative layout shift or CLS:

• What is CLS?
• How do you measure CLS?
• How does CLS impact SEO?
• How do I improve my CLS score?
• FAQ: How can I improve my website’s user experience and SEO with Core Web Vitals?

What Is Cumulative Layout Shift (CLS)?

CLS measures the formatting changes to a webpage after the initial rendering in a browser, usually by the dynamic insertion of content above what is already being shown.

It is generally annoying to be clicking on a link and have that link “move,” resulting in a click to an unexpected location. This kind of instability of content on a webpage creates a bad user experience.

Google discusses CLS here:

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Unexpected page layout shifts hurt the user experience. One example is when a button or link shifts on the webpage, causing a person to click something else. This can be really bad if it means they accidentally made a purchase, as you can see in this demo from Google:

Importantly, Google clarifies that not all layout shifts are considered bad:

A layout shift is only bad if the user isn’t expecting it. On the other hand, layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.

Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set so that they can be excluded from calculations.

How Is Cumulative Layout Shift (CLS) Measured?

CLS is measured by the total of all individual layout shift scores for every unexpected layout shift that occurs during a pageview’s worst “session window.”

A session window is any 5-second span of shifts that occur while a user visits a page. Google looks for the 5-second interval that has the most shift penalties, and that’s the score for that pageview.

To calculate a layout shift score, Google multiplies the impact fraction and the distance fraction. I’ll break these down.

Impact fraction is how much viewport area an unstable element takes up between two frames.

In the example below, you can see that the element takes up 50% of the original viewport, but then is moved down by 25%. Between both frames, the element takes up 50% plus 25% of the viewport, causing the impact fraction to be 75%.

Example of layout shift between two frames, Google Developers

Distance fraction is the distance that an unstable element has moved. The example below shows that the element has moved 25% of the viewport height.

Example of distance shift in the viewport, Google Developers

So to sum up: CLS is measured by the layout shift score, which is calculated this way:

     Impact fraction * distance fraction = layout shift score

Taking the examples above, the calculation would go like so: 0.75 * 0.25 = 0.1875. Google says a webpage should maintain a CLS of less than 0.1 across all pages or page views on your site. This example would be over that goal, so it would score poorly.

One illustration to give you a clearer idea of how CLS is scored: If everything inside of the viewport shifted out of the viewport in a single frame, that would have a layout score of 1.0. (See other examples on GitHub.)

The more elements you have on your page that shift in the viewport, the worse your score could be.

Google’s CLS score target

You can read more about the layout shift score here and how Google defines its thresholds here.

How Does Cumulative Layout Shift (CLS) Impact SEO?

As with the other core web vitals, CLS helps ensure that the page experience is smooth for your visitors — on both mobile and desktop.

A good layout shift score can help ensure users don’t get frustrated with your webpage, don’t accidentally click and get taken to another page, and don’t mistakenly make a purchase. A good user experience helps you achieve all the outcomes we like to see in SEO: rankings, traffic, conversions and revenue.

According to Screaming Frog research, URLs in Position 1 of the search results were 10% more likely to pass the core web vitals assessment than URLs in Position 9. Of course, this data reflected existing pages — which might not have been fine-tuned to comply with core web vitals yet — before these factors applied to the ranking algorithms.

Looking at CLS, less than half (46%) of mobile URLs and less than half (47%) of desktop URLs had “good” CLS scores. The average CLS score was 0.29 on mobile and 0.25 on desktop. In other words, there is room for CLS improvement on most sites.

Screaming Frog segmented pass rates by position, and found a decline in the percentage of “good” URLs as you move down the positions on the search results page. The following example is mobile results, but they also graphed the data for desktop.

“How Many Sites Pass the Core Web Vitals Assessment?” screamingfrog.co.uk

How Do I Improve My Cumulative Layout Shift (CLS) Score?

Google offers lab tools and field tools to help you measure, then optimize your CLS score. For CLS, lab tools may not be as useful as the real data captured in the wild for your webpages.

Tools provided include:

• Chrome User Experience Report (field)
• PageSpeed Insights (lab and field)
• Search Console (Core Web Vitals report) (field)
• Chrome DevTools (lab)
• Lighthouse (lab)
• WebPageTest (lab)
• WaterFaller.dev (lab)

Another way to measure CLS uses the web-vitals JavaScript library. You can learn more about that here.

Common causes of layout shifts include:

• Images without dimensions
• Ads, video and other embedded objects or iframes without dimensions
• Dynamically injected content
• Late-loading CSS where styles are applied after other items have been loaded
• Web fonts causing flashes of invisible or unstyled text
• Elements on the page that wait for other items to be loaded over the network before appearing
• Animating elements by “height” and “width” instead of CSS’s “transform: scale()”
• Animating elements by “top”, “right”, “bottom” or “left” instead of CSS’s “transform: translate()”

Basic principles that will improve CLS include:

1. Always use size attributes for images, videos and other embedded items or iframes. If an element is dynamically loaded, use CSS to style any container elements to the same size or aspect ratio before the content is loaded. Then, when the content is loaded into those container elements, the page will not shift.
2. Never insert content dynamically above existing content.
3. If using CSS to animate elements, prefer “transform” animations.

And check out this video about CLS from Google Chrome Developers on YouTube:

Want more in-depth info? Watch our on-demand webinar 3 Expert Tips to Improve Core Web Vitals including the extended Q&A at the end.

Read our entire page experience series for more information on this ranking update:

1. What’s the Page Experience Update?
2. How to Make a Mobile-Friendly Site
3. Intrusive Interstitials & Why They’re Bad for SEO
4. HTTPS for Users and Ranking
5. Core Web Vitals Overview
6. Core Web Vitals: LCP (Largest Contentful Paint)
7. Core Web Vitals: FID (First Input Delay)
8. Core Web Vitals: CLS (Cumulative Layout Shift)

FAQ: How can I improve my website’s user experience and SEO with Core Web Vitals?

User experience and SEO have become the twin pillars of successful online ventures. Core Web Vitals, introduced by Google, guide websites toward better performance and visibility. These metrics, comprising Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), quantify crucial aspects of user experience.

LCP gauges loading speed, FID measures interactivity, and CLS evaluates visual stability. Improving these metrics not only ensures a seamless browsing experience but also holds the potential to influence search rankings positively. Users appreciate websites that load swiftly, respond promptly, and maintain visual consistency, ultimately leading to lower bounce rates and prolonged engagement.

To improve Core Web Vitals, consider optimizing your images and videos, leveraging browser caching, and employing content delivery networks (CDNs) for faster loading times. Minimize server response times by employing efficient hosting and coding practices. Moreover, prioritize the rendering of above-the-fold content to prevent layout shifts, enhancing both user satisfaction and SEO performance.

Focus on optimizing server and network performance, using browser caching effectively, and utilizing modern image formats to balance content richness and loading speed. Employ lazy loading for images and scripts to load resources only when users require them, contributing to faster initial page loading and a better overall user experience.

Finally, adopting a mobile-first design approach and leveraging responsive design principles are key strategies for improving Core Web Vitals. With a substantial portion of online traffic originating from mobile devices, catering to mobile users effectively can substantially enhance both user experience and search rankings.

Core Web Vitals offer a strategic advantage to website owners and digital marketers aiming to excel in user experience and SEO. By understanding and optimizing these metrics, websites can provide faster, more interactive, and visually stable experiences that resonate with users and search engines alike. Elevating Core Web Vitals creates a win-win scenario, bolstering website performance and driving organic traffic.

Step-by-Step Procedure to Improve User Experience and SEO with Core Web Vitals:

1. Assess Current Metrics: Analyze your website’s existing Core Web Vitals metrics using tools like PageSpeed Insights and Google Search Console.
2. Prioritize Key Metrics: Identify the metric (LCP, FID, or CLS) that requires the most improvement based on your analysis.
3. Optimize Images and Videos: Compress images and use modern formats to reduce file sizes without compromising quality. Consider lazy loading for images and videos.
4. Leverage Browser Caching: Configure your server to set appropriate resource caching headers, reducing loading times for returning visitors.
5. Utilize CDNs: Implement a content delivery network (CDN) to distribute resources across multiple servers, enhancing loading speed.
6. Optimize Server Response Times: Opt for reliable hosting providers with fast server response times. Minimize server-side processing delays.
7. Responsive Design: Ensure your website is responsive and provides a seamless experience across various screen sizes and devices.
8. Mobile-First Approach: Prioritize mobile users by designing your website with a mobile-first mindset.
9. Efficient Coding: Optimize your code by minimizing unnecessary scripts and stylesheets. Use browser caching for code files.
10. Minimize Third-Party Scripts: Limit the use of third-party scripts that might impact page loading and interactivity.
11. Critical Rendering Path: Prioritize rendering of above-the-fold content to prevent layout shifts during page loading.
12. Reduce Server Requests: Minimize the number of server requests by combining CSS and JavaScript files when possible.
13. Content Delivery Networks: Utilize CDNs to distribute content across various servers, reducing latency and improving loading speed.
14. Eliminate Render-Blocking Resources: Identify and eliminate resources that prevent the initial rendering of the page.
15. Implement Lazy Loading: Use lazy loading to load images and resources only when users scroll to them, improving initial page loading.
16. Use Responsive Images: Employ responsive images that adapt to the user’s device and screen size, optimizing visual appeal and loading speed.
17. Continuous Monitoring: Regularly monitor and analyze your website’s Core Web Vitals metrics, making necessary adjustments.
18. Regular Updates: Keep your website and its components updated to benefit from performance enhancements.
19. Testing and Iteration: Test different strategies and continually iterate to find the optimal combination for improving Core Web Vitals.
20. Measure and Adjust: Monitor your optimizations’ impact on user experience and SEO rankings. Adjust your strategies based on results.

The post Core Web Vitals: Cumulative Layout Shift – What It Is and How to Improve It for SEO appeared first on Bruce Clay, Inc..

There are many reasons to care about the speed of your website. For SEO and marketing impact, here are three: 1) Page speed and performance are Google ranking factors; 2) Page performance can directly impact your ability to keep users on your site; and 3) Page speed can directly impact your revenue.

But is your site fast enough? In this article, I’ll overview why website speed is important, site speed targets, common issues that impact page speed, and why and when to fix them. Feel free to jump ahead:

• Why is website speed important
• Why do page speed issues happen
• How fast should your website be according to Google
• How fast should your website really be
• How to speed up your website
• FAQ: Why is the speed of my website crucial for user experience and SEO?

Why Is Website Speed Important?

Fast websites are better for the end user. A slow site can cause visitors to bounce from your site and your business to lose revenue. Not only that, but you want the search engines to be able to move quickly through your site.

Consider this:

• One study showed that delays in accessing content produced the same level of stress in people as watching a horror movie alone or taking a math test (my Bachelor’s is in math, so I can appreciate that).
• Pinterest reported that reducing wait time by 40% resulted in a 15% increase in SEO traffic and a 15% increase in conversion rate to sign up.

A fast site is especially crucial for mobile users, who tend to search on the go and with varying internet connection speeds. Google says that:

Our data shows that while more than half of overall web traffic comes from mobile, mobile conversion rates are lower than desktop. In short, speed equals revenue.

Besides its importance for user experience and conversions, site speed also significantly impacts your rankings and organic traffic. Page speed is already a lightweight ranking factor. But speed and performance will gain focus in Google’s upcoming page experience ranking update.

In addition, if enough visitors quickly bounce back to the search results after clicking on your page due to a slow load time, it may also hurt your rankings via RankBrain.

Why Do Page Speed Issues Happen?

Optimizing your page speed is tricky. A lot of things that can impact page speed are out of your control as a website publisher. This includes the website visitor’s internet service provider and package, their device’s performance, and so much more.

However, there is a lot that is in your control, too. And this is what Google cares about. Common page speed issues fall into these three categories: cache, bandwidth, and server processing and rendering.

Remember, speed and performance go beyond just load time. It’s multifaceted. As Google points out, “Historically, web performance has been measured with the load event. However, even though load is a well-defined moment in a page’s lifecycle, that moment doesn’t necessarily correspond with anything the user cares about.”

Google goes on to illustrate how performance is relative:

• A site might be fast for one user (on a fast network with a powerful device) but slow for another user (on a slow network with a low-end device).
• Two sites may finish loading in the exact same amount of time, yet one may seem to load faster (if it loads content progressively rather than waiting until the end to display anything).
• A site might appear to load quickly but then respond slowly (or not at all) to user interaction.

So when talking about performance, it’s important to be precise and to refer to performance in terms of objective criteria that can be quantitatively measured.

In other words, load time counts, but there are a lot of metrics to address in order to improve common speed and performance issues. And the list is only going to grow — Google is introducing Core Web Vitals into the algorithm mix in its page experience ranking update (scheduled to roll out between June and August 2021).

To learn more about speed and performance:

• Read our overview on page speed issues for SEO.
• Read Google’s user-centered performance metrics.

How Fast Your Webpage Should Be, According to Google

Google once said that mobile sites should “deliver and render the above-the-fold (ATF) content in under one second.” However, Google research from 2018 found that there were different benchmarks for page speed performance per industry. (Note that these benchmarks have likely decreased since then).

Other Google data shows that as page load time goes from one second to three seconds, the probability of the searcher bouncing increases by 32%. And that number jumps to 90% when page load time goes from one second to five seconds.

Remember that each performance metric has its own thresholds. So the goal is to understand speed and performance metrics and individually optimize for them.

How Fast Should Your Webpage Really Be?

You want to make your website as fast as possible for your users within what is reasonable to do.

Keep in mind that these improvements can be time-consuming and expensive. When analyzing things like your PageSpeed Insights score, for example, have the professionals review it and then pick your battles. It may be really hard to improve it past a certain threshold and not worth the resources to do so.

So how fast is fast enough? As I’ve said many times before, SEO should beat the competition. So see what the norm is for your industry. Analyze the pages that are ranking on Page 1 of Google by running them through a page speed tool.

Remember that Google once said when referring to its page speed ranking signal that it uses “a variety of sources to determine the speed of a site relative to other sites.”

That means that if all of your top-ranked competitors have similar load times (even if they are slow), and your webpage load time falls into that range, it should be considered normal.

However, if you are an outlier (meaning your site is way slower), it could impact rankings negatively.

How to Speed Up Your Website

There are plenty of ways to analyze your webpages and improve their performance. Some basic best practices for webpage speed include:

• Compress the information between your web server and search engine browser
• Minify JavaScript
• Clean up and externalize CSS code
• Choose the best file formats for your images
• And many more

The trick is to identify the issues dragging down your performance metrics and then prioritize the work. You want to tackle the biggest culprits that will bring the greatest performance improvement first.

And if you haven’t started yet, it’s time. Here are some resources to dig deeper:

• PageSpeed Insights tool for measuring any webpage’s performance
• Documentation about PageSpeed Insights
• Google’s recommendations for Fast Load Times
• Complete guide to Google’s page experience update (e-book)

If you’re looking for answers to your technical SEO issues, we can help. Contact us for a free quote, and let’s talk.

FAQ: Why is the speed of my website crucial for user experience and SEO?

The load time of your website immensely affects user experience and search engine optimization (SEO). Furthermore, its speed can have an immediate effect on both aspects. A slow-loading site frustrates visitors and often leads to high bounce rates. In fact, studies have shown that even a mere second’s delay can result in a noticeable drop in conversions.

Search engines such as Google factor website speed into their ranking algorithms when assigning rank rankings to websites. Faster websites are generally favored in search results because they offer a better user experience. This means that sluggish loading times disappoint visitors and push your website lower in search rankings. In the competitive digital landscape, where every click counts, neglecting website speed can harm your online visibility.

Optimizing your website’s speed involves various strategies, such as efficient coding, image compression, and minimizing HTTP requests. Prioritize using browser caching and content delivery networks (CDNs) to distribute content across multiple servers, reducing latency. Streamlining your website’s code and scripts can significantly improve loading times, enhancing user experience and SEO. Regularly monitoring your site’s speed using tools like Google PageSpeed Insights or GTmetrix can provide valuable insights and help you fine-tune performance.

Every second matters in the race to capture user attention and secure a prominent spot in search results. Beyond technical aspects, website speed is intertwined with psychological factors. Users perceive fast-loading sites as more trustworthy and professional, which bolsters your brand’s credibility. Additionally, the advent of mobile browsing amplifies the importance of speed, as mobile users often have limited bandwidth and less patience for sluggish websites.

The speed of your website serves as a linchpin for exceptional user experience and SEO success. Swift-loading sites attract and retain visitors, driving conversions and reducing bounce rates. Moreover, search engines reward fast websites with higher rankings, increasing organic traffic.

Step-by-Step Procedure: How to Optimize Your Website’s Speed for User Experience and SEO

1. Evaluate Current Speed: Use online tools like Google PageSpeed Insights and GTmetrix to assess your website’s current speed performance.
2. Optimize Images: Compress images without compromising quality using tools like Adobe Photoshop or online image compressors.
3. Minimize HTTP Requests: Reduce the number of elements on each page, including scripts, stylesheets, and images, to minimize HTTP requests.
4. Enable Browser Caching: Leverage browser caching to store static resources, allowing returning visitors to experience faster load times.
5. Utilize Content Delivery Networks (CDNs): Implement a CDN to distribute your website’s content across multiple servers geographically, reducing server load and latency.
6. Prioritize Above-the-Fold Content: Ensure that content is visible without scrolling loads quickly, improving perceived load time.
7. Minify CSS and JavaScript: Remove unnecessary characters and spaces from code to reduce file sizes.
8. Use Efficient Coding Practices: Employ clean and efficient coding practices to streamline your website’s structure.
9. Leverage Gzip Compression: Enable Gzip compression on your server to reduce file sizes during data transfer.
10. Opt for Asynchronous Loading: Load non-essential resources asynchronously to prevent blocking of critical content.
11. Choose the Right Hosting Plan: Select a hosting plan that aligns with your website’s needs, considering factors like server resources and performance.
12. Reduce Redirects: Minimize URL redirects as they increase page load times.
13. Implement Lazy Loading: Employ lazy loading for images and videos, deferring the loading of off-screen content.
14. Optimize Fonts: Use web-safe fonts and minimize the number of font styles to improve loading speed.
15. Regular Maintenance: Continuously monitor your website’s speed and performance, making necessary updates and optimizations.
16. Update Plugins and Themes: Ensure all plugins and themes are current, as outdated components can slow down your website.
17. Limit Third-Party Scripts: Minimize the use of third-party scripts and services, as they can introduce delays.
18. Use a Lightweight Theme: Choose a lightweight and well-coded theme for your website to enhance speed.
19. Implement AMP (Accelerated Mobile Pages): Consider using AMP to create stripped-down versions of your pages for faster mobile loading.
20. Test Across Devices: Verify your website’s speed and functionality across various devices and browsers to ensure a consistent user experience.

By following these steps, you can comprehensively optimize your website’s speed, thereby enhancing user experience and boosting your SEO efforts.

The post How Fast Should My Webpage Be and Why Should I Care? appeared first on Bruce Clay, Inc..