Stop Klaviyo Scripts From Killing Your Shopify LCP
Stop Klaviyo Scripts From Killing Your Shopify LCP
On Dawn 12.0 with three Klaviyo widgets active, mobile LCP averages 4.7s. This number kills your organic visibility and your conversion rate. Google Search Central defines LCP as a critical Core Web Vital metric for determining page experience, and when your mobile LCP exceeds the 2.5s threshold, you tell Google your site provides poor quality. I have audited hundreds of stores where the primary culprit is not a heavy image, but the way third-party scripts interrupt the browser's ability to render the page.
The browser starts reading your HTML from the top, but it stops everything when it $hits a script tag in the head. If that script is Klaviyo's tracking engine, the browser must fetch the file, parse the JavaScript, and execute it before it continues building the DOM. This delay pushes the discovery of your hero image further down the timeline. You can have the smallest, most optimized hero image in the world, but if the browser is busy processing Klaviyo's logic, that image will never appear fast enough to satisfy the LCP requirement.
Why Klaviyo scripts block your mobile LCP
The Klaviyo script, specifically klaviyo.js, often sits inside the <head> of your theme.liquid file. When the browser encounters this tag, it enters a synchronous execution state. The parser pauses, waits for the script to download, and then executes the code. This behavior creates a massive bottleneck for the main thread, which directly increases your Interaction to Next Paint (INP) and your LCP. I have seen stores where the klaviyo.js execution alone adds 800ms of delay to the initial paint on a 4G connection.
This problem extends to other search and discovery tools as well. If you use Searchanise or Boost AI Search, these scripts follow the same destructive pattern. They load in the head, they execute heavy logic to build the search UI, and they prevent the browser from seeing the rest of your content. I recommend setting the Searchanise or Boost AI Search scripts to async in your theme.liquid file. This allows the browser to continue parsing the HTML while the script downloads in the background, which prevents script execution from delaying the initial paint.
The defer attribute is your most effective tool for the Klaviyo script. By adding defer to the script tag in theme.liquid, you tell the browser to download the script in parallel but wait until the HTML parsing is completely finished before executing it. This change alone can reduce LCP and INP by several hundred milliseconds. It ensures that the browser's primary focus remains on the DOM construction and the discovery of your LCP element, instead of being distracted by marketing logic that does not need to run until the page is visible.
You must audit your theme.liquid for any other scripts that lack the defer or async attributes. Many merchants install apps that inject code snippets directly into the head via the Shopify Admin, which bypasss your ability to control the loading order. Check your Shopify Admin settings and your theme files regularly. If a script is not required for the very first frame of your page, you should remove it from the head or defer it.
Implementing fetchpriority on your hero banner
The browser's preload scanner looks ahead in your HTML to find images and scripts. The scanner does not always know which image is the most important. In a standard Dawn 12.0 setup, the browser treats the hero image and a small icon in your footer with similar priority. This lack of distinction leads to the LCP element being stuck in a queue behind less important assets. To fix this, you need to use the fetchpriority attribute on your primary banner image.
You can find your hero image implementation in sections/image-banner.liquid or sections/image-branding.liquid. Locate the <img> tag that renders your main banner and add fetchpriority="high" to the element. This instruction tells the browser that this specific image is the highest priority in the network queue. We have seen this single change provide a reduction in the time it takes for the LCP element to reach the screen.
Applying this attribute does not work if CSS hides the image or if the browser cannot find the tag during the initial scan. You must ensure the image is part of the initial HTML payload and not injected via a JavaScript-heavy slider. If your theme uses a slider like Slick or Swiper, the browser often fails to see the first image as the LCP element because the slider's JavaScript has not yet initialized. Always prioritize the static HTML image tag over any JavaScript-driven image injection.
The fetchpriority attribute works best when you pair it with a properly configured preload tag in your theme.liquid. While fetchpriority="high" helps the browser prioritize the image once it finds it, preloading the image ensures the browser finds it even sooner. This dual approach addresses both the discovery and the prioritization phases of the LCP lifecycle. It is a technical necessity for any store serious about mobile performance.
Correcting the lazy-loading mistake in Impact 3.x
The Impact 3.x theme is a high-converting theme, but it contains a specific technical error that ruins mobile LCP. In the sections/main-product.liquid file, the theme often applies loading="lazy" to the primary product image. This is a mistake. Lazy loading works for images below the fold, meaning they are not visible when the page first loads. Applying it to the main product image tells the browser to wait until the user scrolls before it even starts downloading the image.
When the browser sees loading="lazy", it intentionally delays the request to save bandwidth. For an LCP element, this delay is catastrophic. It adds the time of the initial HTML parse, the time of the network request, and the time of the image download to your LCP metric. I have audited Impact 3.x stores where this lazy-loading error alone pushed the LCP from 2.2s to over 4.0s on mobile devices. The fix is simple: remove the loading="lazy" attribute from the primary image tag in sections/main-product.liquid.
Instead of lazy loading, you should use loading="eager" or simply omit the loading attribute for the first image in the product gallery. You want the browser to start fetching that image the millint second it discovers the URL in the HTML. This ensures the image is already in the browser cache by the time the parser reaches the end of the document. This small change in your theme code directly addresses the delay in the LCP paint.
Do not be afraid to check your other sections for similar errors. Every developer should audit sections/image-banner.liquid, sections/featured-product.liquid, and sections/collection-banner.liquid to ensure the first visible image in each section is never lazy-loaded. You can use the browser DevTools Network tab to verify this. If you see your main product image has a high "Start Time" relative to the document request, you likely have a lazy-loading bottleneck.
Reducing payload weight in product-thumbnail.liquid
Mobile performance is a battle against sheer file size. Many Shopify merchants use a single, high-resolution image for both desktop and mobile views, which is a waste of bandwidth. If your snippets/product-empty.liquid or snippets/product-thumbnail.liquid file serves a 2000px wide image to a mobile device with a 390px screen, you force the user to download unnecessary data. This increased payload weight delays the LCP because the browser spends more time downloading pixels that the user will never see.
You need to audit the srcset attribute in your snippets/product-thumbnail.liquid file. A well-optimized srcset provides a range of image sizes, allowing the browser to pick the smallest version that still looks sharp on the current screen. If your srcset only contains large dimensions, you are failing at basic mobile optimization. You should include smaller width descriptors, such as 400w, 800w, and 1200w, to give the browser better options.
The process of optimizing your srcset requires looking at your theme's liquid logic. You should use the image_url filter in Shopify to generate these different sizes. For example, your code should look like this:
<img
src="{{ product.featured_image | image_url: width: 600 }}"
srcset="{{ product.featured_image | image_url: width: 400 }} 400w,
{{ product.featured_image | image_url: width: 800 }} 800w,
{{ product.featured_image | image_url: width: 1200 }} 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="{{ product.featured_image.alt }}"
/>
By defining a sizes attribute, you tell the browser exactly how much space the image will occupy on different screens. This prevents the browser from over-estimating the required resolution. When the browser knows the image will only be 400px wide on mobile, it will choose the 400w source from your srcset. This reduction in payload weight can shave hundreds of kilobytes off your initial page load, which directly improves your LCP and reduces your overall page weight.
Moving Loox and Judge.me below the fold
Third-party review apps like Loox and Judge.me are heavy. These apps inject large amounts of JavaScript and CSS into your page to render star ratings and review lists. If these widgets are placed high up in your templates/product.json structure, they compete with your LCT element for main thread resources. I have seen product pages where the review widget loads so early that it delays the rendering of the product title and price.
You should treat your templates/product.json file as a performance configuration file. Examine the order of your sections. If your reviews section is positioned immediately below the product information, it is likely part of the initial viewport. This means the browser is trying to execute the Loox or Judge.me scripts at the same time it is trying to render your primary product image. This competition is a primary cause of high LCP and INP scores on mobile.
The solution is to move these heavy sections further down the page. By placing the reviews section below the related products or the product description, you move the heavy widget execution "below the fold." This allows the browser to complete the initial paint of the primary product content before it even begins to process the review app's logic. This does not hide the reviews from your customers; it simply changes the order in enough to protect the initial load.
This strategy also helps with the Cumulative Layout Shift (CLS) metric. Many review apps cause the page to jump when the stars finally load. By pushing the widget lower in the document, you reduce the likelihood that the layout shift will happen while the user is looking at the primary product information. It is a simple structural change that yields stability and speed benefits without requiring any complex coding.
Using settings_data.json for dynamic preloading
The most advanced way to fix LCP is to preload your LCP image URL directly in the theme.liquid file. This can provide a 500ms to 1s improvement in LCP timing. You cannot hardcode the image URL because the hero image changes depending on the product or collection being viewed. To do this dynamically, you need to tap into the config/settings_data.json file, which contains the configuration for your theme's images and settings.
You can use Liquid to pull the image path from your theme settings and inject a preload link into the <head>. This tells the browser to start downloading the image before it even parses the rest of the HTML. The code in your theme.liquid should look something like this:
{% if template contains 'product' %}
<link rel="preload" as="image" href="{{ all_products[product.handle].featured_image | image_url: width: 800 }}">
{% endif %}
For more complex themes, you can use the data stored in settings_data.json to find the specific image used in your header or banner sections. This requires a bit more technical skill, as you may need to parse the settings to find the correct image ID. However, the payoff is massive. By the time the browser finishes parsing the klaviyo.js script and the other render-blocking elements, the hero image is already halfway through its download.
Preloading is not a magic wand for every image on your site. You must only preload the single, most important element that constitutes your LCP. If you preload too many images, you will clog the network pipe and actually make your LCP worse. Focus exclusively on the primary banner for your homepage and the primary product image for your product pages. This targeted approach ensures you are using your browser's limited resources to solve the most critical performance bottleneck.
Optimizing Shopify mobile LCP requires moving away from the "install and forget" mindset. Every app you add and every theme setting you change has a cost. If you want a fast store, you must actively manage how scripts like Klavio and Searchanise interact with your theme's critical rendering path. Stop letting your marketing tools dictate your site speed, and start taking control of your theme's execution order.
Written by the SeoScan Team
Technical Shopify experts committed to helping merchants dominate search results through data-driven strategies and automated intelligence.
Don't just read. Implement.
Our AI auditor scans your store for the exact tech-debt mentioned in this guide.
Run Free ScanReady to fix your Shopify
SEO for good?
Join 2,000+ merchants using SEOScan to audit, optimize, and rank. Your first scan is on us.