Photo by Myriam Jessier

 

With Google integrating Core Web Vitals into its search ranking in May 2021, it’s time you got up to speed.

The update will affect all website designers and business owners as it will evolve SEO into the future. The aim is to provide a safer and better user experience or UX, especially for mobile platforms.

If you haven’t heard of Core Web Vitals or aren’t sure how to include or measure them then keep reading.

This guide outline the differences between LCP, FID, and CLS. We break-down what these new hot acronyms mean mean and the impact they have on search engine optimization.

You’ll explore tools like PageSpeed Insights to measure your own website’s score. Then learn how to adapt your online presence to increase traffic.

Read on to discover the future of SEO and how to capitalize your site’s success in the modern web.

Search Engine Optimization in 2021

SEO describes the way in which websites increase quality traffic through organic or free search results.

Google dominates the search engine market worldwide, holding a 92% share. Rising to the top of Google Search results is therefore seen as the main goal of every website. But not everyone can become number one.

Google chooses who’s displayed on its first page using a range of metrics, the main being Web Vitals.

Introduced in May 2020, they act as a way for the search engine to measure the quality of a ‘healthy site’. They include:

• Core Web Vitals
• Mobile-friendly factors
• HTTPS security
• Safe browsing techniques
• No intrusive interstitials

Core Web Vitals are becoming ranking signals for search results.

This guide explains the 3 elements of Core Web Vitals but what about the others?

Non-Core Web Vitals

Mobile Internet usage continues to rise each year, something that Google is aware of and includes in its search service.

They state clearly that your site should offer a mobile-friendly experience. That means making it responsive so users don’t have to pinch and zoom to view content.

Indexing, or how Google examines website pages, now focusses on mobile content first. By ignoring mobile users and concentrating on larger screens you face a drop in rankings.

Google also demands that your site offers a secure visit for its users.

That means adding an SSL security certificate to your site and making your domain start with HTTPS. This encrypts data over the open web and ensures safer visits.

Finally, Google hates sites that annoy its users. Don’t include pop-ups or modal adverts and present information in an accessible way.

What Are Core Web Vitals?

Although Google actively measures the web vitals listed above they’re now focussing on 3 in particular. Called ‘Core Web Vitals’, they include:

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

Don’t worry if these terms make little sense. We’ll outline what each metric means and how to calculate it shortly.

But before we do, what makes these three factors stand out from the other vitals?

Why Core?

Each Core Web Vital measures a distinct aspect of UX that can be measured on any site and produce accurate results. The 3 metrics relate to loading times, how long a site takes to become interactive, and visual stability.

Speed is now the common denominator.

The faster the page loads and the quicker users can view and engage with it the better. But if your site takes an age to work on a mobile device then don’t expect Google to recommend it.

Largest Contentful Paint

Largest Contentful Print or LCP measures loading times and performance.

The ‘paint’ part relates to what the user sees or is ‘painted’ on their screen. ‘Contentful’ ties with being able to view useful content. For example, a splash screen offers no real value to the user. ‘Largest’ reflects on the largest block of text or image that appears.

But what’s a reasonable time for a page to load in Google’s estimation?

• Good – 0 to 2.5 seconds
• Needs Improvement – 2.5 to 4 seconds
• Poor – 4+ seconds

Google averages these loading times out using the 75th percentile to measure results. If pages load consistently within one of these bands Google uses that score as the LCP.

Why LCP?

Loading times are always important but metrics have failed to measure these statistics with accuracy.

Factors like the DOMContentLoaded event measured text loading but didn’t account for images. Likewise, the First Contentful Paint metric calculated when the first item appeared on the screen. But that’s not great if a loading bar appears and nothing else.

LCP overcomes these shortfallings. It does this by replicating what the user sees or doesn’t see.

That means pages with a huge graphic at the top of the page will probably have a high LCP load time. This is because the image needs to download and display before the user can see it.

First Input Delay

Although LCP measures how fast a site paints its pixels on the screen it ignores the user’s ability to use them.

For example, the navigation bar at the top of the page loads first. But when you tap on a link the site takes an age to open it.

First Input Delay identifies how long it takes for the site to become interactive or respond to a command.

FID is measured in milliseconds and Google uses the following guide to quantify success:

• Good – 0 to 100 milliseconds
• Needs Improvement – 100 to 300 milliseconds
• Poor – 300+ milliseconds

Like LCP, first input delay works on the 75th percentile average range. That way, Google gets a clear understanding if a site is responsive or not.

Why Does a Page Take Time to Become Interactive?

Input delay or input latency occurs because the browser is too busy to respond to a user’s command. And a major reason for those delays relates to processing JavaScript files.

Some of these files are so big that they take several seconds to load. Once that happens, the browser must check for errors then respond to any actions the scripts produce. When all those behind-the-scenes steps end then the browser addresses the user.

These processes happen sequentially on the main thread or timeline. And if something blocks the queue then everything else gets held up.

Why Does FID Matter?

Imagine tapping on a button to buy your product but nothing happens.

Is it because you hit it too soon? Or maybe it isn’t working? Should you tap it again? But what if you’re charged twice?

No one likes confusion. That’s why First Input Delay is a core part of web vitals.

Cumulative Layout Shift

Have you ever experienced a web page that shifts content just as you’re about to read it?

Perhaps an advert appears and pushes the blog article further down the page. Or an image loads, shoving everything to squeeze around it.

