The LCP P75 has reached 6,946 ms. How should it be optimized?

Technical Q&A
1

web：www.bmcarcover.com

4

Hi,

Hope this will help

  • Find actual LCP elementusually the hero image.
  • Compress hero image into WebP and keep it under 300kb.
  • Ensure it loads with eager and fetchpriority=“high”.
  • Remove or delay scripts from apps loading above the fold.
  • Clean up unused theme code and apps.
  • Optimize fonts or reduce custom fonts.
5

Hi @Jim_65
You can improve the LCP by preloading the hero (first-screen) image. This allows the browser to prioritize loading the main image earlier and significantly reduces the Largest Contentful Paint time.
The hero image is the following image.

image
image1331×640 175 KB

How to preload the hero (LCP) image in Shopify

  1. Open your theme code
  • Go to Online Store → Themes → … → Edit code
  • Open theme.liquid
  1. Add a preload tag inside the <head>
    Place this code before other CSS or JavaScript files:
<link
  rel="preload"
  as="image"
  href="{{ section.settings.hero_image | image_url: width: 1600 }}"
  fetchpriority="high"
>

This tells the browser to load the main (hero) image as early as possible. You can change the link href.

7

Hey there @Jim_65!

Honestly, the best move is to optimize and preload your hero image. Keep it lightweight (WebP/AVIF if possible), stick to a single static image instead of a slider, and preload it so it shows up right away. This alone usually makes the biggest difference for LCP.

8

Hi , @Jim_65

Based on the Pagespeed Insight Report https://pagespeed.web.dev/analysis/https-bmcarcover-com/o5i2fv4rjh?form_factor=mobile . LCP is quite high, and it’s usually caused by the main (above-the-fold) content loading too late.

A few things you can focus on:

  1. Optimize the LCP image :
    Compress it and use WebP
    Make sure it’s not lazy-loaded
    Preload it if it’s the hero image

  2. Reduce render-blocking resources:
    Delay non-critical JS/CSS so the main content can render faster:

< script src=“{{ ‘theme.js’ | asset_url }}” defer>

If manual optimization feels a bit complex, you can use a performance app to handle image compression and script deferring automatically. Tools like Website Speedy can be helpful as an optional solution.
Hope this Helps!