Ideas to decrease LCP
Hi all,
We’ve been working on improving our LCP for a few months with minimal impact. Here is the page we are working on:
https://pagespeed.web.dev/analysis/https-www-get-it-job-sr-client-success-manager-remote-wfh-in-chicago-il-at-get-it-recruit-administrative-515569217446084760/nveiq6wgyu?form_factor=mobile
Yes, I’m sure there is little chance someone will look and see some obvious improvements we could make but I figured it can not hurt to ask.
So with that said if you do have any ideas please let us know we would love to get over the hump here and have our shiny new nuxt 3 front-end “all green” on code web vitals.
- Jake
19 Replies
manniL thanks for the quick response! So we can’t remove all the scripts, but this sounds interesting. At first glance this is a module to better handle third party scripts? I’m assuming it somehow moves them out of the main thread…
Either way very cool we will 100% check this out and note back here the results. Any other ideas are welcome. We want a lightning fast page load.
"move them out of the main thread" is more like https://partytown.builder.io/
but useScript / nuxt/scripts is "another" way to deal with the problem of tracking 😂
Yes, sorry you’re right. In fact we looked at that sometime ago and for reasons I can’t recall now passed on partytown.
@elizeorocha let’s try this tomorrow
@manniL / TheAlexLichter any idea why the score is so much lower on the mobile view?
because mobile is less forgiving when testing (higher throttling etc etc)
Got it. Is there anyway to reduce the mobile payload in some way to compensate?
Are you aware you're loading two GTM containers?
Your main issue is the ads, you should consider either lazily loading them in after some idle timeout or removing them all togethor. Although I think either will be a hard sell for the business 😛
@harlan okay great feedback. No I don’t believe we were aware of the dual GTM load, how did you see that by the way (maybe that can help us fix it). With the ads, unfortunately we can’t turn them off, agreed it would help! I think the question is can we somehow prioritize the render delay in some way that’s it’s less or not blocked by them at all.
I did add a request to see if Adsense code/scripts can we added to scripts.nuxt as I’m sure that would help (us and others)
@harlan, @manniL / TheAlexLichter Hi everyone,
I'm having trouble installing nuxt/scripts. The process seems straightforward, but I'm running into issues that I can't figure out. I've recorded a video to show the steps I've taken and the problems I'm encountering.
Does anyone have any ideas on what might be going wrong or how to resolve this?
Thanks in advance for your help!
Did you try running the code?
nuxi dev?
The types may not be generated correctly until you doThank you I solved it, I hadn't noticed this warning, after I added that the useScript stop to show the error
Ah true, I believe the module doesn't register when this is shown
Also, here is another page, no ads, and it still doesn't achieve the desired LCP score, so I'm not sure it's 100% down to the ad scripts delaying the page.
https://pagespeed.web.dev/analysis/https-www-get-it-job-echo-cardiac-sonographer-in-portland-or-at-echo-vision-inc-506543045525635877/wsfrinlfru?form_factor=mobile
@harlan if you have any ideas on why the above page is also a bit slow, let us know, either way we have two samples, one with Adsense, one without (in this thread)
Also, @harlan and @manniL / TheAlexLichter in simple terms, what does this new nuxt script do to improve the page load time. As opposed to the vanilla Nuxt setup?
In short how/why would using nuxt script improving LCP?
There's many things contributing, you should have a dev run through the report with you:
- the server response is taking a full second, you're likely doing a bunch of slow db queries or something, you should consider SWR caching
- you still have a bunch of 3rd party scripts (hubspot, gtm, ga, etc)
Getting a green mobile score for performance is quite difficult, even the Nuxt site itself doesn't pass
Check this new module too https://github.com/johannschopplich/nuxt-lcp-speedup
GitHub
GitHub - johannschopplich/nuxt-lcp-speedup: 🪿 Instantly better LCP ...
🪿 Instantly better LCP scores in Google Lighthouse - johannschopplich/nuxt-lcp-speedup
Okay, thank you @harlan very intersting! We'll check it out.
@harlan @manniL still working on this FYI, unfortunately neither script appeared to have a measurable impact on things, so keeping at it.
@jpeebles Any luck? I'm also trying to reduce LCP on my end
I tried Nuxt LCP Speedup but I don't see any change on the score sadly
feel free to send your site link and I can verify