Advanced Core Web Vitals: A Technical SEO Guide via @sejournal,

Editor’s note: As 2021 winds down, we’re celebrating with a 12 Days of Christmas Countdown of the most popular, helpful expert articles on Search Engine Journal this year.

This collection was curated by our editorial team based on each article’s performance, utility, quality, and the value created for you, our readers.

Each day until December 24th, we’ll repost one of the best columns of the year, starting at No. 12 and counting down to No. 1. Our countdown starts today with our No. 6 column, which was originally published on April 26, 2021.

This in-depth technical SEO guide on advanced Core Web Vitals by Jamie Indigo was well-received by readers. It’s packed full of information and actionable advice on how to diagnose, measure, and improve site performance in terms of human experience.

Really great work on this, Jamie! We appreciate all the great content you continue to contribute to SEJ.

Enjoy!

Real humans want good web experiences. What does that look like in practice?

Continue Reading Below

Well, one recent study cited by Google in a blog post about Core Web Vitals found that mobile web users only kept their attention on the screen for 4-8 seconds at a time.

Read that again.

You have less than 8 seconds to deliver interactive content and get a user to complete a task.

Enter Core Web Vitals (CWV). These three metrics are designed to measure site performance in human experience. The open-source Chromium project announced the metrics in early May 2020 and they were swiftly adopted across Google products.

How do we qualify performance in user-centric measurements?

Is it loading?
Can I interact?
Is it visually stable?

Fundamentally, Core Web Vitals measure how long it takes to complete the script functions needed to paint the above-the-fold content. The arena for these Herculean tasks is a 360 x 640 viewport. It fits right in your pocket!

Continue Reading Below

This war-drum for unaddressed tech debt is a blessing to a lot of product owners and tech SEO professionals who have been backlogged in favor of new features and shiny baubles.

Is the Page Experience update going to be Mobileggedon 4.0?

Probably not.

But when your page passes CWV assessments, users are 24% less likely to abandon page loads. These efforts benefit every source and medium, and most importantly – real humans.

The Page Experience Update

For all the buzz, CWV will be elements in a ranking signal. Expected to roll out gradually mid-June through August 2021, the Page Experience Ranking will be comprised of:

Core Web Vitals.
Mobile-Friendly.
Safe Browsing.
HTTPS.
No Intrusive Interstitials.

Updated documentation clarifies that the rollout will be gradual and that “sites generally should not expect drastic changes.”

Important things to know about the update:

Page Experience is evaluated per URL.
Page experience is based on a mobile browser.
AMP is no longer required for Top Stories carousels.
Passing CWV is not a requirement to appear in Top Stories carousels.

A New Page Experience Report In Search Console

Search Console now includes a Page Experience report. The fresh resource includes backdated data for the last 90 days.

In order for a URL to be “Good,” it must meet the following criteria:

The URL has Good status in the Core Web Vitals report.
The URL has no mobile usability issues according to the Mobile Usability report.
The site has no security issues.
The URL is served over HTTPS.
The site has no Ad Experience issues, or the site was not evaluated for Ad Experience.

The new report offers high-level widgets linking to reports for each of the five “Good” criteria.

The new report offers high-level widgets linking to reports for each of the 5

Workflow For Diagnosing & Actioning CWV Improvements

First, an important caveat regarding Field vs Lab data.

Continue Reading Below

Field Data is performance data collected from real page loads your users are experiencing in the wild. You may also hear Field Data referred to as Real User Monitoring.

Core Web Vitals assessments and the Page Experience Ranking Signal will use Field Data gathered by the Chrome User Experience Report (Crux).

Which Users Are Part Of The Chrome User Experience Report?

Crux data is aggregated users who meet three criteria:

The user opted-in to syncing their browsing history.
The user has not set up a Sync passphrase.
The user has usage statistic reporting enabled.

Crux is your source of truth for Core Web Vitals Assessment.

You can access Crux data using Google Search Console, PageSpeed Insights (page-level), Public Google BigQuery project, or as an origin-level dashboard in Google Data Studio.

Why would you use anything else? Well, CWV Field Data is a restricted set of metrics with limited debugging capabilities and requirements for data availability.

Continue Reading Below

Why Doesn’t My Page Have Data Available From Crux?

Why Doesn't My Page Have Data Available From Crux?

When testing your page, you may see “The Chrome User Experience Report does not have sufficient real-world speed data for this page.”

This is because Crux data is anonymized. There must be enough page loads to report without the reasonable possibility of the individual user being identified.

Web Core Vitals are best identified using field data and then diagnosed/QAed using lab data.

Continue Reading Below

Lab Data allows you to debug performance with end-to-end and deep visibility into UX. It’s called “lab” as this emulated data is collected within a controlled environment with predefined device and network settings.

You can get lab data from PageSpeed Insights, web.dev/measure, Chrome DevTool’s Lighthouse panel, and Chromium-based crawlers like a local NodeJS Lighthouse or DeepCrawl.

Let’s dive into a workflow process.

1. Identify Issues With Crux Data Grouped By Behavior Patterns In Search Console.

Start with Search Console’s Core Web Vitals report to identify groups of pages that require attention. This data set uses Crux data and does you the kindness of grouping together example URLs based on behavior patterns.

If you solve the root issue for one page, you’re likely to fix it for all pages sharing that CWV woe. Typically, these issues are shared by a template, CMS instance, or on-page element. GSC does the grouping for you.

Focus on Mobile data, as Google is moving to a Mobile-First Index and CWV is set to affect mobile SERPs. Prioritize your efforts based on the number of URLs impacted.

Core Web Vitals Google search console issue groupings.

Click into an issue to see example URLs that exhibit the same behavior patterns.

Continue Reading Below

Save these example URLs for testing throughout the improvement process.

Core Web Vitals Google search console issue groupings with page examples

2. Use PageSpeed Insights To Marry Field Data With Lab Diagnostics.

Once you’ve identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page.

Remember that lab tests are one-off emulated tests. One test is not a source of truth or a definitive answer. Test multiple example URLs.

Continue Reading Below

PageSpeed Insights can only be used to test publicly available and indexable URLs.

If you’re working on noindex or authenticated pages, Crux data is available via API or BigQuery. Lab tests should use Lighthouse.

3. Create A Ticket. Do The Development Work.

I encourage you as SEO professionals to be part of the ticket refinement and QA processes.

Development teams typically work in sprints. Each sprint includes set tickets. Having well-written tickets allows your development team to better size the effort and get the ticket into a sprint.

In your tickets, include:

User Story
Follow a simple format:

