SEO Agency Chicago

Category: Core Web Vitals

Technical SEO can be tricky. Combining site content, server performance, and HTML code structure is necessary to perform well on Core Web Vitals.

Google CWV

Google provides tools to help you assess the performance of Core Web Vitals.

Core web vitals cover things like

Largest Contentful Paint (LCP) – how long it takes the biggest elements like images, videos, or large text blocks to show

Next Paint – which is the time it takes the site to react to the user’s first actions.

Cumulative Layout Shift (CLS) – how much post-rendering moving happens when the user moves around on the page.

Read more about CWV and see how improving these metrics can help you rank better in search.

  • Google and Page Speed

    Google has had Page Speed at the top of everyone’s list. As a result, companies and agencies alike have bent over backward to try to improve the page speed on their websites. How much does page speed really matter?

    Page Speed Measurement Compared to Experience

    In Google Search Console(GSC), there is a section called “Experience.” It is a simplification of the user experience boiled down into technical performance metrics. At a high level, it is as basic as “Good”, “Needs Improvement,” or “Poor.” Then, you click into the individual core web vital metrics to find the issues for specific URLs. Here are some of the metrics you’ll see.

    What is interesting is that the experience you have navigating the website might not reflect what the Core Web Vitals pick up. You may feel like the page loads appropriately, while the FCP for Google Search Console tells you the page is slow. We see pages where Google is showing a 3-second load, but we can’t even count 1-mississippi before the page loads. What’s up with that, and how much should you worry about it?

    First, always look to improve consumer experience. Use GSC to highlight possible issues. If these align with your experience, then address them right away. If not, then look beyond GSC to identify areas for improvement. Look at things like bounce rate, unexplained high exit rates on pages, or changes in user flow that don’t make sense. Your priority should be user experience, then Google Search Console speed warnings.

    Second, put GSC in perspective. Google has (I suppose) done a good job at measuring technical aspects of a website. But, these do not always translate into issues for users. The page speed issue is chief among these. Google is measuring what it’s code is determining as a meaningful page load, but the user experience can start properly before all the code is loaded. So, if you’re going for improved User Experience, then prioritize that over technical metrics from Google.

    Technical Speed Issues

    If you’ve addressed the issues directly impacting user experience, then turn back to GSC and start picking away at the technical issues highlighted in the Experience section. The trick is to prioritize the issues highlighted by Google and your available resources.

    Look for metrics that are way out of line with what GSC views as good, even if your own experience shows it to be okay. Can these be addressed by re-ordering code (blocking js), adding some tools, or reducing the overall page load?

    You may be a few short steps from big improvements in Google’s eyes. See if you can address them.

    But here is the thing: If you are running into issues you really can’t address, chances are, you are not alone.

    Google seems to have the Eutopian view of the web that is out of step with the vast majority of the sites that make up the web. What this means is that we are all graded on some type of curve, not an absolute scale. So, if you address the real User Experience issues first, then fight through what you can of the GSC warnings, there’s a good chance you are already, technically, ahead of most websites.

    While Google’s objective is laudable, its methods are too steeped in a reliance on technology to measure human experience. I’ve been on enough calls with people to accept that they are sincere in their belief that their tools and AI are superior methods to measure user experience. But, the reality we see would suggest that the tools are not quite as good as they believe them to be.

  • What are the most common Google Search Console issues with Mobile SEO?

    What are the most common Google Search Console issues with Mobile SEO?

    We’ve seen this across sites… error after error resulting in websites being flagged as “not mobile-friendly”. This becomes frustrating for some website owners because Google is often not specific about where the problem is on the page. But, before we get into the actual issues, you have to ask, is it worth my time to fix?

    Why you need to fix mobile site issues

    Should you care about the mobile site issues? ABSOLUTELY! There are multiple reasons to be concerned. But the biggest is it can kill your organic site traffic.

    Google has switch most sites to Mobile First Indexing. So, however your mobile site is assest will impact the organic results of your desktop version as well. Since getting mobile right is harder than desktop, a bad mobile experience will sink your SEO ship.

    And, it will get even worse. Google search is moving to Core Web Vital roll out. When this happens, your mobile experience will have even more impact on your overall SERPS, and it will be harder to acheive good marks on your mobile score.

    For now, the good news is your site isn’t the only one that sucks. This is part of the reason most sites haven’t tanked yet. But, as site owners start addressing the mobile issues, they will have the advantage, and take the top SERPS.

    So, don’t wait to address the mobile issues. If your one of the first, you’ll gain an advantage.

    What are the most common mobile site issues?

    There are a lot of elements Google will use to judge your website. And the prioritization of the elements will likely change over time… without any warning from Google. For now, here are the issues we see most.

    Text On Page Too Small

    Virtually every site not developed in the past year gets this warning, and most recent sites do to. This is a tricky errror to pinpoint.

    The general guidline is that text on the page should be 16px or larger. If your CSS font size is always set as px, then the fix is pretty easy. Just find the font-size in the css and change anything less than 16px to 16px. Or is it that easy?

    Two issues arise with this.

    First, CSS font-size can, and often (should be) set with a relative measure (em for example). This was a cornerstone in responsive design. As the screen size shrinks, so does the font size. On mobile, this means it can be the equivalent of less than 16px. But, you won’t see that in the CSS. You have to use the inspect tool on Chrome and look at the rendered size.

    Second, even if you can go through your CSS and change the font-size to 16px or larger, are you sure it will play well with the design? There is a reason designers made fonts the size they did. If you just push up the size of some copy, then you impact the layout and proportions of the page. Does this still work?

    Clickable elements too close together

    We see clickable elements too close together most often on menus, but it can happen anywhere. Google wants there to be 48px of clickable area. The motivation is to improve accessibility for users.

    The most common fix for this is to add padding to the elements to expand them to the minimum size.

    The fix for this issue also has implications for design and rendering. The sites were originally created to look a certain way, and if we’re honest, designers rarely thought about clickable area. Simply adding padding to clickable areas may be an easy technical fix and put you in good position for Google, it may create a problm on your site.

    When looking at the scope of fixes need to meet Google’s Core Web Vitals, and the mobile test, you may find simple fixes are so simple. But, start with a staging area and make an initial round of changes. If the site rendering is acceptable, you can move forward. If not, you may need to reengage a design/front end developer to address the site design issues.

  • What Are Core Web Vitals & Why Are They Important?

    What Are Core Web Vitals & Why Are They Important?

    Google is always updating its search algorithms, but it’s rare for the company to publish information about what data they use to determine search engine page rankings (SERPs). This year, the industry giant publicly announced a new ranking factor: Core Web Vitals. 

    The decision to make this information public begs two important questions: what are Core Web Vitals, and why are they so important? Web developers can read on to find out what they need to know.

    What Are Core Web Vitals?

    Google’s Web Vitals initiative is intended to simplify webmasters’ interactions with Page Experience metrics. Instead of playing guessing games about how their pages are performing according to these metrics, site owners can now use Google tools to get a better understanding of the most important metrics. Those are the ones the company refers to as Core Web Vitals.

    Each Core Web Vital can be viewed as a stand-in for a measurable aspect of real-world user experience. It’s joining other Page Experience signals such as HTTPS, mobile-friendliness, and intrusive interstitials to give web designers one more benchmark for success.

    Evolving Metrics

    These new Page Experience metrics are already incorporated into the suite of Google Analytics tools, but it’s just the beginning. Google only recently developed the Web Vitals interface, and the company plans to make changes over time. In 2020, Core Web Vitals focus only on three key factors affecting user experience. In 2021, the company plans to roll out more changes.

    What Are the Most Important Core Web Vitals for 2021?

    There are three essential Core Web Vitals metrics for 2020. They measure overall load performance, interactivity, and visual stability. Web designers can use Google tools to evaluate their progress toward recommended targets for each of these metrics. For now, aiming for the 75th percentile is a good goal for most site owners.

    Largest Contentful Paint

    The Largest Contentful Paint (LCP) Core Web Vital measures loading performance. This metric should come as no surprise to experienced web designers since it’s common knowledge in the industry that load times affect user experience. 

    In 2020, pages with 2.5 second or faster loading times are considered to be performing well in this arena. Pages that take 2.5 to 4 seconds to load need improvement. If the page takes longer than 4 seconds to load, it will perform poorly according to this metric.

    First Input Delay

    First Input Delay (FID) offers a measurement of a page’s interactivity. When page visitors click on buttons or JavaScript events, the browser starts to process the interaction and produce appropriate results. FID can also be viewed as a measure of how fast the browser can do that.

    Aim for an FID of 100 ms or less. If a page has an FID of 100 to 300 ms, it needs improvement. At 300 ms or less, it needs serious help. Factors like the quality of JavaScript and third-party code can influence FID.

    Cumulative Layout Shift

    The Cumulative Layout Shift (CLS) Core Web Vital measures visual stability. It answers the question, how fast are the page’s stable speeds? If a page loads quickly, but users can’t click on buttons or follow links without causing unexpected shifts in the page layout, that’s a problem with CLS.

    The top factor influencing CLS is image size definition. Animations and other on-page content can also affect the page’s visual stability. A well-designed page with all its image sizes and animations defined in HTML should have a CLS of 0.1 or less. Pages with a CLS between 0.1 and 0.25 need improvement. A CLS higher than 0.25 will cause poor SERP performance.

    Why Are Core Web Vitals Important?

    Core Web Vitals will influence all search results on Google. They’re also going to play a large role in determining what pages appear in Google Top Stories, the news results that users sometimes see at the top of their results pages.

    Until now, AMP was the most important requirement for Google Top Stories. That’s going away. Pages will still need to meet the search engine’s requirements for inclusion into Google News. However, instead of AMP, the pages will now need to meet the minimum thresholds for Web Vitals described above.

    How Important Are Core Web Vitals for SERPs?

    When it comes to SERPs, Google’s algorithms feature hundreds of ranking signals. Poor performance in Core Web Vitals can make a difference, especially since they have an outsized influence compared to other ranking signals. 

    That said, Core Web Vital performance isn’t the only factor that will determine rankings. The difference will be most noticeable for websites that already exist in competitive environments.

    User Experience

    Since Core Web Vitals were designed to quantify Page Experience, they also impact other factors such as click-through rates. Google has performed studies that show how influential these aspects of Page Experience are on user behavior. According to the search engine itself, meeting the thresholds for Core Web Vitals performance makes users 24% less likely to abandon pages.

    How to Measure Core Web Vitals

    One of the stated purposes of the shift to Core Web Vitals is to make it easier for site owners and web designers to measure performance. As a result, Google has already integrated analytic tools to measure Core Web Vital performance into just about every analytics tool it has. Many third-party companies have also followed suit.

    Field Tools

    Site owners can use field tools to measure performance. The Chrome User Experience Report is a good place to start. It collects real user data for each signal, removes sensitive user data, and collates it so that site owners can assess real-time performance. Google’s PageSpeed Insights and Search Console tools can also measure all three current Core Web Vitals.

    JavaScript Measurements

    It’s easy to measure Core Web Vitals in JavaScript. Use the web-vitals JavaScript library to measure performance using standard web APIs. This approach lets web developers measure performance and thresholds accurately by simply calling a single function.

    Site owners can also view performance reports without writing code by using the Web Vitals Chrome Extension. The Chrome Extension leverages the web-vitals library to measure key metrics and display them right in the browser. Developers can even measure competitors’ metrics for all three Core Web Vitals.

    Lab Metrics

    Web developers also have access to two tools that can help site owners measure Core Web Vital performance in lab environments. This allows site owners to test their pages before releasing them and catch potential performance regressions in advance. Both Chrome DevTools and Lighthouse can measure LCP and CLS. 

    There is currently no way to measure FID in the lab since FID requires user input. However, it is possible to measure Total Blocking Time (TBT). In the pre-release development stages, TBT forms an excellent proxy for FID. Optimizing TBT should also improve FID.

    How to Improve Performance

    The tools described above help site owners get an idea of what pages are performing well and which have room for improvement. Once they’ve identified problem areas, site owners or web developers can get started optimizing their pages.

    Optimizing LCP

    There are four primary issues that cause poor LCP performance. They are:

    1. Slow server responses
    2. Render-blocking CSS and JavaScript
    3. Slow resource loading
    4. Problems with client-side rendering

    Resolving these problems should bring most pages back up above the threshold for LCP performance. Developers can optimize servers, route users to different CDNs, cache assets, change how they serve HTML pages, and establish earlier third-party connections.

    Optimizing FID

    When it comes to poor FID performance, the primary culprit is heavy JavaScript execution. Web developers should focus on optimizing JavaScript to ensure that browsers can respond to user input with sufficient speed. Since JavaScript is executed on the main thread, heavy code will prevent browsers from handling user interactions.

    There are four ways to improve JavaScript for FID optimization. Developers can break up longer tasks, use web workers, reduce execution times, and optimize pages for interaction-readiness. When lab-testing the results, bear in mind that TBT can be used as an effective proxy for FID.

    Optimizing CLS

    Most poor CLS performance is caused by images or embeds that lack defined dimensions. Start by fixing this problem before moving on to addressing other problems. These could include dynamically injected content, Web Fonts that cause FOIT/FOUT, or actions that require network responses prior to updating DOM.

    Resolving these problems will ensure that layout shifts will only occur when they are expected. Improving CLS performance to bring the page above the threshold will improve its Core Web Vital scores, especially if these changes are made in conjunction with optimizing FID and LCP.

    Final Thoughts on Core Web Vitals

    Site owners and web developers who have found themselves frustrated by Google’s lack of transparency in the past should be happy to learn about the switch to Core Web Vitals. Expect these metrics to play an outsized role in Google Top Stories performance and a more moderate role in SERP performance, more generally. 

    Developers should also expect these metrics to evolve over time as Google continues to implement additional changes. The good news is, the company has indicated that it will continue to keep developers and site owners in the loop as this happens.