That annoyance factor forms a part of Core Web Vitals called Cumulative Layout Shift.

Why Does Layout Shift Occur?

Web pages can load content in one of two ways: synchronously and asynchronously.

Synchronous loading happens sequentially on the main thread. The browser waits for something to load before dealing with it.

Asynchronous tasks can occur at any time. For example, a script loads content from a database and when it arrives the browser processes it.

Async data is often the main culprit for ‘cumulative’ or combined layout shift. Information gets inserted onto the page at different times, pushing the other content down the page.

Yet shifts can also happen when a user wants to load new content.

In this case, the layout shift is expected and isn’t necessarily ‘bad’. However, it’s best practice to include something like a loading bar to fill the space. That way the user knows something will appear on that part of the screen.

Layout Shift Scores

Measuring layout shift records the number of times a visible element changes its starting position. However, new elements that appear aren’t counted unless they affect other parts of the page the user sees.

CLS measures the total of all layout shifts against unexpected layout shifts. The lower the number the better the metric as shown below:

• Good – 0 to 0.1
• Needs Improvement – 0.1 to 0.25
• Poor – 0.25+

One way Google suggests to improve CLS is by using transitions.

Instead of altering width and height, use the transform CSS rules. Changes then animate and flow more easily. And they don’t impact the cumulative layout shift score.

For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

(web.dev)

Core Web Vitals Reporting

By now you probably want to know how Google measures your website in terms of Core Web Vitals. The good news is you can find out for free.

Use the Google Core Web Vitals report tool to view how your web pages fare. Also, you should already but if you do not have your site verifed with Google Search Console then do it today. They have a brand new section that will let you know which pages pass and which are not meeting their speed requirements.

The report groups your page URLs by status and type and provides a calculation for each vitals metric. It highlights reasonable and poor performance so you can see which pages require attention.

Web Developer and WordPress Tools

Web developers and website designers can install a JavaScript web vitals library.

These tools identify LCP, CLS, and FID through simple function calls. Import them using npm or use a CDN for faster access.

If you aren’t a web development company expert, never fear.

WordPress offers several plugins for you to measure Core Web Vitals. Services like Site Kit by Google and Web Vitals Block make it easy to see your site’s scores.

In the past several months, we’ve seen a median 70% increase in the number of users engaging with Lighthouse and PageSpeed Insights, and many site owners using Search Console’s Core Web Vitals report to identify opportunities for improvement.

(developers.google.com)

Evaluating page experience for a better web

Source: (developers.google.com)

Outline:

• Evaluating page experience for a better web
• About page experience
• Page experience ranking
• Page experience and the mobile Top Stories feature

Timing for bringing page experience to Google Search

Source: (developers.google.com)

Outline:

• Timing for bringing page experience to Google Search
• A New Way of Highlighting Great Experiences in Google Search
• The Tools Publishers Need for Improving Page Experience

Web Vitals

Source: (chrome.google.com)

Measure metrics for a healthy site

We can guide you on choosing the right plugin.

As WordPress professionals, we know which tool is best for the job. Simply contact us for further information about our small task solutions.

WordPress Core Web Vitals

How can you optimize your WordPress site for the three Core Web Vitals?

Here are 5 tips that will boost your chances of SEO success. They all work for WordPress sites. And you can implement them today.

1. Choose a Fast Host

As you know now, speed plays an essential part in Google’s decision to rank you high. A slow website will drop further in 2021 than ever before.

If your current website hosting company provides poor performance and loading times then it’s time to move.

Possible Web’s managed hosting service offers unparalleled speed and access.

Unlike other providers, we don’t clump hundreds of customers onto one machine. Backups are saved to Amazon S3 storage and your site is monitored 24/7.

2. Optimize Your Images

Large images take time to load which delays the user from experiencing your site. One simple tip is to ensure you only serve the image that’s required.

Instead of hosting one massive photo for all screen sizes, your site serves variations. Only the one that’s needed arrives making the page appear in milliseconds.

Several plugins exist that do this automatically. Along with the latest version of WP offering lazy-loading, your site’s response times will only get better.

3. Remove Unneeded Plugins

Removing plugins often removes JavaScript files and libraries that clog loading rates. That’s especially important for reducing First Input Delay times.

Review all the plugins on your pages and uninstall any you find that impact FID.

4. Enable Gzip Compression

Server-level compression tools like Gzip will reduce the overall size of your website. That in turns speeds up Largest Contentful Print.

Plugins like WP Rocket automatically compress pages for you. You don’t need to know how it works, just that it does and helps your SEO.

5. Move Static Content to a CDN

A Content Delivery Network or CDN like Cloudflare can help reduce LCP if you have a global audience.

Static files get cached on cloud servers. That means customers see quicker loading times as they’ve already download those files.

The end result is a leaner, quicker service to deliver your content directly onto the user’s screen.

CARE + GROW = Perfect Web Vitals

Core Web Vitals will dominate search engine optimization throughout 2021.

Google aims to bring its users the best possible experience when they visit a site. Those that run slowly and take an age to load will fall down the rankings. But it doesn’t have to be that way.

Possible Web is fully versed in the latest search engine optimization techniques for WordPress sites.

As a leader in SEO, we understand how important these key metrics are. That’s why we build and maintain fast and effective WordPress websites that work every time.

We also offer several optimization services that will drive and convert traffic to your website.

Contact our offices in Charlotte today to discuss your requirements. Our experts will help guide you through the technical jargon to get the results you need.