As a < type of user/site/etc >, I want < action > in order to < goal >.

Eg.: As a performant site, I want to include inline CSS for node X on page template Y in order to achieve the largest contentful paint for this page template in under 2.5 seconds.

Acceptance Criteria
Define when the goal has been achieved. What does “done” mean? Eg.:

Inline any critical-path CSS used for above-the-fold content by including it directly in .
Critical CSS (read as: that related to node X) appears above JS and CSS resource links in the .

Continue Reading Below

Testing URLs/Strategy
Include the grouped example URLs you copied down from Search Console. Provide a set of steps for QA engineers to follow.
Think about which tool is used, what metric/marker to look for, and the behavior indicating a pass or fail.

Links To Developer Document
Use first-party documentation when available. Please no fluffy blogs. Please? Eg.:

4. QA Changes In Staging Environments Using Lighthouse.

Before code is pushed to production, it’s often put in a staging environment for testing. Use Lighthouse (via Chrome DevTools or local node instance) to measure Core Web Vitals.

If you’re new to testing with Lighthouse, you can learn about ways to test and testing methodology in A Technical SEO Guide to Lighthouse Performance Metrics.

Keep in mind that lower environments typically have fewer resources and will be less performant than production.

Continue Reading Below

Rely on the acceptance criteria to home in on whether the development work completed met the task given.

Largest Contentful Paint

Represents: Perceived loading experience.

Measurement: The point in the page load timeline when the page’s largest image or text block is visible within the viewport.

Key Behaviors: Pages using the same page templates typically share the same LCP node.

Goal: 75% of page loads achieve LCP in < 2.5 seconds.

Available as: Lab and Field Data.

What Can Be LCP?

The LCP metric measures when the largest text or image element in the viewport is visible.

Possible elements that can be a page’s LCP node include:

elements.
elements inside an tag.
poster images of elements.
background images loaded via url() CSS function.
Text nodes inside block-level elements.

Expect to see additional elements like and added in future iterations.

How To identify LCP Using Chrome DevTools

Open the page in Chrome emulating a Moto 4G.
Navigate to the Performance panel of Dev Tools (Command + Option + I on Mac or Control + Shift + I on Windows and Linux).
Hover over the LCP marker in the Timings section.
The element(s) that correspond to LCP is detailed in the Related Node field.

How to identify LCP using Chrome DevTools

What Causes Poor LCP?

There are four common issues causing poor LCP:

Continue Reading Below

Slow server response times.
Render-blocking JavaScript and CSS.
Slow resource load times.
Client-side rendering.

Source issues for LCP are painted in broad strokes at best. Unfortunately, none of the single phrases above will likely be enough to pass along to your dev team with meaningful results.

However, you can give the issue momentum by homing in on which of the four origins is in play.

Improving LCP is going to be collaborative. Getting it fixed means sitting in on dev updates and following up as a stakeholder.

Diagnosing Poor LCP Because Of Slow Server Response Time

Where to look: Crux Dashboard v2 – Time to First Byte (TTFB) (page 6)

Diagnosing Poor LCP Because of Slow Server Response Time

IF you see consistently poor TTFB in your field data, then it’s slow server response time dragging LCP.

Continue Reading Below

How To Fix Slow Server Response Time

Server response time is made of numerous factors bespoke to the site’s technology stack. There are no silver bullets here. Your best course of action is to open a ticket with your development team.

Some possible ways to improve TTFB are:

Optimize the server.
Route users to a nearby CDN.
Cache assets.
Serve HTML pages cache-first.
Establish third-party connections early.

Diagnosing Poor LCP Because Of Render-Blocking JavaScript And CSS

Where to look: Lighthouse (via web.dev/measure, Chrome DevTools, Pagespeed Insights, or nodeJS instance). Each of the solutions below include a relevant audit flag.

How To Fix Render-blocking CSS

CSS is inherently render-blocking and impact critical rendering path performance. By default, CSS is treated as a render-blocking resource.

The browser downloads all CSS resources, regardless of blocking or non-blocking behavior.

Minify CSS.

If your site uses a module bundler or build tool, find the plugin that will systematically minimize the scripts.

Continue Reading Below

Defer non-critical CSS.

The Code Coverage report in DevTools will help you identify which styles are used on the page. If it’s not used on any pages, then remove it entirely. (No judgement, CSS files can quickly bloat into the proverbial junk drawer.)
If the styles are used on another page, make a separate style sheet for those pages which use it to call.

Inline critical CSS.

Include the critical-path CSS used for above-the-fold content (as identified by the Code Coverage report) directly in .

Use Dynamic Media Queries.

Media queries are simple filters that when applied to CSS styles break out the styles based on the types of device rendering the content.

Using dynamic media queries means instead of calculating styles for all viewports, you’re calling and calculating those values to the requesting viewport.

How To Fix Render-Blocking JavaScript

Minify and compress JavaScript files.
You’ll need to work with developers to minify and compress network payloads.

Continue Reading Below

Minification involves removing unneeded whitespace and code. It’s best done systematically with a JavaScript compression tool.

Compression involves algorithmically modifying the data format for performant server and client interactions.

Defer unused JavaScript.
Code splitting chops up large chunks of JS to deliver smaller packages. You can then load those that matter to above-the-fold content first.

Minimize unused polyfills.
Remember how Googlebot was stuck in Chrome 44 for what felt like centuries? A polyfills is a piece of code used to provide modern functionality on older browsers that do not natively support it.

Now that Googlebot is evergreen, it also goes by the name tech debt.

Some compilers have built-in functionalities to remove legacy polyfills.

How To Fix Render-Blocking Third-Party Scripts

Delay it.

If the script does not contribute to above the fold content, use async or defer attributes.

Remove it.

If the script uses an No one needs a 10MB png file. There’s rarely a use case for shipping a large image file. Or a png.

Preload important resources.
If a resource is part of the critical path, a simple rel="preload" attribute tells the browser to fetch it as soon as possible.


Compress text files.
Encode, compress, repeat.
Deliver different assets based on network connection (adaptive serving).
A mobile device on a 4G network isn’t likely to need/want/tolerate the loading time of assets ready for an ultra 4K monitor. Use the Network Information API which enables web applications to access information about the user’s network.
Cache assets using a service worker.
While Googlebot doesn’t execute service workers, a user’s device on a thimble’s worth of network connection certainly will. Work with your development team to leverage the Cache Storage API.

