Up next in 10
How to Optimize LCP (Largest Contentful Paint) Score in Blogger _ Core Web Vitals
721 views
Jan 24, 2024
In this tutorial video, viewers will be guided on how to optimize the LCP (Largest Contentful Paint) score in Blogger, focusing on improving Core Web Vitals. Released in 2023, the content offers a step-by-step guide, making it accessible for both beginners and experienced Blogger users. Whether you're a blogger, website owner, or someone concerned about optimizing your site's performance, this tutorial provides practical insights and clear demonstrations on enhancing the Largest Contentful Paint score. Learn how to improve Core Web Vitals in Blogger and create a more efficient and user-friendly experience for your audience with the guidance provided in this tutorial.
View Video Transcript
0:00
Hi everyone, welcome to Kitu Blogging and in this video I will show you how you can fix
0:04
LCP issue or largest contentful paint issue in your blogger website. So in the last video we have discussed how you can fix CLS issue where I have explained how we can
0:14
remove the custom fund or custom Google font and use the system font to fix CLS issue
0:21
So you can also fix that LCP issue as well if we use system fund instead of Google font
0:26
So, I recommend you to watch that video, so it will both solve the CLS and LCP issue as well
0:35
So by default it is set to all. So here you can select the LCP here and as you can see that these errors are causing the
0:42
LCP in our website. So if I click on here, it is saying that reduce on you JavaScript and there is eliminate render
0:50
blocking resources and there is reduce initial server response time. So let me just explain what is LVAScript
0:56
So LCP is the time required for the browser to render the largest images or largest text
1:03
block within the viewport. So if you maintain the LCP of 2.5 or below then it is considered as good and if you maintain
1:12
the LCP between 2.5 to 4 seconds it is added in the needs improvement and it is above
1:19
4 seconds then it will count as 4. So when you open a block page it will first render the top section
1:26
And if you scroll down below the page, then it will start showing the later paragraph
1:32
and images. But it will count the fast section or the viewport section
1:37
Here if there is no images, then it will count the text blog and if there is an images, then
1:42
it will count the time required for the browser to render that images
1:47
So how you can fast track this process? Then if you are using a custom font, then you have to remove the custom font and use the system
1:54
font so that it will not take time to render the text as well
1:59
And if you are using images, then you have to compress that images and load the images
2:04
faster so that it will improve the largest contentful paint or improve the LCP score of your website
2:11
And if you are using images like JPG or PNG then I recommend you to use images like WebP format So I have already made a video on how to use WebP format in blogger website
2:23
So you can watch this video as well. So let's take how you can fix this issue as well
2:29
So here it is saying that reduce on your JavaScript. What JavaScript do is it will, when JavaScript is rendering in the browser, it will block the
2:38
loading of the images and text in the website. until the JavaScript is parsed by the browser
2:45
So you can reduce the unused JavaScript. Means this JavaScript are not using
2:49
So we can simply remove this and fix this issue. So here in Blogger you will see this type of error like Recapture
2:57
So this happened if you are using comments. So let me just show you
3:02
So let me just go to the blogger dashboard here and I will click on Settings here
3:08
And let me just scroll down here and you will see this option comments. And here you will see this option Reader's Comment Captcha
3:15
But you will not see this option to turn off these settings. So what I can do is let me just click on hide here and let's click on save here
3:23
Now you will see this option to close the comment capture. So let me just close it here
3:29
Now let me just enable it again. Let's click on Save here
3:34
Now probably the recapture problem will be solved in this website. And in some cases, still the recapture is loading, then you have to disable the command altogether
3:45
You can simply click on hide and click on save so that it will solve that recapture issue
3:50
Or you can use the pop-up window so that it will load the command system in a pop-up window
3:56
and it will not affect the main page. So you can also do that
4:01
So there is one more setting image light box. Make sure to turn this up
4:06
So that it will also reduce the number. number of JavaScript in the website
4:11
So let me just return this again. And let's check if the recapture problem is solved or not
4:18
So let's wait. As you can see that, the score is improved
4:22
Now let's click on the LCP here. And I think that recapture is still there It can only be solved if we remove the comment section And there is this bootstrap and everything
4:38
So let me just simply remove this here again. So I will go to settings here and let me just hide the comment section
4:48
And let's save here. Now let's read on this test again. And as you can see that the score improved significantly
4:57
So, the blogger comment system is loading a lot of unnecessary JavaScripts and if you turn
5:04
off the comment section then here you can see that this pay score improved from 75 to 94
5:10
But in some cases you can disable the comment system because it is required in the block
5:16
website but if you want to improve the block loading speed then you have to turn up here or
5:21
you can use that option pop-up window. So the comments will open in a pop-up window instead
5:27
Instead of embedded so that it will reduce the unused JavaScript in the website
5:33
Now let's click on here, LCP and there is still the eliminate render blocking resources
5:40
So we can preload this CSS, so let me just copy here or you can delay the loading of the CSS as well
5:48
So let's go to theme here and let me just edit HTML here and under the head let me just preload
5:56
that CSS so I will type like link h style seat and I will add like HREF and I will add
6:14
the CSS code here and I will add like real equal to reload like this
6:23
close the tag like this. So it will preload the CSS file for us. So let me just save here
6:33
Now we can also fix that wizard.js issue as well. So what I can do is I will replace the body
6:40
tag with this code So let me just simply do that So I will replace it here and let save the code So if you don know how to fix wizard I have already made a video on that
6:55
So you can watch that. So let's go to the website and let's yze it again
7:03
And let me just scroll down here, click on LCP and here as you can see that it is still there
7:10
So in that case you have to delay the loading of this style sheet
7:15
And here you will see this option reduce on use CSS. So I recommend you to use SVG base theme so that you will not have this problem
7:25
And there is one more thing. If you are using Adsense, you may have seen JavaScript error as well
7:32
For that you need to lazy load the AdSense code. And if you are using ytics code, then you have to leasy load the ytics code as well
7:39
So that it will improve the page loading speed. So I have already made a video on this
7:44
So you can simply search for like lazy load adsense to blogging
7:56
And here you will find this video. How to lazy load adsense in blogger
8:01
And if you want to use lazy load in a WordPress, then you can also watch this video as well
8:07
So let's click on here. And here I have also added the playlist link
8:14
So let me just go to the channel here, let's go to the playlist and here I have added the
8:22
page speed improvement playlist. And here I have explained how to fix different issues in your blogger website and improve the
8:30
blog loading speed. Here you can see that there is the lazy loading ytics video here, there is lazy loading
8:36
ad sense here and I can fix avoid excessive DOM size, how to fix image width and height problem
8:43
So go through this playlist and improve the blog loading speed. So I hope this video helps you fix the LCP issue in your blogger website
8:53
And if you have any doubt regarding this, then you can ask me in the comment section
8:57
And if you found this video helpful, then make sure to hit the like button
9:01
And if you are new to this channel, consider subscribing. And I will see you in the next one
9:06
Thank you