How to improve Google Core Vitals of your website ?

by Yuvi - June 20, 2021

Google Core Web Vitals of your website

Google is updating its policy and introduced core vitals, these are related to user experience and are important now a days to keep google ranking of the website.

The main core vitals are:-

First Contentful Paint (FCP)

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

First Contentful Paint (FCP) – is the measure of time from which content start appearing visually on the page. It should be well, below 1.8 seconds. Server resources play main role in this, also if there are some errors in the codes they can also increase this time.

Largest Contentful Paint (LCP) – This is the largest element in the view port. It can be a image or a text block. If it is an image then preloading that respective image most of the time solves this issue, and if it is due to text block then check if fonts are loading properly and preload fonts. Try to avoid large blocks/sections in above the fold section. Ideal value for LCP is under 2.5 seconds after a page first starts loading.

First Input Delay (FID) – It is a measure to check how quick a web page become responsive to user interaction. Ideal value for it is 100 milliseconds or less. It is more related to user experience.

Cumulative Layout Shift (CLS) – CLS is a visual stability measurement of a page. It is related to user experience, and it should be 0.1. or less for a better user experience.

Now as we know what are the core vitals, we need to know who we can fix them to keep them in green scores.

Some of the steps we can take to fix core vitals are as below:-

Use best possible server resources and a better hosting server. It will help to improve core vitals.

Preload first image of the page and fonts. It will help in improving LCP and FID.

Use width and height attributes in image tags. try to load critical CSS in the head and avoid using too many CSS for sizing text and use common CSS for all font sizes. It will help to improve CLS and will result in a better user experience.

In WordPress website we can use certain plugins for removing render blocking resources by loading them asynchronously  or deferred loading. You can also do it with some custom codes which you can add in the WordPress theme. One example for preloading featured image is as below:-

Add this snippet to the head section in the WordPress theme  header.php file to preload featured image on every page/post.

<?php $attachment_image = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

<?php if(!$attachment_image=''){

<link rel="preload" as="image" href="<?php echo esc_url( $attachment_image ); ?>">

<?php }?>

This block of code will check if the page is having any featured image and if found then it will add a preload link in the header and it will help to improve LCP.

To defer scripts we can use this block of codes in function.php of current theme used in the WordPress site. Always add such modification codes in child theme to avoid any loss of codes at the time of theme updates. Adding a child theme in WordPress is easy.

function yu_js_defer_attr($tag) {

if (is_admin()) {

return $tag;

}

$scripts_to_exclude = array('jquery.js'); // add a string of js file e.g. script.js to exclude from defer
foreach($scripts_to_exclude as $exclude_script) {

if (true == strpos($tag, $exclude_script ) )

return $tag;

}
// Defer all remaining scripts not excluded above
return str_replace( ' src', ' defer src', $tag );
}
add_filter( 'script_loader_tag', 'yu_js_defer_attr', 10);

This block of codes will add defer attribute in all java script file links excluding the files which we have mentioned in exclude list above. It will help to remove render blocking scripts.

There are many other work we can do like optimize all the images. minify files and codes. remove any unused files/scripts/codes.

A well optimized site always get better traffic and a good google ranking and better SEO.

A user always prefer to visit such sites.

google core vitals in green

Gtmetrix Reports

gtmetrix report of yogiraj.co.in in green A+ scores

Share on: Share YogiRaj B.Ed Study Notes on twitter Share YogiRaj B.Ed Study Notes on facebook Share YogiRaj B.Ed Study Notes on WhatsApp
Latest Posts

Tables 11 to 20

March 11, 2024

Tense Chart

December 22, 2023

Table of 13

December 20, 2023

Table of 3

December 19, 2023
Search this Blog
Categories

Some important study notes