Hello, I have a React module and I want to improve its LCP (in this case, an image). I need to find a way to preload the image in the template to boost my LCP score. Does anyone know a solution? I tried using useInlineHeadAsset, but it only runs once React has loaded, so it doesn’t help.
The module’s image is dynamic, so I can’t hard-code a preload tag. I need a way for the template and the React module to communicate the image URL. Or are there any solutions to preload the image here ?
Hi @deFaraks,
Thank you for posting to the Community! I’d like to tag in some of our Top Contributors to see if they have any suggestions on this one -- @Kevin-C @louischausse and @jeremymandle Do you have any ideas for @deFaraks?
Cassie, Community Manager
Is the image above the fold?
why the need to preload?
Yes, the image is the first element visible when the page loads.
I need to preload it to optimize page performance and improve the Largest Contentful Paint (LCP) metric.
Hi , @deFaraks
UseInlineHeadAsset executes client side after React loads, so the browser never gets the chance to discover and preload your LCP image early enough in the render path. Here’s how to fix it:
1.Pass the image URL from the template (server-side)
Make sure the image URL is available before React renders, and add a preload for that image in the page head using the same dynamic URL. This allows the browser to start loading it early.
This usually means exposing the image URL at the template level , so the same value can be used both for the preload and inside the React module.
2.Render as a Standard Image Element
Use a standard image element that loads with high priority (not lazy loaded)
Avoid background images or JS injected images for your LCP element
3.Match the Preload URL Exactly
The preload URL must be identical to the image used in React
Any difference (params, size, format) = treated as a different asset
If they don’t match, the preload won’t help LCP
4.Set High Priority on the Image
Mark the LCP image with high fetch priority
Avoid lazy loading on this image
High priority + lazy loading conflict with each other
In most cases, exposing the image URL server-side and preloading it is what resolves LCP issues like this.
- - - - - - - -
If you’d like to automate image optimization further, Website Speedy can help with image optimization and script delays - completely optional alongside the steps above.
Disclaimer : I’m affiliated with the Website Speedy
Hope this helps!
Hi @deFaraks
You can try passing the dynamic image URL from the HubSpot module to the template and then add the preload in the page <head>.
useInlineHeadAsset runs only after React loads, so by that point it’s too late to help much with LCP.
Since the image URL is dynamic, you could expose the URL through a HubL variable or data attribute and use that value in the template to generate:
<link rel="preload" as="image" href="{{ image_url }}">
The important part is that the preload needs to be added before React starts loading. Also, make sure the preloaded URL is exactly the same image URL that the React component eventually uses.
This should help the browser start loading the LCP image earlier instead of waiting for React to render the module.
I hope this helps you out. Please mark it as Solution Accepted and Like to help another Community member.
Thanks!