Core Web Vitals: Guide to Quickly Increase Page Speed by 10X [+Video]

Core Web Vitals - A Guide to technical SEO for Better Search Signals

What is Core Web vitals? 

Core Web vitals is a Google Initiative to provide unified guidance for quality signals that are essential for a better web browsing experience for the users.

Core Web vitals are guidelines for web pages that apply to site owners and each Core Web vital shows a measurable user experience

Google Core Web Vitals Focuses on the following three metrics 

  • Largest Contentful Paint Element (LCP) measures how quickly the page loads i.e Loading Time of Page
  • First Input Delay Element (FID) measures how soon one can interact with the page i.e Interactivity. 
  • Cumulative Layout Shift (CLS) measures how stable the page is as it loads and as the user is interacting with it. 

Page Experience Ranking Factors 

A combination of Core Web Vitals metrics and search signals are termed Page Experience ranking factors. 

Search Experience Signals Includes :

  • Mobile Friendliness
  • Safe Browsing
  • HTTPS
  • Compliance with Google Widelines

In short, Google Uses a page experience set of metrics for determining the search rankings. 

Always remember – Mobile and Desktop experiences are separated. 

Now that we know about the Core Web Vitals, let’s see how can we measure them?

SEO Tools Check the Core Web vitals of your website

To audit your Core Web Vitals, you can use any of the following Fre SEO Tools

1. Google Search Console

Google Search Console is a free SEO tool and has a new Core Web vitals report that takes data from Chrome UX reports. 

There is a Core Web Vitals Report that you can refer to – as shown below

Core web vitals can be measured using Google Search Console

Google Search console calculates the LCP element, FID, and CLS of the web pages. 

One thing to keep in mind is that you need enough data for the website for this report and the web pages with insufficient data will the omitted for the report. 

2. Google PageSpeed Insights

Another tool that Google provides to calculate the Core web vitals is Page Speed Insights by Google, which helps with Website performance optimizations

PageSpeed Insights will report on the performance of a particular URL

It can give mobile vs desktop performance views and tells

a. What your Users are experiencing

b. Diagnose the Performance issues

See below :

Core web vitals

3. Web.Dev

core web vitals

Web.dev employs Google Light House to measure the quality of the website. 

When you enter your URL in the tool, it will create a detailed report of the issues and give you tips to fix them. 

Core web vitals

4. Web Vitals Extention ( Chrome Extension)

Web Vitals is an extension available for download on the Google Web store.

This chrome extension uses the web vitals library.

core web vitals

Once installed it can provide the report on web vitals for any webpage with field data from the Chrome User Experience report

To access this report, go to any website you want the report on and then click on the extension. 

This Video Covers the Basics of Core Web Vitals

Tips to improve your Core Web Vitals

Having a website that loads quickly and smoothly is important for keeping visitors engaged.

Google has identified three key metrics, known as “core web vitals,” which are essential for measuring website performance.

Here are some tips for improving your site’s core web vitals:

1. Preload Key Resources to Speed up Visual Load Times

When you access a web page, your browser requests the HTML document from a server, parses it, and sends separate requests for any resources that are mentioned in the document. 

Loading these resources may take time and impact the LCP of your website. 

To overcome that you can preload the important resources ( like the banner image above the fold) so that the browser can retrieve them before the browser would otherwise find them.

To do this you can use this preload command in your HTML document. 

<link rel=”preload” as=”script” href=”critical.js”>

2. Implement Lazy loading

Website loading time is critical not just from the SEO point of view but from the UX/UI point of view too.

 If a website takes too much time to load, the visitor may leave the site. 

However, with limited resources, loading the content on the web page within milliseconds is not possible. 

Lazy loading solves this problem as it enables the website to load only the necessary content first, then wait for the user to request the rest of the page’s content.

The browser loads only a portion of the page content at a time, reducing its time to open a website.

3. Optimize and compress images

Images are one of the bulkiest content on any webpage and if not optimized can lead to slow loading speed. So to improve the vitals of your website, optimizing the images is crucial. 

To optimize your images for a  website, use lighter image formats. For example, JPG is better compressed and loads faster as compared to PNG. 

There are a few others, such as JPEG XR and WebP, although they aren’t supported by all browsers.

Additionally, compress your images while uploading them on the website to reduce loading time. 

To manually compress your images you can use Compressor.io

You can also use plugins on your WordPress site to automatically compress images. 

4. Improve your server response time for better Website Uptime

Server Response Time is the time between a client requesting a page in a browser and a server replying to that request. Ideally, this response time should not be more than 200 milliseconds.

