Something you may be aware already, is that I am kinda obsesed with maximizing the performance for the website.
Doing an okay job is not my style, so I always go further and beyond when I want reduce friction.
This usually implies a lot of time-consuming tasks investigating different paths to improve any technical aspect. Well, not today! Today is quite a simple and helpful snippet that you will be amazed with.
Snippet
{## Preload featured image on blog post ##}
{% require_css %}
{{
'<link rel="preload" as="image" href="%s">'|format(content.featured_image)
if (not is_listing_view) && (content.featured_image)
}}
{% end_require_css %}I split into different lines to make it a bit more readable but can be compressed back to one line if you like.
It basically creates a preload request of the featured image (assuming this is the one you are using in your hero above the fold).
This tiny but important update tweak will help you to improve your LCP as the resource will start to download earlier while parsing the head.
By default, the image will start to download only when the request is reached in the DOM. Creating a cascading effect that will delay your full load page event along with the LCP.