Optimize LCP

Hello everyone :slight_smile:

First sorry for my poor English.

I am posting this message to propose a feature (although I don’t know if this is the right place).

We usually try to optimize the loading of the first image of a post (or a page, if it has it) to reduce the LCP (it is one of the core web vitals).

<link rel="preload" href="/image.webp" as="image" fetchpriority="high">

In the head section of the page.

Hi @senzanome75

I think you have the avaibility to do this now. Maybe I’m wrong…
In your layouts, you don’t separate the layout for the head of the page.
And the layout of a page include the head section with reference of the first image of the post.

I think you can find (in the template) the first image with GetResources.

I can’t try to code this for few days. Sorry

1 Like

It’s up to you what you put in the template that generates your HTML head element.

This has, afaict, nothing to do with Hugo per se, since Hugo does not provide the HTML template. Instead, look at the theme you’re using (and which you may modify to your own taste).

1 Like

Hi @Welsh and @chrillek and thank you for your responses.

@Welsh I am not sure I understood but I understood @chrillek.

Rightly the place to put it in the template.

You must excuse me: I am still studying several things about HUGO but I really like both the key concepts and the generated end result :slight_smile:

Hi @senzanome75

I agree with @chrillek .

I meant that as Hugo uses template to render HTML pages, and as you want to have a relation to the first image of a post in the head, you can in the template put the head HTML coding with something like :
<link rel="preload" href="/image.webp" as="image" fetchpriority="high">
but instead of /image.webp a Hugo template code to determine the file. In order to do this you can use .GetRessources or .Resources.GetMatch.

It wuold be useful to read : Image Processing | Hugo

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.