Following below can helo you improve your server response time

a. Reliable Web hosting service

A reliable hosting service that provides you with high-performance servers. 

Stay away from free hosting, and insufficient hosting services with little or no support

For WordPress websites, we recommend GreenGeeks Hosting

For large WordPress sites, check Kinsta Managed Hosting

Consider reading: 9 best cloud hosting services for your Website

b. Using Content Delivery Network ( CDN)

A CDN is a geographically distributed collection of servers that work together to provide content as rapidly as possible.  

Slow web page load times are caused by a hosting server that is located far away from the target audience. By reducing the distance between your hosting servers and your visitors, you can improve your website loading speed. 

There are two options when it comes to a CDN, you can either use a Free CDN or invest in a paid service. 

Free CDN is good for small websites with low traffic. However, if you have a business website that receives a large volume of traffic from across the world, consider the paid services. 

Cloudflare is a CDN service provider which has free as well as paid plans

If you use GreenGeeks as your hosting platform, Cloudflare CDN will be integrated with it for free and you can enable it in a few simple steps. 

5. Resize the YouTube video you want to display

Similar to images displayed on our website, the size of videos embedded on your website will impact the website vitals. 

You should adjust the height size attributes for your videos

A small embed video size will conserve your resources and help the page load faster. 

You can find the embed code for any Youtube video, by clicking on “Share

core web vitals

Click on “Embed”

core web vitals

You can resize the video by editing the “Width” and “Height” in the video embed code and pasting the code on your website. 

core web vitals

Additional tips on how to improve your website

In addition to working on Improving the Core Web Vitals, you should:-

6. Remove unused Javascript and CSS Files

Minify these Javascript and CSS Files. For WordPress users, WP Rocket can help immediately

7. Make your website Mobile Friendly

Since most Internet users use mobile to surf the internet, making a website mobile-friendly is important. 

You can use the Google Seach console to get the Mobile Usability report. 

See Image below :

Google Search Console to show the Mobile-Friendly Pages

This report will show you a list of affected URLs for each issue, such as content that doesn’t fit the screen and text that’s too small. You can accordingly make the changes 

8. Create and Optimize XML sitemaps

Sitemaps are essentially a map of your website and submitting an XML sitemap to the Google search console will make it easier for your website to get indexed faster on the Search engine. 

Click here to learn about Creating and optimizing your sitemaps

9. Install SSL certificates

An SSL certificate is a piece of code that protects online communications on your web server. It’s similar to putting a stamp on a letter before sending it through the mail. Having an SSL certificate makes your site secure and more credible for a search engine. 

For DML, we have a secure HTTPS Connection :

core web vitals

Usually, you can get a Free SSL certificate when you buy a Domain from your domain provider.

GreenGeeks WordPress Hosting Comes with Free SSL Certificates for 3 yrs. 

Check out the GreenGeeks Hosting plan

10. Optimize Site Architecture

There are several pages on your website and these pages must be arranged in such a way that search engines can find and crawl them effortlessly. 

That’s where your website’s structure, often known as its information architecture, comes in.

Make sure your business’s most significant pages are at the top of the hierarchy and related pages should be grouped. 

The below image may help :

core web vitals

Improving the website’s overall performance

Core Web vitals are just an indicator of your website’s overall performance. 

To optimize your website you need a holistic approach to SEO, which includes On-page SEO, Off-page SEO, and Technical SEO. 

Consider using some cheap seo tools for better SEO Results. 

We strongly recommend using SE Ranking as it is cheap and comes with a complete SEO package sufficient for all SEOs

Learn more about Off-page SEO 

FAQs – Core Web Vitals

How do I increase Core Web Vitals in WordPress

To optimize your core web vitals for a WordPress website, you can use the WordPress Caching Plugins: Nitropack or WP Rocket

Nitropack is a performance optimization service that has everything you’ll need for a super-fast website-  Image optimization, code minification, caching, content delivery networks (CDNs), lazy loading, etc. For Beginner,s they offer a Free version and it should be sufficient when you are just starting up 

WP Rocket is also a WordPress Cache plugin that can significantly improve your Google Core Web vital metrics. It is cheap and starts for as low as $49/Year. 

How do I fix my LCP

To resolve your LCP issue first you have to identify the URL(s) in your website that are contributing to LCP being more than 2.5 sec.

For this, you can refer to the Core web vitals reports on the Google search console.

Once you have identified the URL(s), test these URLs to find the elements with the largest load time.

Use Page Speed Insights to find these elements and you will get a list of suggestions that you can implement to fix your LCP.