[et_pb_section fb_built=”1″ _builder_version=”4.8.1″ _module_preset=”default” custom_padding=”||7px|||”][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.8.1″ _module_preset=”default” min_height=”711px” custom_margin=”|auto|0px|auto||” custom_padding=”||0px|||”][et_pb_column type=”3_5″ _builder_version=”4.8.1″ _module_preset=”default”][et_pb_text module_id=”section1″ _builder_version=”4.8.2″ _module_preset=”default” custom_padding=”9px|||||”]
Google’s Core Web Vitals: Executive summary
[/et_pb_text][et_pb_text admin_label=”#section1″ _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px” custom_padding=”5px|12px|9px|12px|false|false” border_radii=”on|1px|1px|1px|1px” border_width_all=”1px” box_shadow_style=”preset2″]
[dropcap]G[/dropcap]oogle earlier pre-announced a May 2021 shift to using what it calls “Core Web Vitals” (CWV) metrics as part of its ranking algorithm. The pandemic has pushed this plan out to an unknown future date–Google has said it will provide six months further notice before the change is made. This report offers an initial explanation of the three metrics involved, how they relate to other Google page experience metrics, and how to strategize for what will likely be a noticeable effect on rankings when CWV enters the ranking algorithm.
[/et_pb_text][et_pb_text admin_label=”#section2″ module_id=”section2″ _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px” custom_padding=”||1px|||”]
[dropcap]T[/dropcap]he fact that Google is changing its ranking algorithm is not, in itself, cause for alarm. Google changes its process—what gets measured, how it’s weighted, and so on—all the time. Generally there are several hundred (mostly trivial) changes in a year.
CWV promises to be one of Google’s bigger deal changes. How much bigger is worth contemplating. We’ll get to that.
One indication that this one matters to Google (besides the lengthy advance notice) is that CWV is an addition to a group of metrics that Google puts into the category of Page Experience. How does a user feel about the experience of using a particular page?
As you can imagine, Google wants to send you to results that you are happy you were sent to. So, if you asked a question, they’d like to send you to a page that answers your question (or, better yet, they’d like to answer your question right there on the search results page). Beyond the content of the page, though, lots of things figure into how you experience the page you’ve just been sent to.
If the page takes forever to load in your browser, odds are you won’t even stick around to see the page. But speed comes in more than one flavor, and CWV tries to get at a few elements that are important in how you perceive the speed of a page.
[/et_pb_text][et_pb_text module_id=”section3″ _builder_version=”4.8.2″ _module_preset=”default”]
The Core Web Vitals: What Are They?
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.8.1″ _module_preset=”default”][et_pb_toggle title=”Toc” _builder_version=”4.8.2″ _module_preset=”default” inline_fonts=”Encode Sans Expanded”]
Executive Summary
Algorithm Changes
What Are the Core Web Vitals?
How to Get CWV Scores
Do CWV Scores Matter?
CWV Strategies
[/et_pb_toggle][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.8.2″ _module_preset=”default” custom_padding=”0px|||||”][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_column type=”3_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
[dropcap]C[/dropcap]ore Web Vitals (CWV) is a set of three measurements Google has said it will add to the group of measurements it uses when deciding which results you see first when you perform a search on Google. The decision to add these metrics was announced months in advance (something Google only very rarely does), was originally slated for May 2021, but has been pandemic postponed. Google has said it will provide six months of warning before pulling the switch and, as I write this, that hasn’t been given yet. So, perhaps late fall 2021.
Google says there are three “core” essentials.
The first measurement is how long it takes for the largest piece visible on the page in your browser (what’s “below” your window doesn’t matter until you scroll down to it) to appear. This is the “Largest Contentful Paint” (LCP) and it’s really just a proxy measurement. If you can get the biggest piece displayed in a hurry, probably the overall sense the user gets is that the page loaded in a hurry.
How you can tell a page is performing in LCP measurements is something we’ll return to later—it takes some tooling.
Measurement two is how long the user has to stare at the browser window before it will react to their input. How long before they can click on a button and something actually happens. This is First Input Delay (FID).
Making things slightly more complicated, there are testing situations where Google uses a metric called Total Blocking Time (TBT) as a proxy for FID. For the moment, let’s not split hairs. What Google is trying to get at is how long before the page is sufficiently loaded that you can actually use it.
The third measurement is largely targeting the mobile experience and focuses on the weird jittery effect you get when a page has started to paint, but some big piece drops into place and the page is repainted in a way that makes everything shift position all at once. You’ve started to read the page, but now everything shifts up a paragraph. It’s kind of hard to explain, but everyone with a smart phone knows what this is. Google measures it with Cumulative Layout Shift (CLS). Not just “does it jump,” but how much overall does it jump before it settles down and stays put.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” custom_margin=”167px|||0px|false|false” custom_padding=”14px|20px|14px|20px|false|false” custom_css_main_element=”padding: 10|| ” border_width_all=”3px” border_color_all=”#7CDA24″ border_style_all=”groove” box_shadow_style=”preset2″]
THE “OTHER” WEB ESSENTIALS
As mentioned, there are three “core” essentials. But there are four other metrics that Google considers “essential”:
- Being “mobile friendly”
- Being safe to browse
- Using HTTPS
- Avoiding Intrusive Interstitial ads and notices.
You’ll notice that this is more a list of do’s and don’ts. You’re either using HTTPS or you’re not, for instance.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.8.2″ _module_preset=”default” locked=”off”][et_pb_column type=”3_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text module_id=”section4″ _builder_version=”4.8.2″ _module_preset=”default”]
How to “See” the CWV Measurements
[/et_pb_text][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
[dropcap]G[/dropcap]oogle provides several tools that let you see specific scores for CWV, but probably the quickest way to get a general sense of how a given page is performing is to use the Pagespeed Insights tool. You paste in the URL of the page you’re interested in, it chews on things for a moment or two, and then two color wheels pop up, most likely sporting the red or orange rings that indicate a less-than-fabulous score.
You’re generally going to want more detail than this score gives you, though. You’ll want to know what element is the one Google is counting as the largest when it times the Largest Contentful Paint, to give one example.
Getting the info is as simple as going to the page you’re interested in using the Chrome browser, then toggling yourself into the developer tools pane (use the keystroke combination Ctrl+shift+i, which I think maybe stands for “inspection”).
[/et_pb_text][et_pb_image src=”https://peakzebra.com/wp-content/uploads/2021/02/inspection-console.png” title_text=”inspection-console” _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_image][et_pb_text _builder_version=”4.8.2″ _module_preset=”default”]
Here’s the developer tools console in action, after recording the load of a page on PeakZebra. Following the timeline in the middle of the display is a great reminder that a lot of things are going on under the hood of a modern browser.
[/et_pb_text][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
[dropcap]I[/dropcap]n the “Timings” bar in the top pane of the image above, the LCP flag marks the spot in the timeline when the Largest Contentful Paint was rendered in the viewport (in this case, at 2747.9 ms).
Total Blocking Time (which will become important to us because it’s a proxy for First Input Delay) is recorded (as an estimate, though it’s given in hundredths of a millisecond, which I’ll concede is puzzling) just above the lower (console) pane of the tool display. In this case, it’s 654.52ms. But as for what it actually is? Google’s process looks at the timeline for tasks that took longer than 50ms. For each, the number of milliseconds that the task ran after the 50ms mark is added together. The “long tasks” (as they are called) are highlighted in the timeline by red hashmarks and a red triangle in the upper right of the offending taskbar. Google wants you under 300 milliseconds, so this page kind of sucks.
Cumulative Layout Shift is marked in the timeline with red bars where Chrome noticed things shifting. If you click on the red bar, the part of the page that is shifting will be highlighted for you. The damage that is done to your score is a special Google concoction that looks at the number of frames in which elements are shifting and the distance in pixels that they shift.
This is a place where things can go screwy in a hurry. And elements may be shifting in ways that you are completely unaware of. On the page I’ve been looking at here, for example, I noticed that the title of the page is rendered first in the font it’s supposed to be in, then in a default font that the theme I’m using (this is in WordPress) overwrites, then rerenders as the font it’s supposed to be. The change in font means the title is longer in the default, so that it runs over to the next line, which shifts that segment of the page, though just for the shortest blink of an eye:
[/et_pb_text][et_pb_image src=”https://peakzebra.com/wp-content/uploads/2021/02/text-paint-example-1.png” title_text=”text-paint-example” _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_image][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
Everything returns to normal a millisecond later and, at least on a reasonably peppy system, this repaint is completely undetectable. The metric that matters to Google here is really more how it performs on a mobile device, but the change is undetectable there as well.
At present, the CLS metric is less weighted in Google’s algorithms and the fact that they’re still sorting out how to detect what actually impacts the experience is presumably the reason why. They’ll get better at measuring this as the year progresses and it seems pretty likely that at some point the weighting will shift to make CLS equally important.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_image src=”https://peakzebra.com/wp-content/uploads/2021/02/low-pagespeed-performance.png” title_text=”low-pagespeed-performance” _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_image][et_pb_text _builder_version=”4.8.2″ _module_preset=”default”]
Here’s a meh score for a page on the WordPress version of PeakZebra. In truth, this score isn’t actually that bad and you’ll see considerably worse scores on many perfectly normal WordPress pages. This shows the desktop score; the mobile score is (and usually is) considerably worse.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_column type=”3_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text module_id=”section5″ _builder_version=”4.8.2″ _module_preset=”default”]
Do CWV Scores Matter?
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_column type=”3_5″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
[dropcap]I[/dropcap]f you’re running on a typical WordPress, Drupal, or similarly architected web publishing framework, your CWV scores at present are probably not all that great. You are right to wonder whether fixing the ills of your website are worth the trouble. Will your rankings really suffer all that much if you don’t bother? What if everybody just decided to ignore this stuff?
The only true answer to this at the current moment is: nobody outside of Google has any idea whether this matters much or at all. We’ll find out when and if there are huge reorderings on search engine results pages (SERPs).
That said, if it figures in the rankings in any modestly significant way, you can bet that organizations that actively tune for SEO will tune for CWV. In any “all things equal” situation, their page is going to do better than the organization that didn’t bother. I’m operating mostly on an experienced hunch here, but I think there will be some serious shifts as a result, particularly in the world of B2B and technical vendor pages.
[/et_pb_text][et_pb_text module_id=”section6″ _builder_version=”4.8.2″ _module_preset=”default”]
CWV Strategies
[/et_pb_text][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
There are four ways a company might opt to deal with CWV (aside from just ignoring it), listed here in decreasing order of hassle:
- Relaunch on a more performant platform
- Make substantial adjustments to the existing platform (really paying attention to tuning a WordPress site, for example)
- Use the existing website as a headless CMS for a statically generated front end to the site
- Create groups of new pages on the existing domain that run in tandem to the existing site, these pages being ones that matter to the organization’s content and SEO strategy
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.8.2″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.8.2″ _module_preset=”default”][et_pb_text module_id=”section6″ _builder_version=”4.8.2″ _module_preset=”default”]
How to Choose
[/et_pb_text][et_pb_text _builder_version=”4.8.2″ _module_preset=”default” text_font_size=”19px”]
Is it worth the trouble to, say, relaunch on a new platform? Hard to say at this point, and maybe not, but if you were going to relaunch something anyway, now is the time to make sure that whatever you relaunch with has screamingly good performance when it comes to CWV.
Otherwise, your choice will come down to the specifics of your site and what it does. We can dig into the virtues and mechanics of the various options in future articles, but it’s certainly worth taking a few moments now to run a representative sample of your website’s pages against these CWV metrics.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.8.2″ _module_preset=”default”][/et_pb_section]