How to improve Google Core Vitals of your website ?


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
Define Rating Scale and it’s characteristics
Q. Rating Scale and it’s characteristics

Definition
Rating scales are for rating each of the characteristics or activities one is seeking to observe or assess.

Read full article
Scope of multicultural education
Q. Scope of multicultural education

Five approaches to multicultural education:
a. Advocates of the Teaching the Culturally Different approach attempt to raise the academic achievement of students through culturally relevant instruction.

Read full article
Explain Questionnaire
Q. Questionnaire and it’s characteristics

As per Good & Hatt – “In general, the word Questionnaire refers to a device for securing answers to questions by using a form which the respondent fills in himself.”

Read full article
Define Psychological Tests and list different types of tests
Q. Psychological Tests

These tests are the tools of guidance which help the teacher to understand the weaker and stronger points of the students. Individual differences which are the heart of guidance are measured by the test.

Read full article

Some important study notes