Need help with FCP, LCP

[gloomy pebble]

I just finished deploying my website through netlify and when i ran the pagespeed i am scoring really bad:

https://pagespeed.web.dev/analysis/https-kitamaru-ro/gvinsriu3m?form_factor=mobile

I don't understand what is causing the issue.

For the image i am using the <Picture> tag like so:

<Picture
                src={primaimpresie}
                widths={[360, 412, 768, primaimpresie.width]}
                sizes="(min-width: 1440px) 632px, (min-width: 1280px) 560px, (min-width: 1040px) 440px, (min-width: 840px) 776px, (min-width: 640px) 552px, calc(93.75vw - 29px)"
                formats={['avif', 'webp']}
                fallbackFormat="jpg"
                fetchpriority="high"
                class="aspect-square mix-blend-multiply saturate-0"
                loading="eager"
                alt="Persoană stresată și obosită."
            />```

[fleet quest]

Hi ! I’m new to Astro but not new to performance optimization and web dev. I’m seeing that the main image “primaimpresie.CZl5hG6n_1kgjY8.avif” has a mix blend applied with a saturation filter. Sometimes these effects can require a lot of resources. Try replacing with an image that already has those filters applied to see if it changes. I would then optimize the svg code to reduce the dom size. I can’t see what the second svg is but maybe that one is better as a png file. I’m seeing the scan was for slow 4G. That’s something to at least acknowledge, the score may be better with a 5G connection.

[gloomy pebble]

Thank you for the reply ! I removed all those classes and left the image as it was exported, but that didn't help in any way.

Turning those SVG's into images did the trick, that's insane.

Anything i can do to reduce the total blocking time? it's the css

[fleet quest]

@gloomy pebble Do you have any unused CSS? Have you used this? https://socket.dev/npm/package/astro-purgecss I'm actually seeing you are at 100 for everything now. https://pagespeed.web.dev/analysis/https-kitamaru-ro/4tr1zi81os?form_factor=mobile

[gloomy pebble]

I haven't used purgecss. I am using tailwind , and although i did see something in their documentation regarding production optimization https://tailwindcss.com/docs/optimizing-for-production , it says " If you’re using a framework, check the documentation as this is often handled for you in production automatically and you don’t even need to configure it."

I checked in the astro documentation but i haven't found anything. I assume(d) astro does some magic on build with tailwind.

[fleet quest]

yes tailwind does that so you should be good. Are you seeing 100 now as well?

[gloomy pebble]

yes, i did another test and it hit 100.

Thanks a lot for the help !