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
<div class="w-52 sm:w-64">
<img
width="250px"
height="250px"
src="/images/logo.png"
alt="logo name"
class="aspect-square drop-shadow-2xl hover:scale-110 hover:rotate-2 duration-300"
/>
<h1 class="text-4xl mt-2 text-center">Logo Name</h1>
</div>
<div class="w-52 sm:w-64">
<img
width="250px"
height="250px"
src="/images/logo.png"
alt="logo name"
class="aspect-square drop-shadow-2xl hover:scale-110 hover:rotate-2 duration-300"
/>
<h1 class="text-4xl mt-2 text-center">Logo Name</h1>
</div>
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
Jochem
Jochem13mo ago
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 values
MarkBoots
MarkBoots13mo ago
same for me I also see you use .aspect-square, while you are already setting it up as a square image with width/height
itsMU1X
itsMU1X13mo ago
it 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%
MarkBoots
MarkBoots13mo ago
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)
itsMU1X
itsMU1X13mo ago
it was svg image, and i tried and the final result now is 95% on mobile, and 100% on desktop sounds good to me
Want results from more Discord servers?
Add your server