If LCP (Largest Contentful Paint) images are holding you back from passing Core Web Vitals and/or are being flagged in Google Lighthouse and Pagespeed Insights as an opportunity. I have a potential solution. Use the preload resource hints with Shopify's sideloaded liquid image shortcode triggered at the page template level.
I cannot guarantee this will work for you as all Shopify themes and page templates differ. But this should at least put you on the right track to take advantage of that opportunity.
Add the relevant snippet below within the head section of the theme.liquid file. Or if you are using a snippet liquid file to call on DOM head elements. Add it in there instead. Be sure to fully test it, if you get the no-image response it did not work. Keep tweaking and testing until it does.
Product Page Images
Homepage Hero Section Images
Blog Page Images
Did this solution work for you to solve Shopify's LCP (Largest Contentful Paint) images? Please comment below. If this post gains any traction, I shall look at expanding it, again, comment below.
I cannot guarantee this will work for you as all Shopify themes and page templates differ. But this should at least put you on the right track to take advantage of that opportunity.
Add the relevant snippet below within the head section of the theme.liquid file. Or if you are using a snippet liquid file to call on DOM head elements. Add it in there instead. Be sure to fully test it, if you get the no-image response it did not work. Keep tweaking and testing until it does.
Product Page Images
Code:
{% if template == "product" %}
<!-- preload LCP product image -->
<link rel="preload" href="{{ product | img_url: '450x450' }}" as="image">
{% endif %}Homepage Hero Section Images
Code:
{% if template == "index" %}
<!-- preload LCP Homepage Hero (or pages) image -->
<link rel="preload" href="{{ section.settings.hero_image | img_url: '450x450' }}" as="image">
{% endif %}Blog Page Images
Code:
{% if template == "article" %}
<!-- preload LCP Blog image -->
<link rel="preload" href="{{ article.image | img_url: '450x450' }}" as="image">
{% endif %}Did this solution work for you to solve Shopify's LCP (Largest Contentful Paint) images? Please comment below. If this post gains any traction, I shall look at expanding it, again, comment below.
