img add fetchpriority

[treelistener]

Hi
Using latest Publii and Lignes theme. Is there a way to add "fetchpriority=high" characterstic of an img globally for the main image of a post or page to all , or even only if page or post shown on frontpage? This would help getting stronger LCP.
Many thanks for any advice.

[gpsblues]

Hi,

With fetchpriority: high the performance improvement on mobile is significant. Currently, the only solution is to do it manually by editing the index.hbs file of the theme.

In practice, you need to locate the hero image section and add the fetchpriority option to the <img> tag.

In the Lignes theme, the issue is more complicated because it uses a slider, and fetchpriority="high" should only apply to the first slide image, not the subsequent ones.

In index.hbs around line 72, you’ll find the code to modify like this:

{{#checkIf @index '==' 0}}  
    {{ lazyload "eager" fetchpriority="high"}}  
{{else}}  
    {{ lazyload "lazy" }}  
{{/checkIf}}

This will correctly assign fetchpriority="high" only to the first image.

P.S. Consider using theme overrides to preserve your changes after future updates: https://getpublii.com/dev/theme-overrides/

[treelistener]

Many thanks @gpsblues for your detailed explanation.

[treelistener]

I'll try this.

[treelistener]

@bobmitro Is it possible to add and integrate fetchpriority: high to in each Publii theme within the next revisions? I think this would be a great benefit for all Publii users with standard themes.

[bobmitro]

Is it possible to add and integrate fetchpriority: high to in each Publii theme within the next revisions? I think this would be a great benefit for all Publii users with standard themes.

Thanks for the excellent suggestion.

While the idea is great, implementing this automatically on a theme-level is problematic. The core challenge is that a theme can't reliably determine which element is the actual LCP. This is especially for themes which are often heavily customized by users or come with many layout options and support for different types of content (e.g., grids vs. lists, various hero sections). The true LCP element can easily change based on user settings or modifications.

Applying fetchpriority="high" based on a guess would be counter-productive, and applying it to multiple images would defeat the purpose—if everything is a priority, nothing is.

A much safer and more effective approach is to put this control in the user's hands. This ensures the attribute is used precisely where it provides the most benefit.

[treelistener]

Many thanks @bobmitro I understand your point. Perhaps it would be helpful if you add the solution of @gpsblues to the knowledge base, just as a point for advanced users.

[treelistener]

Hi guys In the marketplace for paid users there is still followButtons 1.5.5 for download but Publii notification says 1.5.6! Just to let you know. All the best Oliver