Preload tag for LCP

Technical Q&A
, ,
1

Hello Community,

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

Thankyou.

2

Hi @MrsMacca

To preload your Largest Contentful Paint (LCP) image, use the 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. : 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 :backhand_index_pointing_down:

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

3

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 section in theme.liquid and add this:

If the LCP element is a font, use:

3. Ensure It’s Above the Fold

If your LCP element is an image, also add loading=“eager” and fetchpriority=“high” in the tag to boost loading speed.

4

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.

5

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

6

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

7

Shamelessly linking to my LCP fix wizard here, in case anyone has a similar issue and wants to try to improve the LCP themselves. Its only really practical for simple code setups, heavily customised themes, or weird paid themes might end up being too confusing if you are not technical.