I don't usually subscribe to anyone or recommend anyone but I like your approach to solving issues with Google. Thx for the insight as my struggle continues.
The site I'm currently building is relatively basic.. but jumps from 97 on google insights to 87.. then keeps fluctuating back and forth and I haven't changed anything. Very strange.
Hello, thank you for awesome video. But I have a question. In my case my LCP is my post featured image. I already added a class - "featuredimg" to it. I have wp rocket installed as well. My question how do I integrate this into your single line javascript code
Excellent video. But will this clash with Ezoic Leap? THey recommend to remove all plugins etc. Also how do you implement this code on Wordpress ( I have Astra theme) ?
Nice trick, bro! What about when I get issue for paragraph LCP? Do you have any trick for that? With your trick i fixed problem with background image, but i got new issue with paragraph () :)
For text, LCP is usually tied to CLS in that fonts are loaded afterwards and there is swapping of fonts that changes how much space the text takes up. It basically causes both CLS and LCP because LCP waits for the largest content to stop "changing". The best thing you can do is to use fall-back fonts using a font stack. Find system fonts that very closely match your chosen font, and then apply a system font fall back like this: font-family: "My Font", Calibri, Arial, sans-serif; Make sure the font immediately to the right of "My Font" is as close in size, weight, and spacing as your chosen font. If your chosen font is a sans-serif font, don't just look for a sans-serif system font. Look for any system font (serif or sans-serif) that matches as closely as possible.
I've not used Blogspot before. But if you can add CSS and JS to the site and it's got CSS background images, then you should be able to use this strategy.
Furthermore I was able to implement this really cool trick. There was rendering conflict with desktop/mobile and therefore I ended up excluding the script entirely (instead of delaying) from caching and it works perfectly now. EDIT: I ended up including the file as a part of the cache without exlcuding or delay.. works perfect!
I'm glad somebody mentioned Nitropack because this type of asset deferral is what they're famous for. But it generally isn't implemented artfully. This video has to be commended for providing artful options rather than just having things completely missing in one's design.
I like this, but you can do this better using the :not selector like this: html:not(.js-user-action) #div_xxxxxx { background-image:none; } You could also abstract this to a generall class or attribute.
ooh really , I thought in the first minutes that I will be hearing genius super solve for this issue and now talking about wp rocket.. it's not free dude 😎
Check the blog post for details on how to implement for free using a script I provide: propeldigitalmarketing.ca/improve-largest-contentful-paint-lcp-with-a-js-css-trick/
not really a "hack" just the appropriate solution, but I like your ladybug logo. real hack: have your content on a cached html, $(body).load() it upon user interaction or 5 seconds
Why did you stopped making videos? You are just GREAT!
We need a part two of LCP fix from you!
I don't usually subscribe to anyone or recommend anyone but I like your approach to solving issues with Google. Thx for the insight as my struggle continues.
Excellent tip to improve LCP, thank you very much :-)
The site I'm currently building is relatively basic.. but jumps from 97 on google insights to 87.. then keeps fluctuating back and forth and I haven't changed anything. Very strange.
Hello, thank you for awesome video. But I have a question. In my case my LCP is my post featured image. I already added a class - "featuredimg" to it. I have wp rocket installed as well. My question how do I integrate this into your single line javascript code
Excellent video. But will this clash with Ezoic Leap? THey recommend to remove all plugins etc. Also how do you implement this code on Wordpress ( I have Astra theme) ?
I'm also using Ezoic Leap. I have found WP Rocket to be better than Leap.
Have you fixed your LCP issue? If so, how?
Nice trick, bro!
What about when I get issue for paragraph LCP? Do you have any trick for that?
With your trick i fixed problem with background image, but i got new issue with paragraph () :)
For text, LCP is usually tied to CLS in that fonts are loaded afterwards and there is swapping of fonts that changes how much space the text takes up. It basically causes both CLS and LCP because LCP waits for the largest content to stop "changing". The best thing you can do is to use fall-back fonts using a font stack. Find system fonts that very closely match your chosen font, and then apply a system font fall back like this:
font-family: "My Font", Calibri, Arial, sans-serif;
Make sure the font immediately to the right of "My Font" is as close in size, weight, and spacing as your chosen font. If your chosen font is a sans-serif font, don't just look for a sans-serif system font. Look for any system font (serif or sans-serif) that matches as closely as possible.
Do you take up optimisation jobs for non-techies? We would be happy to use your services
Can you please make a tutorial to improve CLS issue as well? You're teaching is awesome
Yes, I'll work on something.
@@propeldigital thank you.
*Can the Source Code be used on **#Blogspot** ?*
I've not used Blogspot before. But if you can add CSS and JS to the site and it's got CSS background images, then you should be able to use this strategy.
Hi Chris, awesome video, btw the custom scripts you've made is this also working on other platforms like wp or shopify?
Yeah, they should.
what hosting are you using for this website?
We're using High Frequency Vultr servers. Highly recommend!
Great, But very difficult to understand!!! I'm not a programmer, so how to do it?
Sorry, it's not really something that's meant for non-technical people.
That sounds like a great idea.. but also like a cheat ?... btw do you have a way to add this to elemeotr as well ? .. But very nice
where to put this code in wordpress ? bro please reply
The full instructions can be found here:
propeldigitalmarketing.ca/improve-largest-contentful-paint-lcp-with-a-js-css-trick/
Have you ever heard of or used Nitropack?
Furthermore I was able to implement this really cool trick. There was rendering conflict with desktop/mobile and therefore I ended up excluding the script entirely (instead of delaying) from caching and it works perfectly now.
EDIT: I ended up including the file as a part of the cache without exlcuding or delay.. works perfect!
I'm glad somebody mentioned Nitropack because this type of asset deferral is what they're famous for.
But it generally isn't implemented artfully.
This video has to be commended for providing artful options rather than just having things completely missing in one's design.
I like this, but you can do this better using the :not selector like this:
html:not(.js-user-action) #div_xxxxxx {
background-image:none;
}
You could also abstract this to a generall class or attribute.
Yeah, great idea!
Did you used to skate?
As a kid, I used to. As an adult, not so much.
ooh really , I thought in the first minutes that I will be hearing genius super solve for this issue and now talking about wp rocket.. it's not free dude 😎
Check the blog post for details on how to implement for free using a script I provide:
propeldigitalmarketing.ca/improve-largest-contentful-paint-lcp-with-a-js-css-trick/
not really a "hack" just the appropriate solution, but I like your ladybug logo.
real hack: have your content on a cached html, $(body).load() it upon user interaction or 5 seconds
Yess
Dude, you found this before I even published or shared it to the group! Those are the perks of turning notifications on! LOL
Could you be my best friend 😉 seriously I can't get over 80 for mobile
I give up