Select Page

Supercharge Your Website with Core Web Vitals

by | Jan 28, 2021 | Digital | 0 comments

Google is in the process of improving its Core Web Vitals as a part of its new search engine algorithm, and it is expected to roll out the same by  May of 2021.

What are Core Web Vitals?

Core Web Vitals are a set of specific metrics that google considers important in a webpage. It aims to improve the overall experience of a user. Our analysis on Core Web Vitals (CWV) also includes other Web Vitals like the FCP (First Contentful Paint). But before we learn more about Core Web Vitals let us have a glimpse into Web Vitals (WV). Although some marketers use CWV and WV synonymously, it is technically not correct to do so.

Web Vitals include many other metrics like:


  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Total Blocking Time (TBT)
  • Time to Interactive (TTI)
On the other hand, CWV currently comprises 3 fundamental metrics that can be measured on a website:


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

Each of these metrics will represent a specific dimension of a user’s experience and they are all user-centric metrics. As per Google, Core Web Vitals will evolve by adding new metrics. Core Web Vitals will function as a quality signal by May 2021. Google states that “A page passes the Core Web Vitals assessment if the 75th percentiles of all three metrics are good”.


Largest Contentful Paint (LCP)

LCP is a measure of perceived load speed and it refers to the loading time of the largest element in the viewport. According to Google, LCP marks the point on the page load timeline when its main content has likely loaded. In most cases, this will be an image.

First Input Delay (FID)

FID is a measure of interactivity. It tells you when the site is ready to interact with a user/visitor. Google chooses a top-down and almost paternal approach for its CWV. Google states “We all know how important it is to make a good first impression”. This shows that Google cares whether webmasters are aware of how to behave towards users.

Cumulative Layout Shift (CLS)

CLS is a measure of visual stability. It indicates whether the page elements shift around in an abrupt way while the page is still loading or when it is ready to interact. While LCP and FID deal with total page speed, CLS ensures websites do not use interstitials and ensure images are loaded and displayed correctly instead.

Here is a checklist of 28 action items to refine your website and to prepare for the inevitable introduction of the latest ranking variables in Core Web Vitals.

Image Optimization

Images are one of the main controlling variables in the web center. The time before some initial rendering is determined by all the web vitals, and loading images is the largest source of delay until a page is loaded. Thus, image optimization appears to be the most effective method to improve core site vitality. Here is how to do it.


1 Reduce the Background Images Measurements

For a web design, background images are rarely required, and they can be a major source of delay when first loading a page.

If you are using a background image, decrease the size of that image and optimize it so that it loads as fast as possible.

2 Minimize Background Images with Patterns

Replace the image with flat colors, a gradient, or even a simple tiled pattern if you’re not bound to a particular background image.

Again, the goal is to minimize the load of assets before the website is first loaded.

3 Remove Images on Mobile Above the Fold

In the mobile world, the nature of cell and wireless signals, and the mobile browsing experience are always slower than desktop browsing. Mobile devices are most vulnerable to initial input delays and changes in the material.

Large Images and displays over the fold are particularly harsh on your score so you can remove them.

4 Implement Lazy Loading

A common technique for speeding up the initial load of any given page is lazy loading. It’s no wonder that it is fast becoming a default feature with Google’s latest metrics on the horizon. Use lazy loading for any content that does not have to be loaded over the fold, especially images.

5 Use WebP Images

Another Google project, WebP was created in 2010, as a new image format. It is smaller than the traditional PNG image formats with better compression algorithms.

As both users and search engines are concerned with speed and load times, WebP is becoming more and more useful. You can use WebP images as your primary image files more or less.

6 Optimize Image File Sizes

The default to optimize photos for web use is to use a tool to crunch or smush image files to be smaller in the file size. If you do not already do so, you must ensure that you have a way of editing photos in your blogging workflow. To avoid layout changes, you may also want to make sure you have specified the height and width of the photos.

B CSS optimization

CSS has become an even more important feature in many website designs, which makes it almost impossible to block it. With so many CSS-based sites from color to the venue, it’s more important to ensure that code is optimized.


7 Inline Critical CSS

Every bit of your CSS needs not to be lined up, but this does work as well. You want to include in particular CSS which is important for your theme’s design and layout.

This minimizes the number of files a browser has to call from your server to load the template and paint the original content on your website.

8 Minify CSS

By default, CSS is a minimally user-friendly language, and it can function very well without spaciousness, indentation, comments, or other text. Run it through a tool before uploading new code to your site to uninstall all the excess jam that has a microscopic yet tangible effect on the loading of the website.

9 Consolidate CSS Files and Code

You can be tempted to save CSS in a variety of files and scatter your code. Recall; as a developer, the easiest is not always the fastest for a user. Merge and execute only particular elements if necessary, inline or in separate files.

10 Optimize CSS Delivery

To format it all, conventional web design loads the structure for the site, then the text, then the CSS. This delays loading, especially when CSS is stored in an external file. A technique suggested by Google is to force the browser to load the CSS and have it ready.

C JavaScript optimization

One of the greatest causes of code bloat and delay in loading websites is JavaScript. It can be amplified to optimize the JS on your web, even though it doesn’t seem to have a lot of impact on what you do to it.


11 Minify JS Scripts

Like CSS, JavaScript needs no extra spaces and breaks. There are no wordy names required, which is good for development, but it can increase the size of the scripts.

Before uploading them to your web, run your scripts through a minifier.


12 Consolidate and reduce the use of scripts

For years, web designers have been using JavaScript for features in HTML5 and CSS3. A revamp or review of scripts may help find alternative and faster ways to do the same things, especially on older websites.

Review and optimize as much JavaScript as you can from your pages.

13 Scripts Defer or Async Wherever Necessary

