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•15mo 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•15mo 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

itsMU1XOP•15mo 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•15mo 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)

itsMU1XOP•15mo 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

Gaming

Programming

FCP, LCP in web vitals.