FCP, LCP in web vitals.
i made a website using svelte and tailwind css
this div here is making my website quite not a good one
so the image itself making something bad for
FCP
and LCP
and the h1
as well
so how can avoid that? glad to hear your solutions.5 Replies
the first (and honestly only, this isn't really my area of expertise) idea is that the image itself is very large and you're resizing it in browser
also,
width
and height
don't use units, they're already in pixels by definition, so you should remove the px
from the valuessame for me
I also see you use
.aspect-square
, while you are already setting it up as a square image with width/heightit was without the
px
i was testing cuz i really tired of this, and sadly the image's size is only 8 kb!
same thing i was testing
the performance was 94% is it good enough? i'm tryin to make it 100%I don't know what the critirea are and if 100% even is possible. 94% sounds great for me
You could look at using an inline svg as the image (if your logo is suited for that)
it was svg image, and i tried and the final result now is 95% on mobile, and 100% on desktop
sounds good to me