• Home
  • About
  • Services
    • Technical SEO
    • Local SEO Services
  • Tools
    • Redirects Generator
    • HREFLANG Tag Generator
    • XML Sitemap Generator
    • XML Sitemap URL Extractor
    • Robots.txt Generator
    • Random URL Generator
    • Meta Robots Tag Generator
    • Organization Schema Generator
    • Article Schema Generator
    • Product Schema Generator
    • Local Business Schema Generator
    • FAQPage Schema Generator
    • WordPress Metabox Generator
    • Plugins & Scripts
  • Tutorials Hub
    • Technical SEO
    • WordPress
    • PHP
    • JavaScript
    • Python
    • Google Tag Manager
    • Shopify
    • Other Guides & Tutorials
    • General Discussion
    • View All
  • Contact
    • Hub
      New posts Search forums
    • What's new
      New posts New profile posts Latest activity
    • Members
      Current visitors New profile posts Search profile posts
    Log in Register
    What's new Search

    Search

    By:
    Advanced search…
    • New posts
    • Search forums
    Menu
    Log in

    Register

    Install the app
    • Home
      • Hub
      • Shopify Tutorials & Guides
      You are using an out of date browser. It may not display this or other websites correctly.
      You should upgrade or use an alternative browser.

      Shopify - Preload LCP Images

      • Thread starter Chris
      • Start date Sep 6, 2021
      C

      Chris

      Administrator
      Staff member
      • Sep 6, 2021
      • #1
      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

      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.
       
      You must log in or register to reply here.
      Share:
      Facebook Twitter Reddit Pinterest Tumblr WhatsApp Email Share Link

      New Posts

      • C
        add a number to the next column of data, increasing the number as the datapoint changes, and count how many times each datapoint appears
        • Started by Chris
        • Jul 20, 2023
        • Replies: 0
        Other Plugins & Tutorials
      • C
        How to connect to GPT-4 API with Node.js using PowerShell
        • Started by Chris
        • Jul 14, 2023
        • Replies: 0
        JavaScript Scripts & Snippets
      • C
        Google Search Results Scraper - Node JS & Puppeteer
        • Started by Chris
        • Jul 2, 2023
        • Replies: 0
        JavaScript Scripts & Snippets
      • C
        Detect unused JavaScript and CSS in Bulk
        • Started by Chris
        • Jun 29, 2023
        • Replies: 0
        JavaScript Scripts & Snippets
      • C
        Google Sheets Apps Script to Generate Hreflang tags
        • Started by Chris
        • Jun 12, 2023
        • Replies: 0
        Technical SEO
      • C
        Deploying Noindex Meta Robots Tag with JavaScript with Tag Manager - 2 Methods
        • Started by Chris
        • Jun 9, 2023
        • Replies: 0
        Google Tag Manager Tutorials & Guides
      • C
        Guide to Google Search Operators
        • Started by Chris
        • Jun 9, 2023
        • Replies: 0
        Other Plugins & Tutorials
      • C
        Bookmarklet to inspect and identify images that are not using lazy loading on a webpage
        • Started by Chris
        • Jun 2, 2023
        • Replies: 0
        JavaScript Scripts & Snippets
      • Hub
      • Shopify Tutorials & Guides

    Technical SEO Consultant

    Chris Lever - Freelance SEO Consultant Availible for Hire. Specialist in Technical SEO Audits, Strategy and Implementation.

    Need Help?

    • BB Code
    • Cookie Policy
    • Terms of Use
    • Privacy Policy
    • HTML Sitemap

    Learn More

    • About
    • Availability
    • Popular Posts
    • Projects & Scripts
    • Contact

    Get in Touch

    Chris Lever, Manchester, United Kingdom
    hello@chrisleverseo.com
    +44 0161 883 7660

    © 2023 Chris Lever SEO. All rights reserved. Powered by Xenforo | PF

    • This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
      By continuing to use this site, you are consenting to our use of cookies.
      Accept Learn more…