Well, you can try wp rocket out, they should add some of these optimizations automatically. But you may need to use custom css as well like in my video depending on what is exactly causing the high CLS score on your site. As I showed in the video, please try to diagnose the areas in your site which are causing the CLS score to jump, then do accordingly. Hope this helps
@@ZoaibKhan recently i switch off optimize CSS delivery from wp rocket that solve some issue but created anotor one, if you can give some suggestions to pass core web vitals that would be great help
@@blurblopOfficial It's difficult to give general suggestions. For each of the issues in Page Speed Insights, there are specific techniques that we can try.
Hey Tasnim, I've just shown two common ways to resolve the issue. But different websites and themes have different issues - so it won't work in those cases or will require slight adjustments.
Every site will be different. Do you notice any layout shifts when reloading the site with Developer tools and Network as 3G ? That will give you an indication of what to fix. Mostly it can be fixed with giving a fixed height/width in CSS so it doesn't cause a layout shift while loading.
Glad you liked it :) About adsense, it's best to have fixed size formats, so that you can set a parent div and specific heights. This way, layout shift is minimized and the score won't be affected
Dear, Can you also help me understand that how to fix this issue - Image elements do not have explicit width and height and also how to reduce resources under - Serve static assets with an efficient cache policy tab
Hey Aashish, The first one is about using specific width and height attributes for images. If images don't have specific widths and heights, the browser adjusts the layout when they load which can take a while and can cause layout shifts. This is exactly why I set the height and width for the icons! For the cache, you need a CDN where your static assets can be cached, so it takes less time for repeat users. There're also caching plugins for wordpress which cache on the server.
@@ZoaibKhan Sure. www.abcfruits.net is the webiste. www.abcfruits.net/abcfruits/uploads/2019/09/ABC-Brochure.pdf is the pdf file that shows the CLS error. Especially in the mobile version.
The CSS needed will be according to your own specific site. The CSS I used here worked for me, you'll need to come up with the code yourself for your site.
Thanks !! plz do in-depth for Bootstrap websites on below topics First Contentful Paint Speed Index Largest Contentful Paint Time to Interactive Total Blocking Time Cumulative Layout Shift
plz reply should i use wp rocket as i have no knowledge of coding, or should i use the css code copying you,
Well, you can try wp rocket out, they should add some of these optimizations automatically. But you may need to use custom css as well like in my video depending on what is exactly causing the high CLS score on your site.
As I showed in the video, please try to diagnose the areas in your site which are causing the CLS score to jump, then do accordingly.
Hope this helps
google page speed shows CLS error with this "Main Menu"
what additional CSS i have to use for this?
I'll need more information than this to find out what's wrong. What's the website link?
@@ZoaibKhan recently i switch off optimize CSS delivery from wp rocket that solve some issue but created anotor one, if you can give some suggestions to pass core web vitals that would be great help
@@blurblopOfficial It's difficult to give general suggestions. For each of the issues in Page Speed Insights, there are specific techniques that we can try.
Boss after seen your video i'v tried to fix the avoid large layout shifts but i can't do that can you help me to fix it please?
Hey Tasnim, I've just shown two common ways to resolve the issue. But different websites and themes have different issues - so it won't work in those cases or will require slight adjustments.
Didn't work this think on my blog site Cumulative Layout Shift 0.46 how to reduce it ?
Every site will be different. Do you notice any layout shifts when reloading the site with Developer tools and Network as 3G ?
That will give you an indication of what to fix. Mostly it can be fixed with giving a fixed height/width in CSS so it doesn't cause a layout shift while loading.
Hi! Zoaib you explained it nicely. Please suggest when Adsense add do this how to controll that
Glad you liked it :)
About adsense, it's best to have fixed size formats, so that you can set a parent div and specific heights. This way, layout shift is minimized and the score won't be affected
Hi! Thanks for response nan you please make video how to do it
Dear, Can you also help me understand that how to fix this issue - Image elements do not have explicit width and height and also how to reduce resources under - Serve static assets with an efficient cache policy tab
Hey Aashish,
The first one is about using specific width and height attributes for images. If images don't have specific widths and heights, the browser adjusts the layout when they load which can take a while and can cause layout shifts.
This is exactly why I set the height and width for the icons!
For the cache, you need a CDN where your static assets can be cached, so it takes less time for repeat users. There're also caching plugins for wordpress which cache on the server.
Bro, It shows CLS Error for PDF files updated as specification sheet in the website. How to solve it?
Hey Murali!
Could you provide a bit more detail perhaps a link to the site so I can take a look?
@@ZoaibKhan Sure. www.abcfruits.net is the webiste. www.abcfruits.net/abcfruits/uploads/2019/09/ABC-Brochure.pdf is the pdf file that shows the CLS error. Especially in the mobile version.
Make a complete video on speed optimization and fix all issues like tender blocking resources
Remove unused css and js
Sure, I'll share as soon as I learn about them. It's pretty in depth stuff :)
do it for blogger website
Haven't worked on it, so can't say much. Principles should be the same i.e. look for obvious layout shifts and add styling/CSS accordingly
Hi Zoaib, could I hire you to help fix Core Web Vitals on my blog? Its a food blog called My Urban Treats. Thanks
Thanks for sharing! It's working
Great 👍
Great tutorial. Thanks for sharing. Kindly share the additional CSS code
The CSS needed will be according to your own specific site. The CSS I used here worked for me, you'll need to come up with the code yourself for your site.
Thanks for your sharing! I will try.
You can teach nicely. Carry on.
Thanks Odommo! :)
carry on will be got 1 million one day
Thanks Tayyab! :)
Really nicely explain, helpful
Thanks 🙏
Thanks !! plz do in-depth for Bootstrap websites on below topics
First Contentful Paint
Speed Index
Largest Contentful Paint
Time to Interactive
Total Blocking Time
Cumulative Layout Shift
Didn't work for me.
Thanks for the comment! Would you like to share what exactly didn't work?