Diagnosing Poor LCP Because Of Client-Side Rendering
Where to look: For one-off glances, view the page source. If it’s a couple of lines of gibberish, the page is client-side rendered.
Elements within a page can be client-side rendered. To spot which elements, compare the initial page source with the rendered HTML. If you’re using a crawler, compare the rendered word count difference.
Core Web Vitals are a way of measuring how effective our rendering strategies are.
All rendering options have the same output (they all build web pages), but CWV metrics measure how quickly we deliver what matters when it matters.
Client-side rendering is rarely the answer unless the question is, “What changes went into production at the same time that organic traffic began to tumble?”
How To Fix Client-Side Rendering
“Stop” really isn’t a useful answer. Accurate, but not useful. So instead:

Minimize critical JavaScript.
Use code splitting, tree shaking, and inline functions in the head for above-the-fold functionalities. Keep those inline scripts <1kb.
Use server-side rendering.
By having your servers execute JS elements, you can return fully rendered HTML. Note that this will increase your TTFB as the scripts are executed before your server responds.
Use pre-rendering.
At build time, execute your scripts and have rendered HTML ready for incoming requests. This option has a better server response time but won’t work for sites with frequently changing inventory or prices.

To be clear: Dynamic rendering is not a solution to client-side rendering. It’s giving the troubles of client-side rendering a friend.
First Input Delay (FID)
Represents: Responsiveness to user input.
Measurement: The time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.
Key behaviors: FID is only available as field data.
Goal: 75% of page loads achieve FID in <= 100 milliseconds.
Available as: Field Data.
Use Total Blocking Time (TBT) For Lab Tests
Since FID is only available as lab data, you’ll need to use Total Blocking Time for lab tests. The two achieve the same end result with different thresholds.
TBT represents: Responsiveness to user input.
TBT measurement: Total time in which the main thread is occupied by tasks taking more than 50ms to complete.
Goal: <= 300 milliseconds.
Available as: Lab Data.
What Causes Poor FID?
const jsHeavy = true;
    While (jsHeavy) {
        console.log("FID fail")
    }
Heavy JavaScript. That’s it.
Poor FID comes from JS occupying the main thread which means your user’s interactions are forced to wait.
What On-Page Elements Are Impacted By FID?
FID is a way of measuring main thread activity. Before on-page elements can respond to user interaction, in-progress tasks on the main thread have to complete.
Here are some of the most prevalent elements that your user is tapping in frustration:

