Dynamic assets preloading (LCP issue)

Hello everyone,

Say we are working on a Laravel + Inertiajs + Vue application and we have an article page. this article page contains a cover image that is being shown above the fold... so on Pagespeed test it shows LCP issue from this image.

How can we potentially solve it.

Here are things I tried: 1- Putting fetchpriority="high" loading="eager" on the <img> but this obviously fails because it is not actually ran it is actually sent via inertia. 2- I tried injecting a preload link with the response headers via a middleware, here is how I did it: middleware body:

        if ($request->header('X-Inertia')) {
            return $response;
        }

        $preloads = $request->attributes->get('preload_images', []);

        foreach ($preloads as $url) {
            $response->headers->set(
                'Link',
                "<{$url}>; rel=preload; as=image; fetchpriority=high",
                false
            );
        }

        return $response;

and in the controller function I would do:

        $request = request();
        $request->attributes->set('preload_images', [
            $post->getImagePath(798, 469, 'image'),
        ]);

Now here the image shows at the top of requests in networks tab. how ever it still showing an issue in LCP from this particular image in Pagespeed. what am I doing wrong and what suggestions do you have.

Thank you in advance.