Petlio Speed Optimization (Shopify)

Petlio Speed Optimization (Shopify)

Petlio offers longevity supplements and proactive at-home screening to help pets live longer, healthier lives, including the Longevity+ supplement for dogs with NMN, Resveratrol and more.

Problem (slow store, low conversion)

Speed isn’t a bonus; it’s a conversion lever. Petlio—makers of longevity supplements and at-home screening for pets—needed their mobile experience to feel instant for busy pet parents.

Before our work, Petlio’s mobile Lighthouse scores showed the classic friction points shoppers feel:

  • Performance score: 58
  • FCP: 3.8s (slow first paint = low perceived speed)
  • LCP: 9.5s (hero/product imagery far too late)
  • Speed Index: 11.7s (inefficient rendering path)
  • CLS: 0.026 (mostly stable, but room to tighten)

When pages hesitate or shift, users bounce; Google also cares about real-world speed and stability via Core Web Vitals (LCP/INP/CLS) at the 75th percentile.
(Note: in lab runs, Lighthouse reports TBT as the proxy for interactivity because INP needs real interactions.) 


Process (tools & techniques)

Our approach combined a front-end performance audit with Shopify-specific hygiene. Theme: keep the main thread light, get the hero/LCP fast, and only load what a template truly needs.
 1. Theme & code hygiene — the foundation

  • Deferred/split non-critical JS; kept above-the-fold Liquid lean; inlined only critical CSS.
  • Removed duplicate libraries and long tasks from the initial render path.
  • Verified shifts in weight via Lighthouse Treemap.

 2. App diet — less global JS, more template logic

  • Uninstalled unused apps; replaced multi-tool widgets with lighter, single-purpose options.
  • Loaded scripts by template using App Embeds/exts (not site-wide).
  • Scheduled analytics/marketing tags after first paint or on interaction.

 3. Images & media — biggest, easiest wins

  • Converted hero/product media to WebP/AVIF, added responsive srcset/sizes, and lazy-loaded everything below the fold.
  • Preloaded only the LCP image (hero or primary product image) per template.

 4. Fonts & assets — free speed without design compromise

  • Hosted fonts same-origin, preloaded the first text-paint font, and used font-display: swap.
  • Trimmed families/weights; system-UI for UI chrome where brand allowed.

5. PDP & PLP specifics — where revenue lives

  • PDP: treated the primary product image as the LCP candidate; deferred reviews/recs until scroll/interaction.
  • PLP: right-sized thumbnails and deferred quick-add/filter JS.

(Why these moves? They map directly to LCP/CLS/INP goals and TBT reductions in the lab.)

Results (measurable numbers)

Petlio’s mobile experience now feels snappy and trustworthy—and the numbers prove it.

Mobile Lighthouse (Lighthouse 12, emulated device):

Metric Before After Improvement
Performance score 58 91 +33 points
First Contentful Paint (FCP) 3.8s 1.5s 2.3s faster
Largest Contentful Paint (LCP) 9.5s 3.4s 6.1s faster
Total Blocking Time (TBT) 10ms 40ms Still minimal & stable
Speed Index 11.7s 3.1s 8.6s faster
Cumulative Layout Shift (CLS) 0.026 0.022 Stable & improved


By bringing key templates inside Core Web Vitals targets (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 at p75) and tightening the lab proxies, Petlio strengthened the UX signals that support organic visibility and conversion.

Speed is now a baseline expectation—and every extra second costs real money. If your Shopify store hesitates, shifts, or ships too much JS, it’s leaking revenue.

Want results like Petlio’s? Let’s audit your theme, trim the app load, and get your LCP under control. Talk to OptiExperts

Let’s optimize your store 

Back to blog