Text fields.
Checkboxes.
Radio buttons ( and </code>).</li>
<li>Select dropdowns (<code><select></code>).</li>
<li>Links (<code></code>).</li>
</ol>
<p><strong>Where to look</strong>: To confirm it’s an issue for users look at Crux Dashboard v2 – First Input Delay (FID) (page 3). Use Chrome DevTools to identify the exact tasks.</p>
<h3><strong>How To See TBT Using Chrome DevTools</strong></h3>
<ol>
<li>Open the page in Chrome.</li>
<li>Navigate to the Network panel of Dev Tools (<code>Command + Option + I</code> on Mac or <code>Control + Shift + I</code> on Windows and Linux).</li>
<li>Tick the box to disable cache.</li>
<li>Navigate to the Performance Panel and check the box for Web Vitals.</li>
<li>Click the reload button to start a performance trace.</li>
<li>Look for the blue blocks labeled Long Tasks or the red right corner markers in the right-hand corner of tasks. These indicate long tasks that took more than 50ms.</li>
<li>Find the TBT for the page at the bottom of the summary.</li>
</ol>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-403026 size-content_large_1x b-lazy pcimg" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20653%22%3E%3C/svg%3E" alt="How to See TBT Using Chrome Devtools" width="760" height="653" sizes="(max-width: 760px) 100vw, 760px" data-srcset="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443-768x660.jpg 768w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443-480x413.jpg 480w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443-680x585.jpg 680w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443.jpg 906w" data-src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443-768x660.jpg"/></p>
<p><noscript><img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/total-blocking-time-devtools-607dab49cd443-768x660.jpg" alt="How to See TBT Using Chrome Devtools"/></noscript></p>
<h3><strong>How To Fix Poor FID</strong></h3>
<p><strong>Stop loading so many third-party scripts.</strong></p>
<p>Third-party code puts your performance behind another team’s stack.</p>
<p>You’re dependent on their scripts executing in a succinct, performant manner in order for your side to be considered performant.</p>
<p><strong>Free up the main thread by breaking up Long Tasks.</strong></p>
<p>If you’re shipping one massive JS bundle for every page, there’s a lot of functionalities in that bundle that don’t contribute to the page.</p>
<p>Even though they’re not contributing, each JS function has to be downloaded, parsed, compiled, and executed.</p>
<p>By breaking out that big bundle into smaller chunks and only shipping those that contribute, you’ll free up the main thread.</p>
<p><strong>Check your tag manager.</strong></p>
<p>Out-of-the-box tag deployment of tags fire event listeners that will tie up your main thread.</p>
<p>Tag managers can be long-running input handlers that block scrolling. Work with developers to debounce your input handlers.</p>
<p><strong>Optimize your page for interaction readiness.</strong></p>
<p>Ship and execute those JS bundles in an order that matters.</p>
<p>Is it above the fold? It gets prioritized. Use <code>rel=preload</code>.</p>
<p>Pretty important but not enough to block rendering? Add the <code>async</code> attribute.</p>
<p>Below the fold? Delay it with the <code>defer</code> attribute.</p>
<p><strong>Use a web worker.</strong></p>
<p>Web workers allow JavaScript to run on a background thread rather than the main thread your FID is scored on.</p>
<p><strong>Reduce JavaScript execution time.<br /></strong></p>
<p>If you’re shipping one massive JS bundle for every page, there’s a lot of functionalities in that bundle that don’t contribute to the page.</p>
<p>Even though they’re not contributing, each JS function has to be downloaded, parsed, compiled, and executed.</p>
<p>By breaking out that big bundle into smaller chunks (code splitting) and only shipping those that contribute (tree shaking), you’ll free up the main thread.<strong><br /></strong></p>
<h2>Cumulative Layout Shift</h2>
<p><strong>Represents</strong>: Visual stability.</p>
<p><strong>Measurement</strong>: A calculation based on the number of frames in which element(s) visually moves and the total distance in pixels the element(s) moved.</p>
<blockquote readability="5">
<p>layout shift score = impact fraction * distance fraction</p>
</blockquote>
<p><b>Key behaviors</b>: CLS is the only Core Web Vital not measured in time. Instead, CLS is a calculated metric. The exact calculations are actively being iterated on.</p>
<p><strong>Goal</strong>: 75% of page loads have a CLS calculated metric of >0.10.</p>
<p><strong>Available as</strong>: Lab and Field Data.</p>
<h3>Diagnosing Poor CLS</h3>
<p><strong>Where to look</strong>: To confirm it’s an issue for users look at Crux Dashboard v2 – Cumulative Layout Shift (CLS) (page 4). Use any tool with Lighthouse to identify the bouncing element(s).</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-content_large_1x wp-image-403223 b-lazy pcimg" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20623%22%3E%3C/svg%3E" alt="Advanced Core Web Vitals: A Technical SEO Guide" width="760" height="623" sizes="(max-width: 760px) 100vw, 760px" data-srcset="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd-768x630.jpg 768w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd-480x394.jpg 480w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd-680x558.jpg 680w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd.jpg 800w" data-src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd-768x630.jpg"/></p>
<p><noscript><img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/lighthouse-cls-elements-607f152b66bbd-768x630.jpg" alt="Advanced Core Web Vitals: A Technical SEO Guide"/></noscript></p>
<p>Chrome DevTools will provide greater insights into the coordinates of the excitable element and how many times it moves.</p>
<h3><strong>How To See CLS Using Chrome DevTools</strong></h3>
<ol>
<li>Open the page in Chrome.</li>
<li>Navigate to the Network panel of Dev Tools (<code>Command + Option + I on</code> Mac or <code>Control + Shift + I</code> on Windows and Linux).</li>
<li>Tick the box to disable cache.</li>
<li>Navigate to the Performance Panel and check the box for Web Vitals.</li>
<li>Click the reload button to start a performance trace.</li>
<li>Click on the red marker(s) in the Experience section.</li>
<li>Look for the name of the node, highlighting of the node on page, and the coordinates for each time the element moved.</li>
</ol>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-403229 size-content_large_1x b-lazy pcimg" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20993%22%3E%3C/svg%3E" alt="How to See CLS Using Chrome DevTools" width="760" height="993" sizes="(max-width: 760px) 100vw, 760px" data-srcset="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50-768x1003.jpg 768w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50-480x627.jpg 480w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50-680x888.jpg 680w, https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50.jpg 879w" data-src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50-768x1003.jpg"/></p>
<p><noscript><img decoding="async" src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/04/chrome-devtools-cls-607f1dc665a50-768x1003.jpg" alt="How to See CLS Using Chrome DevTools"/></noscript></p>
<h3>What Can Be Counted In CLS?</h3>
<p>If an element appears in the initial viewport, it becomes part of the metric’s calculation.</p>
<p>If you load your footer before your primary content and it appears in the viewport, then the footer is part of your (likely atrocious) CLS score.</p>
<h3>What Causes Poor CLS?</h3>
<p>Is it your cookie notice? It’s probably your cookie notice.</p>
<p>Alternatively, look for:</p>
<ol>
<li>Images without dimensions.</li>
<li>Ads, embeds, and iframes without dimensions.</li>
<li>Dynamically injected content.</li>
<li>Web Fonts causing FOIT/FOUT.</li>
<li>Chains for critical resources.</li>
<li>Actions waiting for a network response before updating DOM.</li>
</ol>
<h3>How To Fix Poor CLS</h3>
<p><strong>Always include <code>width</code> and <code>height</code> size attributes on images and video elements.</strong></p>
<p>It’s as simple as <code><img loading="lazy" decoding="async" src="stable-layout.jpg" width="640" height="360" /></code> but also not. Responsive web design saw the decline of height and width declarations. The negative impact of this is pages reflowing once the image appeared on screen.</p>
<p>Best practice is to leverage </strong></p>
<p>A font loading late causes a full flash and re-write.</p>
<p><code>Preload</code> tells the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.</p>
<p><code><link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin></code><strong><br /></strong></p>
<p><strong>Avoid chains for resources needed to create above-the-fold content.</strong></p>
<p>Chains happen when you call a resource that calls a resource. If a critical asset is called by a script, then it can’t be called until that script is executed.</p>
<p><strong>Avoid <code>document.write()</code><br /></strong></p>
<p>Modern Browsers support speculative parsing off of the main thread.</p>
<p>Read as: They work ahead while scripts are being downloaded and executed – like reading ahead of assignments in a class. <code>document.write(</code>) comes in and changes the textbook. Now that work reading ahead was useless.</p>
<p>Chances are this isn’t the work of your devs. Talk to your point of contact for that “magic” third-party tool.</p>
<h2>The Future Of CWV Metrics</h2>
<p>Google intends to update the Page Experience components on an annual basis. Future CWV metrics will be documented similarly to the initial signal rollout.</p>
<p>Imagine a world where SEO professionals got notice a year in advance that Panda was coming!</p>
<p>Core Web Vitals are already 55% of your Lighthouse v7 score.</p>
<p>Currently, Largest Contentful Paint (LCP) and First Input Delay (FID) are each weighted at 25%. Cumulative Layout Shift is a meager 5% but we can expect to see these equalize.</p>
<p>Smart money is on Q4 2021 once the Chromium team hones in the metric’s calculation.</p>
<p>As technical SEO pros, we’re able to diagnose and provide solutions for a better user-centric experience. Here the thing – those investments and improvements impact all users.</p>
<p>The ROI can be found in every medium. Every channel.</p>
<p>Organic performance is an overall reflection of site health. Leverage that position as you continue to advocate and iterate. Share what you learn.</p>
<p>Most importantly:</p>
<p>|￣￣￣￣￣￣￣￣￣￣￣|<br />Don’t be afraid to<br />learn in public<br />|＿＿＿＿＿＿＿＿＿＿＿|<br />(__/) ||<br />(•ㅅ•) ||<br />/ 　 づ</p>
<hr/>
<p><strong>2021 SEJ Christmas Countdown:<br /></strong></p>
<p><strong><em>Image Credits</em></strong></p>
<p><em>Featured image: Piscine26/Shutterstock<br />All screenshots taken by author</em></p>
<p><a rel="nofollow"  href="https://www.searchenginejournal.com/technical-seo-core-web-vitals-guide/402501/">Go to Source</a><br />
Author: Jamie Indigo</p>
            </div>

            
            <div class="post-tags w-tags"><div class="tags-wrap"><a href="https://tunedupmedia.com/tag/2021/" rel="tag">2021</a> <a href="https://tunedupmedia.com/tag/down/" rel="tag">down</a> <a href="https://tunedupmedia.com/tag/editors/" rel="tag">Editor’s</a> <a href="https://tunedupmedia.com/tag/note-as/" rel="tag">note As</a> <a href="https://tunedupmedia.com/tag/winds/" rel="tag">winds</a></div></div>
                            <div class="socials">
                    <span class="label">Share:</span>
