Re: Preload tag for LCP

MrsMacca · ‎03-17-2025

Hello Community,

Would anyone be able to please help me add a preloading tag for LCP. I use Flex theme.

Thankyou.

Huptech-Web · ‎03-17-2025

Hi @MrsMacca

To preload your Largest Contentful Paint (LCP) image, use the <link rel="preload"> tag in the HTML header with the as="image" attribute and the image's href attribute, and optionally include fetchpriority="high" for priority loading.

Here's a breakdown:
1. <link rel="preload">: This tag tells the browser to start fetching the resource (in this case, the LCP image) early in the page load process.
2. as="image": This attribute specifies that the resource being preloaded is an image.
3. href="path/to/your/image.jpg": This attribute specifies the URL of the image to preload.
4. fetchpriority="high" (optional): This attribute, when included, instructs the browser to prioritize the image download, ensuring it loads quickly.

Add the code below after <head> 👇

<link rel="preload" href="path/to/your/image.jpg" as="image" fetchpriority="high">

You can find more info. Here: https://web.dev/articles/preload-responsive-images

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Huptech-Web · ‎03-17-2025

Hi @MrsMacca

To preload your Largest Contentful Paint (LCP) image, use the <link rel="preload"> tag in the HTML header with the as="image" attribute and the image's href attribute, and optionally include fetchpriority="high" for priority loading.

Here's a breakdown:
1. <link rel="preload">: This tag tells the browser to start fetching the resource (in this case, the LCP image) early in the page load process.
2. as="image": This attribute specifies that the resource being preloaded is an image.
3. href="path/to/your/image.jpg": This attribute specifies the URL of the image to preload.
4. fetchpriority="high" (optional): This attribute, when included, instructs the browser to prioritize the image download, ensuring it loads quickly.

Add the code below after <head> 👇

<link rel="preload" href="path/to/your/image.jpg" as="image" fetchpriority="high">

You can find more info. Here: https://web.dev/articles/preload-responsive-images

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

MrsMacca · ‎03-19-2025

what would the path to my image look like, where would i find it please?

MrsMacca · ‎03-19-2025

Thankyou, I worked it out, it seems to have worked

Dotsquares · ‎03-17-2025

hi @MrsMacca

To add a preload tag for your Largest Contentful Paint (LCP) element in the Flex theme, follow these steps:

1. Identify the LCP Element

Use Google PageSpeed Insights or Lighthouse (in Chrome DevTools) to find your LCP element. It’s usually an image, video, or heading text.

2. Add a Preload Tag in Your Theme Code

Go to Online Store > Themes > Edit Code.
Locate your <head> section in theme.liquid and add this:

<link rel="preload" as="image" href="{{ 'your-image.jpg' | asset_url }}" type="image/jpeg" />

If the LCP element is a font, use:

<link rel="preload" as="font" href="{{ 'your-font.woff2' | asset_url }}" type="font/woff2" crossorigin="anonymous" />

3. Ensure It’s Above the Fold

If your LCP element is an image, also add loading="eager" and fetchpriority="high" in the <img> tag to boost loading speed.

Dotsquares Ltd

Problem Solved? ✔ Accept and Like solution to help future merchants.

Shopify Partner Directory | Trustpilot | Portfolio

Huptech-Web · ‎03-18-2025

Hi @MrsMacca
If the solution presented meets your needs and effectively addresses your query, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Re: Preload tag for LCP

Preload tag for LCP

1. Identify the LCP Element

2. Add a Preload Tag in Your Theme Code

3. Ensure It’s Above the Fold

Community Blog Articles