Every Klaviyo fix we catalog

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

On Klaviyo

1. Email/SMS signup pop-ups and flyouts served by Klaviyo are a frequent source of CLS when they insert above or within page content. In your Klaviyo account, go to Sign-Up Forms.
2. For each active form, click Edit > select the Display Settings tab. Set 'Display Behavior' to a triggered/delayed display (e.g. 'Show after 5 seconds' or 'Show on exit intent') rather than 'Show immediately on page load' — this ensures the form does not inject before the page is fully painted.
3. For flyout/side-tab forms, confirm the form style is set to 'Flyout' or 'Full-Page' (overlay) not 'Embedded' — embedded forms inserted inline above product or blog content push surrounding elements down and cause significant CLS.
4. If you use an embedded inline form, wrap the Klaviyo embed code in a container div with a fixed min-height matching the form's pixel height, so the browser reserves the space even before the Klaviyo script fires.
5. Save and publish changes, then re-test your CLS on affected pages with Google PageSpeed Insights to confirm the shift caused by the form is eliminated.

<!-- CORRECT: explicit width and height prevent layout shift -->
<img
  src="/images/product-red-sneaker.jpg"
  alt="Red canvas sneaker, side view"
  width="800"
  height="800"
  loading="lazy"
>

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

On Klaviyo

1. Load the Klaviyo snippet asynchronously and deferred: in your Shopify theme's `theme.liquid` (or equivalent base layout), locate the Klaviyo `<script>` tag (company ID embed) and ensure it uses both `async` and is placed just before `</body>` rather than in `<head>`. If you installed Klaviyo via the Shopify Sales Channel app, go to Klaviyo → Settings → Integration → Shopify and toggle on 'Load Klaviyo.js asynchronously' if available, then re-save.
2. Delay Klaviyo's onsite popup/flyout evaluation until after the page is interactive: in Klaviyo → Signup Forms, open each active form → Settings tab → 'Display Timing'. Set a display delay of at least 3–5 seconds (or trigger on scroll/exit intent) so the form's JS does not execute during the critical post-load interaction window.
3. Audit and throttle Klaviyo event listeners in your theme: search your JS files for `klaviyo.push`, `_learnq.push`, and `identify`/`track` calls. Move any that fire on every `scroll` or `mousemove` event into debounced/throttled wrappers (e.g., debounce 200–300 ms) so they do not block the main thread during user interactions.
4. Defer the Klaviyo back-in-stock and product-view tracking scripts: wrap any inline `_learnq.push(['track', ...])` calls in a `requestIdleCallback` (with a `setTimeout` fallback for Safari) so they yield to user input before executing — e.g., `requestIdleCallback(() => { _learnq.push(['track', 'Viewed Product', {...}]); });`
5. Remove or consolidate redundant Klaviyo script tags: check that Klaviyo's `klaviyo.js` snippet is only loaded once across your theme (theme.liquid, app embeds, and any third-party integrations). Multiple loads cause duplicate event handler registration that compounds INP cost — use your browser's Network panel to confirm a single request to `static.klaviyo.com/onsite/js/klaviyo.js`.
6. Test INP impact after each change using Chrome DevTools → Performance panel: record a trace while clicking an Add-to-Cart button or newsletter form submit, inspect 'Long Tasks' (red bars > 50 ms) attributed to `klaviyo.js`, and confirm total interaction duration drops below 200 ms before deploying to production.

Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.

On Klaviyo