<button  class="social__item social-facebook sharer" data-sharer="facebook" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/" data-image="https://tunedupmedia.com/wp-content/uploads/2021/12/Advanced-Core-Web-Vitals-A-Technical-a-hrefhttpstunedupmedia.comsearch-engine-optimizationSEOa-Guide-via-@sejournal-@Jammer_Volts-300x212.jpg">
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/facebook.svg" alt="facebook">
</button>
<button class="social__item social-twitter sharer" data-sharer="twitter" data-title="Advanced Core Web Vitals: A Technical <a href="https://tunedupmedia.com/search-engine-optimization/">SEO</a> Guide via @sejournal, @Jammer_Volts" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/" >
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/twitter.svg" alt="twitter">
</button>
<button class="social__item social-linkedin sharer" data-sharer="linkedin" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/">
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/linkedin.svg" alt="linkedin">
</button>
<button class="social__item social-pinterest sharer" data-sharer="pinterest" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/" data-image="https://tunedupmedia.com/wp-content/uploads/2021/12/Advanced-Core-Web-Vitals-A-Technical-a-hrefhttpstunedupmedia.comsearch-engine-optimizationSEOa-Guide-via-@sejournal-@Jammer_Volts.jpg" >
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/pinterest.svg" alt="pinterest">
</button>
<button class="social__item social-vk sharer" data-sharer="VK" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/" data-image="https://tunedupmedia.com/wp-content/uploads/2021/12/Advanced-Core-Web-Vitals-A-Technical-a-hrefhttpstunedupmedia.comsearch-engine-optimizationSEOa-Guide-via-@sejournal-@Jammer_Volts.jpg" >
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/vk.svg" alt="vk">
</button>
<button class="social__item social-whatsapp sharer" data-sharer="whatsapp" data-url="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/" data-image="https://tunedupmedia.com/wp-content/uploads/2021/12/Advanced-Core-Web-Vitals-A-Technical-a-hrefhttpstunedupmedia.comsearch-engine-optimizationSEOa-Guide-via-@sejournal-@Jammer_Volts.jpg" >
    <img loading="lazy" width="24" height="24" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/whatsapp.svg" alt="whatsapp">
</button>                </div>
                    </div>
    </div>
</article>

<div class="pagination-arrow">
	        <a href="https://tunedupmedia.com/you-cant-get-to-great-if-you-hang-onto-good/" class="btn-nav btn-prev-wrap">
            <svg class="crumina-icon">
                <use xlink:href="#arrow-left"></use>
            </svg>
            <div class="btn-content">
                <div class="btn-content-title">Previous Post</div>
                <p class="btn-content-subtitle">You Can’t Get To Great If You Hang Onto Good</p>
            </div>
        </a>
	
        <a href="https://tunedupmedia.com/five-tips-to-make-local-service-ads-for-lawyers-more-effective/" class="btn-nav btn-next-wrap">
            <div class="btn-content">
                <div class="btn-content-title">Next Post</div>
                <p class="btn-content-subtitle">Five Tips To Make Local Service Ads For Lawyers More Effective</p>
            </div>
            <svg class="crumina-icon">
                <use xlink:href="#arrow-right"></use>
            </svg>
        </a>

	</div><div id="comments" class="comments comments-area">
	    <div class="leave-reply">
			<div id="respond" class="comment-respond">
		<div class="heading"><h4 class="heading-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/#respond" style="display:none;">Cancel Reply</a></small></h4><div class="heading-line"><span class="short-line"></span><span class="long-line"></span></div></div><p class="must-log-in">You must be <a href="https://tunedupmedia.com/wp-login.php?redirect_to=https%3A%2F%2Ftunedupmedia.com%2Fadvanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts%2F">logged in</a> to post a comment.</p>	</div><!-- #respond -->
	    </div>
</div><!-- #comments -->



				</main><!-- #main -->
			</div>
					</div><!-- #row -->
	</div><!-- #primary -->

	
	<!-- Subscribe Form -->
<section id="subscribe-section" class="subscribe-section font-color-custom">
    <div class="subscribe container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-5 col-md-12 col-md-offset-0 col-sm-12 col-xs-12">
				<h4 class="subscribe-title">Email Newsletters!</h4>                        <form action="#" method="post" class="es_subscription_form form-subscribe subscribe-form es_shortcode_form"
                              id="es_subscription_form_1714294417" data-source="ig-es">
														
							                                <input type="hidden" name="lists[]" value="1">
							
							
							
							                            <input type="email" required="required" id="es_txt_email_pg" class="es_textbox_class"
                                   name="email" maxlength="40"
                                   placeholder="Your Email Address">
							
                            <label style="position:absolute;top:-99999px;left:-99999px;z-index:-99;"><input type="email" name="es_hp_email"
                                                                           class="es_required_field" tabindex="-1"
                                                                           autocomplete="-1" value=""/></label>
														                            <button type="submit" name="submit"
                                    class="es_subscription_form_submit es_submit_button subscr-btn"
                                    id="es_subscription_form_submit_1714294417">
								Subscribe                                <span class="semicircle--right"></span>
                            </button>

							                                <input type="hidden" id="es_txt_name_pg" name="es_txt_name_pg" value="">
								
                            <input type="hidden" name="es-subscribe" id="es-subscribe"
                                   value="c60d049089"/>
                            <input type="hidden" name="es_email_page" value="11143"/>
                            <input type="hidden" name="es_email_page_url"
                                   value="https://tunedupmedia.com/advanced-core-web-vitals-a-technical-seo-guide-via-sejournal-jammer_volts/"/>
                            <input type="hidden" name="status" value="Unconfirmed"/>
                            <label style="position:absolute;top:-99999px;left:-99999px;z-index:-99;"><input type="text"
                                                                                         name="es_hp_3876fcae35"
                                                                                         class="es_required_field"
                                                                                         tabindex="-1"
                                                                                         autocomplete="off"/></label>
                            <div class="flex-break"></div>
                        </form>
                        <span class="es_subscription_message"
                              id="es_subscription_message_1714294417"></span>
										<div class="sub-title">Sign up to receive TunedUp Media digital marketing tips. </div>            </div>
			            <div class="images-block not-animated">
                <img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/images/animated/subscr-gear.png" width="58" height="57" alt="gear" class="gear">
                <img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/images/animated/subscr1.png" width="470" height="290" alt="mail" class="mail">
                <img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/images/animated/subscr-mailopen.png" width="138" height="133" alt="mailopen" class="mail-2">
            </div>
        </div>
    </div>
