If you are using inertia, it seems like a good time to switch to the new http request helper in v3. https://inertiajs.com/docs/v3/the-basics/http-requests

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.

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.

Yes. this works great if you are navigating between inertia pages. however if you go to the page and reload it, it will not preload the image.

Hello,

I want to preload images on my Laravel application before rendering the Vue template, so I worked on this middleware

public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        
        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;
    }

Which sets preloads links on the response header. it worked fine. the problem is that it is re-loading the image after rendering the vue page.

Is there a way to get around this?

Thank you.