1. Open Klaviyo and navigate to Content > Templates (or Campaigns, if editing a live campaign's email). Open the email template that contains images.
2. Click on any image block in the drag-and-drop editor to select it. The right-hand panel will display image settings.
3. Locate the 'Alt text' field in the image block settings panel. Enter a concise, descriptive phrase that explains what the image shows (e.g., 'Woman wearing red wool winter coat, front view'). Avoid generic text like 'image1' or leaving the field blank.
4. Repeat for every image block in the template — including hero banners, product images, logo images, and footer images. Each image must have its own unique, descriptive alt text.
5. If you use Klaviyo's HTML email editor instead of the drag-and-drop editor, locate each <img> tag and ensure it has a populated alt attribute, e.g.: <img src="product.jpg" alt="Blue ceramic coffee mug, 12 oz">. An empty alt="" is acceptable only for purely decorative images that add no informational value.
6. Save and/or publish the template. For any active flows (e.g., abandoned cart, welcome series), open each flow email individually and apply the same alt text updates, then save each message.

<!-- BEFORE (missing alt — bad) -->
<img src="/images/red-leather-bag.jpg">

<!-- AFTER (descriptive alt — correct) -->
<img src="/images/red-leather-bag.jpg" alt="Red leather crossbody bag with gold buckle clasp">

<!-- Decorative image (intentionally empty alt — correct) -->
<img src="/images/divider-line.png" alt="">

Improve your Lighthouse/PageSpeed performance score by reducing page weight, eliminating render-blocking resources, optimising images, and addressing Core Web Vitals so Google ranks your store higher in search results.

On Klaviyo

1. Audit your Klaviyo script loading: In your theme's code (e.g. Shopify theme.liquid or equivalent), locate the Klaviyo onsite JavaScript snippet (typically a <script> tag loading 'static.klaviyo.com/onsite/js/klaviyo.js' or the older 'a.klaviyo.com/media/js/analytics/...'). Confirm it is NOT placed in the <head> without a 'defer' or 'async' attribute — a synchronous load here is a render-blocking resource and kills your Lighthouse score.
2. Add 'async' to the Klaviyo script tag: Change the snippet from <script src='https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=XXXXXX'></script> to <script async src='https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=XXXXXX'></script>. This prevents the script from blocking the browser's render pipeline while still loading Klaviyo functionality.
3. Disable or lazy-load unused Klaviyo popup/signup forms: In Klaviyo Admin → Sign-up Forms, review all Published forms. Pause or archive any forms that are not actively used — every active form injects additional JS and CSS into every page load. For forms you keep, ensure they are set to trigger on interaction/exit-intent rather than on page load to defer their payload.
4. Remove duplicate Klaviyo scripts: Search your theme files and any installed third-party apps for multiple instances of the Klaviyo analytics or identify.js snippet. Having more than one Klaviyo script on a page doubles the network cost. Remove all duplicates, keeping only the single official async snippet.
5. Defer Klaviyo's Back-in-Stock or embedded form embeds: If you use Klaviyo's embedded forms (placed via a <div class='klaviyo-form-XXXXX'> block), load the Klaviyo Onsite JS snippet only on pages that contain that embed by conditionally rendering the script tag (e.g. using a Liquid 'if' block on product pages only), rather than globally on every page including the homepage and collection pages.
6. Re-run PageSpeed Insights after each change: After saving your theme edits, run your URL through https://pagespeed.web.dev. Confirm that 'klaviyo.js' no longer appears under 'Eliminate render-blocking resources' or 'Reduce unused JavaScript' in the Opportunities section, and verify your performance score has improved.

<!-- In <head>: preconnect to critical third-party origins to reduce connection latency -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload your Largest Contentful Paint image (hero/banner) so it loads earlier -->
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

<!-- Hero image: eager load, explicit dimensions to prevent CLS -->
<img
  src="/images/hero.webp"
  alt="Descriptive alt text for your hero image"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="async"
>

<!-- All other images: lazy load, explicit dimensions to prevent CLS -->
<img
  src="/images/product-shot.webp"
  alt="Descriptive product alt text"
  width="800"
  height="800"
  loading="lazy"
  decoding="async"
>

<!-- Defer non-critical third-party scripts (analytics, chat, pixels) -->
<script src="https://example-analytics.com/tracker.js" defer></script>

<!-- Load non-critical CSS asynchronously to unblock render -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>

Fix broken internal links pointing to pages that return a 404 error by either removing those links or setting up a 301 redirect from the missing URL to the correct replacement page.

On Klaviyo

1. In your Klaviyo account, navigate to Content → Templates. Open every email or SMS template that contains links (CTAs, banners, text links, buttons) and use the editor's link inspector to identify any URLs pointing to the broken/404 page.
2. For each affected template, click the linked element, open the link editor, and replace the broken URL with the correct, live destination URL. If the page no longer exists, link to the best equivalent page (e.g., a parent collection or the homepage).
3. Navigate to Flows and, for every active flow (welcome series, abandoned cart, post-purchase, etc.), open each Email or SMS step, click 'Edit Template', and repeat the same link audit — replacing any broken URLs with the correct ones.
4. Navigate to Campaigns and check all Scheduled or previously Sent campaigns: for scheduled campaigns, edit the template and fix broken links before the send date; for sent campaigns, note the broken URLs so you can set up 301 redirects on your storefront (broken links in already-sent emails cannot be retroactively changed, but redirects will recover SEO equity and user experience).
5. On your storefront platform (e.g., Shopify Admin → Online Store → Navigation → URL Redirects), create a 301 redirect from each broken URL to its correct replacement page. This ensures that any traffic arriving from previously sent Klaviyo emails lands on a valid page and passes link authority correctly.
6. After saving all changes, send a test email/SMS from Klaviyo for each updated template and click every link to verify all URLs resolve with a 200 status and no redirect chains.

<!-- BEFORE: broken internal link -->
<a href="/old-products/discontinued-item">Shop Now</a>

<!-- AFTER: updated to correct URL -->
<a href="/products/replacement-item">Shop Now</a>

Reduce your page load time to under 1.5 seconds by optimizing images, eliminating render-blocking resources, and enabling caching and compression.

On Klaviyo

1. In your Klaviyo account, go to Settings → Integrations and locate your Klaviyo JavaScript snippet (onsite tracking). Confirm you are using the latest async/non-blocking version of the snippet — it should use 'async' or 'defer' attributes so it does not block page rendering.
2. In your storefront theme, find where the Klaviyo snippet is injected (commonly in theme.liquid or a header snippet). Move the Klaviyo <script> tag to just before the closing </body> tag rather than in the <head>, so it loads after critical above-the-fold content and does not contribute to render-blocking.
3. Remove any duplicate Klaviyo script tags across your theme files (e.g., in header.liquid, footer.liquid, and product templates). Multiple instances of the snippet multiply its load impact — only one instance should exist per page.
4. Disable any unused Klaviyo onsite features (e.g., back-in-stock, web push, signup forms) in Klaviyo → Website → Forms/Notifications. Each active feature injects additional JavaScript; disabling unused ones reduces total script payload.
5. For Klaviyo signup popup/flyout forms, go to Klaviyo → Website → Sign-up Forms, open each active form, click 'Settings', and enable the 'Show after page load delay' option (set to at least 3–5 seconds). This delays form script execution until after the main page has loaded and rendered.
6. After changes are made, test page load time using Google PageSpeed Insights or WebPageTest and confirm the Klaviyo scripts no longer appear as render-blocking resources in the diagnostics before re-publishing your theme.

Reduce your page load time to under 3 seconds by compressing images, eliminating render-blocking scripts and styles, and improving server response speed.

On Klaviyo

1. In your Klaviyo account, go to Settings → Integrations and confirm you are using the latest version of the Klaviyo JavaScript snippet (klaviyo.js). Older embed methods load synchronously and block rendering.
2. Replace any legacy synchronous embed (e.g. a <script> tag without async/defer in your theme's <head>) with Klaviyo's recommended asynchronous snippet. In Shopify, navigate to Online Store → Themes → Edit Code → theme.liquid and ensure the Klaviyo <script> tag includes the 'async' attribute: <script async type='text/javascript' src='https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=XXXXXX'></script>
3. Audit active Klaviyo on-site forms (pop-ups, flyouts, banners) in Klaviyo → Forms. Disable or archive any forms that are not currently running campaigns — each active form adds JavaScript evaluation weight on every page load.
4. For forms that must stay active, set their display trigger to a time delay (e.g. 5 seconds) or scroll depth (e.g. 40%) rather than 'Immediately on page load'. This defers Klaviyo form rendering until after the critical rendering path is complete.
5. Turn off Klaviyo's A/B testing on forms if not actively needed. Multiple test variants cause the snippet to fetch additional assets on load; disabling unused tests in Klaviyo → Forms → [Form] → A/B Test reduces this overhead.
6. After making changes, validate page speed improvement using Google PageSpeed Insights or WebPageTest and confirm the Klaviyo script no longer appears as a render-blocking resource in the waterfall chart.

<img
  src="product-image.webp"
  alt="Descriptive product alt text"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>