</section>
<!-- End Subscribe Form -->

    </div><!-- ! .content-wrapper Close -->
    <!-- Footer -->
    <footer id="site-footer" class="footer  font-color-custom">
        <div class="container">
			            <div class="row info" itemscope itemtype="http://schema.org/Organization">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
					                        <div class="crumina-heading widget-heading">
							                                <h4 class="heading-title"
                                    itemprop="name">TunedUp Media</h4>
                                <div class="heading-decoration"><span class="first"></span><span class="second"></span>
                                </div>
								                                <div class="heading-text" itemprop="description">
									<p class="p1">TunedUp Media is a full service digital marketing and branding agency based on Long Island focused on providing creative digital marketing and branding solutions for our clients while supporting great causes driving social change.</p>
<p><a rel="nofollow"  href="https://www.google.com/partners/agency?id=7409649707" target="_blank"><br />
    <img src="https://www.gstatic.com/partners/badge/images/2021/PartnerBadgeClickable.svg" /><br />
</a><br />
<!-- Add the code snippet above to the sites listed to display your badge:
    https://tunedupmedia.com --></p>
                                </div>
							                        </div>
										                        <div class="socials">
                            <link itemprop="url" href="https://tunedupmedia.com"/>
							<a href="https://www.facebook.com/BusinessThatRocks/" class="social__item" target="_blank" itemprop="sameAs" rel="nofollow"><img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/facebook.svg" width="24" height="24"  alt="Facebook"></a><a href="https://twitter.com/TunedUpMedia" class="social__item" target="_blank" itemprop="sameAs" rel="nofollow"><img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/twitter.svg" width="24" height="24"  alt="Twitter"></a><a href="https://www.linkedin.com/company/tuned-up-media/" class="social__item" target="_blank" itemprop="sameAs" rel="nofollow"><img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/linkedin.svg" width="24" height="24"  alt="Linkedin"></a><a href="https://www.instagram.com/businessthatrocks/" class="social__item" target="_blank" itemprop="sameAs" rel="nofollow"><img loading="lazy" src="https://tunedupmedia.com/wp-content/themes/seosight/svg/socials/instagram.svg" width="24" height="24"  alt="Instagram"></a>                        </div>
					                </div>

								                    <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-12 col-xs-12">
                        <div class="row">
							<aside id="seosight_menus-2" class="widget w-custom-menu col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="crumina-heading widget-heading"><h4 class="heading-title">Services & Links</h4><div class="heading-decoration"><span class="first"></span><span class="second"></span></div></div>	<div class="menus-wrap ovh">
		<ul id="menu-footer-menu-1" class="list--traingle half-width"><li><a href="https://tunedupmedia.com/local-seo/"><i class="fa fa-caret-right" aria-hidden="true"></i>Local SEO</a></li>