If a browser needs to render a JS script, it must be processed by that script before the page can begin to be loaded. As several developers insert scripts in their headers, the page is delayed in loading.

Defer allows the browser to load the page before the script is executed, while async enables them to load at the same time. Using these two features helps you to offset the script-inherent delay and speed up your initial page loads.

14 Remove jQuery Migrate

A recent jQuery update has resulted in many old plugins and scripts not working anymore. The Migrate module was introduced to buy time and webmasters to upgrade their pages. This is a translation module that allows old jQuery to work on sites that are using a newer jQuery version.

You aim to end the use of the Migrate module because it’s very bulky and can slow down websites.

15 Whenever possible, Use Google Hosted JS

Google provides many standard libraries hosted on its servers. Use Google’s versions for the quickest load times, do not depend on a third party, or try hosting them yourself for libraries.

D Video optimization

The average site is popular with videos from core content elements to video advertisements and everything between. Even with partial loading and modern video buffering, they’re still large files. Optimize the use of video as much as possible.


16 Using Video Thumbnail Picture

Many users do not want to view videos, so it is pointless to force videos to load in the background. A picture position holder where the video is usually loaded is a good way to operate.

The photo loads quicker and looks like a loaded video player. If a user clicks to start the video, the loading of the video begins but no video file or player is required until then.

17 Minimize Videos Above the Fold

Video files are heavy as with images, so loading them above the fold is a guaranteed delay on your first painting of material. Push them under the fold; before they get to the video anyway, most people want to read a title and an introduction.

E Font and icon optimization

Fonts and icons used on a site’s load times can be much heavier than you would expect. Optimization may be minor stuff, but you may wonder why you have never done these stuff before when you see the effect they can have.


18 Preload Fonts

Like scripts, font loading takes priority and stops the rest of the code from rendering when the site asks for a font it has to load.

19 Only Use Fonts You Need

Many web fonts and font families load their entire sets and stylesheets on call, although 90% are not used on the website. If you use small quantities of a given font or font with a particularly broad character set, it may be worthwhile.

20 Use SVG Whenever Possible

SVG’s or Scalable Vector Graphics is a way to create small elements of a page that can be controlled and much more than typical fonts and icons. Switch to using SVGs rather than your normal icons if possible.

F Server optimization

Nothing matters if your server is slow, irrespective of how much optimization you make to your website code, pictures, or other elements of your site. Changing or upgrading hosting to a faster infrastructure can be worthwhile.


21 Upgrade to a Faster Server

You don’t need to upgrade from a shared host to a host, but it can help with some speed problems in popular hosting. It can be a good use of a budget even to upgrade from a slower plan to a better one.

22 Use Content Delivery Network

In almost every case, modern CDN can handle most of the elements of your site faster than your average web host can. For your photos, videos, and other multimedia, consider using a Content Delivery Network.

23 Preload DNS Queries

DNS queries of preloading or prefetching to reduce the time between visitor requests and the display of the asset. This pairs with the CDN load and fix the domain of the CDN until it is first requested, further accelerating page load times.

24 Preload Your Cache

When the first user arrives to access the page, a cache plugin or script used on a website is also activated. This first visitor has a slower experience, but it loads cache the page until the cache expires. You can do this by preloading the cache from your website, which guarantees that Google’s next visit is a quick-load website.

25 Consider a Server-Side Cache

To further speed up the generation and serving of a cached version, software like Varnish Cache functions like a server-side cache that allows as many servers call as possible to be carried out as possible.

G Additional optimization

Anything that did not suit another class can be added here. For your web design, these extra optimizations might not apply, but if they do, it can be a great boon to take care of them.


26 Minimize Third-Party Scripts

In 2021, webmasters will have to balance the optimization of site speeds with resources to include the customer. Reduce them as much as you can, and strive to find each of the fastest variants.

27 Avoid Pre-Load Filler

For sites with slower load times, a common strategy is to add a spinner, a loading icon, animation, or some type of content to inform the user that the site is actually loaded.

While this can help reduce bounces, it’s a huge hit to the initial loads measured by the core web vitals. Remove these and work so that you do not need them to speed up your site.

28 Consider a Site Redesign

If all is said and done, you need to make so many improvements to so many of your site’s foundational features that you can scrape off your current design and create a new one with the saving of speed.


Take it into account and examine the gains from optimized core web vitals. Nobody knows still how important the algorithm will be, but improving them will definitely not hurt.

But agencies and marketers are likely to schedule themselves for March and April when consumers and managers urge them to “fiX tHe cOrE wEb viTals,”!

Leave a Reply

Your email address will not be published.

about us

AiPlex was established in the year 2003 and is currently one of the most respected Online Reputation Management, Content Protection, and Digital Marketing Solution companies.

Recent posts

Data Analytics & Content Marketing- What’s the Connection?
Data Analytics & Content Marketing- What’s the Connection?

Content is King - But only when interpreted and tracked appropriately. However, many content marketers are still in the process of realizing the importance of data-driven content strategies which can raise the bar for their company. In today’s fast-paced corporate...

The Top 5 Strategies to Rank High for Voice Search
The Top 5 Strategies to Rank High for Voice Search

If given an option to be lazy or active, both providing the same results, what would you choose? Most of us would opt to be Lazy! That is us! When we can just ask and get results, why waste energy in typing it, right? This trend started in 2011 by Google when they...

Facebook Takes Meta Approach to Reputation Management
Facebook Takes Meta Approach to Reputation Management

We have some news — Facebook has changed its name. No, not the app; we’re talking about ”Facebook” the parent company that also owns Instagram and WhatsApp. Facebook has shocked the whole world by announcing ‘metaverse’ — a never-seen-before VR universe that we’ve...