<li><a href="https://tunedupmedia.com/web-design/"><i class="fa fa-caret-right" aria-hidden="true"></i>Web Design</a></li>
<li><a href="https://tunedupmedia.com/search-engine-optimization/"><i class="fa fa-caret-right" aria-hidden="true"></i>SEO Services</a></li>
<li><a href="https://tunedupmedia.com/social-media-marketing/"><i class="fa fa-caret-right" aria-hidden="true"></i>Social Media</a></li>
<li><a href="https://tunedupmedia.com/email-marketing"><i class="fa fa-caret-right" aria-hidden="true"></i>Email Marketing</a></li>
<li><a href="https://tunedupmedia.com/pay-per-click-ppc-management/"><i class="fa fa-caret-right" aria-hidden="true"></i>Pay-per-click</a></li>
<li><a href="https://tunedupmedia.com/custom-website-creator/"><i class="fa fa-caret-right" aria-hidden="true"></i>Custom Website Creator</a></li>
</ul><ul id="menu-footer-menu-2" class="list--traingle half-width"><li><a href="https://tunedupmedia.com/privacy-policy/"><i class="fa fa-caret-right" aria-hidden="true"></i>Privacy Policy</a></li>
<li><a href="https://tunedupmedia.com/accessibility/"><i class="fa fa-caret-right" aria-hidden="true"></i>Accessibility Statement</a></li>
<li><a href="https://tunedupmedia.com/request-a-quote/"><i class="fa fa-caret-right" aria-hidden="true"></i>Request A Quote</a></li>
<li><a href="https://tunedupmedia.com/claim-your-free-google-my-business-account/"><i class="fa fa-caret-right" aria-hidden="true"></i>Setup Google My Business</a></li>
<li><a href="https://tunedupmedia.com/seo-analysis/"><i class="fa fa-caret-right" aria-hidden="true"></i>Free Website SEO Analysis</a></li>
<li><a href="https://tunedupmedia.com/contact-information/"><i class="fa fa-caret-right" aria-hidden="true"></i>Contact information</a></li>
</ul>	</div>
</aside>                        </div>
                    </div>
								            </div>
					                    <div class="row" itemscope itemtype="http://schema.org/Organization">
                        <div class="contacts">
							                                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <div class="contacts-item">
                                        <div class="icon js-animate-icon c-secondary" >
											<svg enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" ><path d="  M45.1,44.2C42.9,42,39.6,40,37,42.6c-1.8,1.8-2.6,3.9-2.6,3.9s-4.3,2.3-11.7-5.2s-5.2-11.7-5.2-11.7s2.1-0.8,3.9-2.6  c2.6-2.6,0.6-5.9-1.7-8.1c-2.7-2.7-6.2-4.9-8.2-2.9c-3.7,3.7-4.4,8.4-4.4,8.4S9,35.5,18.7,45.3s20.9,11.6,20.9,11.6s4.7-0.7,8.4-4.4  C50,50.4,47.8,46.9,45.1,44.2z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M18.4,12.2C22.2,9.5,26.9,8,32,8c13.3,0,24,10.8,24,24c0,4-1.3,9-4.4,12.2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M27.3,55.6c-9.8-1.9-17.5-9.8-19.1-19.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M30,21c0,0,4.4,0,5.2,0c1.2,0,1.8,0.2,1.8,1.1s0,0.7,0,1.3c0,0.6,0,1.4-1.6,2.5c-2.3,1.6-5.6,3.8-5.6,5.1c0,1.6,0.7,2,1.8,2  s5.3,0,5.3,0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M40,21c0,0,0,2.8,0,3.8S39.9,27,41.5,27c1.6,0,4.5,0,4.5,0v-6.1V33" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/></svg>                                        </div>
                                        <div class="content">
											<a href="tel:646.236.7136" class="title" itemprop="telephone">646.236.7136</a><p class="sub-title">Mon-Fri 9am-6pm</p>                                        </div>
                                    </div>
                                </div>
							                                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <div class="contacts-item">
                                        <div class="icon js-animate-icon c-secondary" >
											<svg enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="  54,17 32,36 10,17 " stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="10.9" x2="26" y1="48" y2="36"/><path d="  M32.7,49H13c-2.2,0-4-1.8-4-4V19c0-2.2,1.8-4,4-4h38c2.2,0,4,1.8,4,4v15.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="44.9" cy="43.1" fill="none" r="10.1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M44,41.4c0,0-1.3,3.4-0.9,5.1c0.4,1.7,2.6,2.1,3.7,1.1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><g><circle cx="45.4" cy="38.3" fill="#DCE9EE" r="0.9"/><path d="M45.4,37.3c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9C46.4,37.8,46,37.3,45.4,37.3   L45.4,37.3z" fill="currentColor"/></g></svg>                                        </div>
                                        <div class="content">
											<a href="mailto:info@tunedupmedia.com" class="title" itemprop="email">info@tunedupmedia.com</a><p class="sub-title">Online Support</p>                                        </div>
                                    </div>
                                </div>
							                                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <div class="contacts-item">
                                        <div class="icon js-animate-icon c-secondary" >
											<svg enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="  38,35 50,35 56,58 8,58 14,35 16,35 " stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M27,40.7c0,0,13-8.8,13-21.4c0-7.2-5.8-13-13-13s-13,5.8-13,13c0,9.5,6.5,15.9,10.3,19.3L27,40.7z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="27" cy="19.6" fill="none" r="5.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><g><g><path d="M15,58c0,0,0.3-0.7,1-1.7    " fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="    M18.4,53.1C20.9,50.4,24.8,48,30,50c8.5,3.3,16.8-1,17.6-11" fill="none" stroke="currentColor" stroke-dasharray="3.944,3.944" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M47.6,37    c0-0.6,0-1.3-0.1-2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg>                                        </div>
                                        <div class="content">
											<span class="title" itemprop="address">315 Main St.  Unit #4 <br>Huntington, NY 11743</span><p class="sub-title">Office Address</p>                                        </div>
                                    </div>
                                </div>
							                        </div>
                    </div>
				        </div>
		            <div class="sub-footer medium">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <span class="site-copyright-text">
                                Copyright © 2023 TunedUp Media Created by <a href="https://tunedupmedia.com">TunedUp Media</a>                            </span>
                        </div>
                    </div>
                </div>
            </div>
		
		
    </footer>

    <!-- End Footer -->
    <svg class="hide">
        <symbol id="arrow-left" viewBox="122.9 388.2 184.3 85">
            <path d="M124.1,431.3c0.1,2,1,3.8,2.4,5.2c0,0,0.1,0.1,0.1,0.1l34.1,34.1c1.6,1.6,3.7,2.5,5.9,2.5s4.3-0.9,5.9-2.4
              c1.6-1.6,2.4-3.7,2.4-5.9s-0.9-3.9-2.4-5.5l-19.9-19.5h11.1c1.5,0,2.7-1.5,2.7-3c0-1.5-1.2-3-2.7-3h-17.6c-1.1,0-2.1,0.6-2.5,1.6
              c-0.4,1-0.2,2.1,0.6,2.9l24.4,24.4c0.6,0.6,0.9,1.3,0.9,2.1s-0.3,1.6-0.9,2.1c-0.6,0.6-1.3,0.9-2.1,0.9s-1.6-0.3-2.1-0.9
              l-34.2-34.2c0,0,0,0,0,0c-0.6-0.6-0.8-1.4-0.9-1.9c0,0,0,0,0,0c0-0.2,0-0.4,0-0.6c0.1-0.6,0.3-1.1,0.7-1.6c0-0.1,0.1-0.1,0.2-0.2
              l34.1-34.1c0.6-0.6,1.3-0.9,2.1-0.9s1.6,0.3,2.1,0.9c0.6,0.6,0.9,1.3,0.9,2.1s-0.3,1.6-0.9,2.1l-24.4,24.4c-0.8,0.8-1,2-0.6,3
              c0.4,1,1.4,1.7,2.5,1.7h125.7c1.5,0,2.7-1,2.7-2.5c0-1.5-1.2-2.5-2.7-2.5H152.6l19.9-20.1c1.6-1.6,2.4-3.8,2.4-6s-0.9-4.4-2.4-6
              c-1.6-1.6-3.7-2.5-5.9-2.5s-4.3,0.9-5.9,2.4l-34.1,34.1c-0.2,0.2-0.3,0.3-0.5,0.5c-1.1,1.2-1.8,2.8-2,4.4
              C124.1,430.2,124.1,430.8,124.1,431.3C124.1,431.3,124.1,431.3,124.1,431.3z"></path>
            <path d="M283.3,427.9h14.2c1.7,0,3,1.3,3,3c0,1.7-1.4,3-3,3H175.1c-1.5,0-2.7,1.5-2.7,3c0,1.5,1.2,3,2.7,3h122.4
              c4.6,0,8.4-3.9,8.4-8.5c0-4.6-3.8-8.5-8.4-8.5h-14.2c-1.5,0-2.7,1-2.7,2.5C280.7,426.9,281.8,427.9,283.3,427.9z"></path>
        </symbol>
        <symbol id="arrow-right" viewBox="122.9 388.2 184.3 85">
            <path d="M305.9,430.2c-0.1-2-1-3.8-2.4-5.2c0,0-0.1-0.1-0.1-0.1l-34.1-34.1c-1.6-1.6-3.7-2.5-5.9-2.5c-2.2,0-4.3,0.9-5.9,2.4
              c-1.6,1.6-2.4,3.7-2.4,5.9s0.9,4.1,2.4,5.7l19.9,19.6h-11.1c-1.5,0-2.7,1.5-2.7,3c0,1.5,1.2,3,2.7,3h17.6c1.1,0,2.1-0.7,2.5-1.7
              c0.4-1,0.2-2.2-0.6-2.9l-24.4-24.5c-0.6-0.6-0.9-1.3-0.9-2.1s0.3-1.6,0.9-2.1c0.6-0.6,1.3-0.9,2.1-0.9c0.8,0,1.6,0.3,2.1,0.9
              l34.2,34.2c0,0,0,0,0,0c0.6,0.6,0.8,1.4,0.9,1.9c0,0,0,0,0,0c0,0.2,0,0.4,0,0.6c-0.1,0.6-0.3,1.1-0.7,1.6c0,0.1-0.1,0.1-0.2,0.2
              l-34.1,34.1c-0.6,0.6-1.3,0.9-2.1,0.9s-1.6-0.3-2.1-0.9c-0.6-0.6-0.9-1.3-0.9-2.1s0.3-1.6,0.9-2.1l24.4-24.4c0.8-0.8,1-1.9,0.6-2.9
              c-0.4-1-1.4-1.6-2.5-1.6H158.1c-1.5,0-2.7,1-2.7,2.5c0,1.5,1.2,2.5,2.7,2.5h119.3l-19.9,20c-1.6,1.6-2.4,3.7-2.4,6s0.9,4.4,2.4,5.9
              c1.6,1.6,3.7,2.5,5.9,2.5s4.3-0.9,5.9-2.4l34.1-34.1c0.2-0.2,0.3-0.3,0.5-0.5c1.1-1.2,1.8-2.8,2-4.4
              C305.9,431.3,305.9,430.8,305.9,430.2C305.9,430.2,305.9,430.2,305.9,430.2z"></path>
            <path d="M146.7,433.9h-14.2c-1.7,0-3-1.3-3-3c0-1.7,1.4-3,3-3h122.4c1.5,0,2.7-1.5,2.7-3c0-1.5-1.2-3-2.7-3H132.4
              c-4.6,0-8.4,3.9-8.4,8.5c0,4.6,3.8,8.5,8.4,8.5h14.2c1.5,0,2.7-1,2.7-2.5C149.3,434.9,148.1,433.9,146.7,433.9z"></path>
        </symbol>
            <symbol id="to-top" viewBox="0 0 32 32">
                <path d="M17,22 L25.0005601,22 C27.7616745,22 30,19.7558048 30,17 C30,14.9035809 28.7132907,13.1085075 26.8828633,12.3655101
                  L26.8828633,12.3655101 C26.3600217,9.87224935 24.1486546,8 21.5,8 C20.6371017,8 19.8206159,8.19871575 19.0938083,8.55288165
                  C17.8911816,6.43144875 15.6127573,5 13,5 C9.13400656,5 6,8.13400656 6,12 C6,12.1381509 6.00400207,12.275367 6.01189661,12.4115388
                  L6.01189661,12.4115388 C4.23965876,13.1816085 3,14.9491311 3,17 C3,19.7614237 5.23249418,22 7.99943992,22 L16,22 L16,16 L12.75,19.25
                  L12,18.5 L16.5,14 L21,18.5 L20.25,19.25 L17,16 L17,22 L17,22 Z M16,22 L16,27 L17,27 L17,22 L16,22 L16,22 Z"
                      id="cloud-upload"></path>
            </symbol>

    </svg>
	<script data-account="YIZux7VeVo" src="https://cdn.userway.org/widget.js"></script>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/5035818.js"></script>
<!-- End of HubSpot Embed Code --><script>
              (function(e){
                  var el = document.createElement('script');
                  el.setAttribute('data-account', 'YIZux7VeVo');
                  el.setAttribute('src', 'https://cdn.userway.org/widget.js');
                  document.body.appendChild(el);
                })();
              </script><script type="text/javascript" id="email-subscribers-js-extra">
/* <![CDATA[ */
var es_data = {"messages":{"es_empty_email_notice":"Please enter email address","es_rate_limit_notice":"You need to wait for some time before subscribing again","es_single_optin_success_message":"Successfully Subscribed.","es_email_exists_notice":"Email Address already exists!","es_unexpected_error_notice":"Oops.. Unexpected error occurred.","es_invalid_email_notice":"Invalid email address","es_try_later_notice":"Please try after some time"},"es_ajax_url":"https:\/\/tunedupmedia.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/plugins/email-subscribers/lite/public/js/email-subscribers-public.js?ver=5.7.4" id="email-subscribers-js"></script>
<script type="text/javascript" id="fw-form-helpers-js-extra">
/* <![CDATA[ */
var fwAjaxUrl = ["\/wp-admin\/admin-ajax.php"];
/* ]]> */
</script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/fw-form-helpers.js?ver=1.1" id="fw-form-helpers-js"></script>
<script type="text/javascript" id="seosight-portfolio-likes-js-extra">
/* <![CDATA[ */
var fwAjaxUrl = ["\/wp-admin\/admin-ajax.php"];
/* ]]> */
</script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/framework-customizations/extensions/portfolio/static/js/likes.js?ver=1" id="seosight-portfolio-likes-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/sharer.min.js?ver=0.6" id="seosight-share-buttons-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/swiper.jquery.min.js?ver=6.1.2" id="swiper-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/theme-plugins.js?ver=5.6" id="seosight-plugins-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/main.js?ver=5.6" id="seosight-main-script-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-includes/js/comment-reply.min.js?ver=6.5.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/plugins/kingcomposer/assets/frontend/js/kingcomposer.min.js?ver=2.9.6" id="kc-front-scripts-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/velocity.min.js?ver=1.2.3" id="velocity-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/ScrollMagic.min.js?ver=2.0.5" id="scrollmagic-js"></script>
<script type="text/javascript" src="https://tunedupmedia.com/wp-content/themes/seosight/js/animation.velocity.min.js?ver=2.0.5" id="scrollmagic-velocity-js"></script>
</body>
</html>

Advanced Core Web Vitals: A Technical SEO Guide via @sejournal, @Jammer_Volts

The Page Experience Update

A New Page Experience Report In Search Console

Workflow For Diagnosing & Actioning CWV Improvements

Which Users Are Part Of The Chrome User Experience Report?

Why Doesn’t My Page Have Data Available From Crux?

1. Identify Issues With Crux Data Grouped By Behavior Patterns In Search Console.

2. Use PageSpeed Insights To Marry Field Data With Lab Diagnostics.

3. Create A Ticket. Do The Development Work.

4. QA Changes In Staging Environments Using Lighthouse.

Largest Contentful Paint

What Can Be LCP?

How To identify LCP Using Chrome DevTools

What Causes Poor LCP?

Diagnosing Poor LCP Because Of Slow Server Response Time

How To Fix Slow Server Response Time

Diagnosing Poor LCP Because Of Render-Blocking JavaScript And CSS

How To Fix Render-blocking CSS

How To Fix Render-Blocking JavaScript

How To Fix Render-Blocking Third-Party Scripts

Diagnosing Poor LCP Because Of Client-Side Rendering

How To Fix Client-Side Rendering

First Input Delay (FID)

Use Total Blocking Time (TBT) For Lab Tests

What On-Page Elements Are Impacted By FID?