Skip to content
heapbyte - A name of excellence

Service · Optimise & Scale

Core Web Vitals

We tune what real users experience — LCP, INP and CLS from field data pulled from your own traffic — then wire the pipeline so nobody can quietly undo it.

  • web-vitals
  • Lighthouse CI
  • Chrome UX Report
  • Liquid
Group
Optimise & Scale
Starts with
Technical audit
Delivery
Git + staging theme
Handover
Written documentation

01Overview

Core Web Vitals work sits at the intersection of shopify speed optimization and plain engineering discipline: measuring what real customers experience, finding the specific bottleneck, and fixing it at the template or asset level rather than papering over it with an app.

Most stores we see have already tried a speed app. It moves a lab score and does nothing for field data, because the real cost is usually render-blocking scripts, oversized hero images or a bloated Liquid template — none of which a plugin can fix from the outside.

The work is measured against your own baseline, not an industry benchmark, and the fix is enforced in CI so it doesn't quietly regress the next time someone adds a tag.

02The problem

Lab scores improve, field data does not, and six weeks later a new app tag or an unoptimised hero image puts the numbers back where they started. Nobody owns the regression because nothing measured it happening.

03You will recognise this if

  • Mobile LCP sits above three seconds
  • Layout shifts on product pages
  • Speed gains disappear after every campaign
  • Nobody can say why a page got slower this quarter
  • Marketing keeps adding tags with no performance sign-off

04How we work on it

  1. 01

    Field data baseline

    Real-user metrics pulled via CrUX and RUM, segmented by template, device and connection type. This is the number the audit is measured against, not a synthetic Lighthouse run.

  2. 02

    Critical path surgery

    The above-the-fold render path is rebuilt: image strategy, font loading, deferred hydration and script triage all get worked through in order of impact.

  3. 03

    Third-party triage

    Every analytics, review and marketing tag is measured for load cost against business value. Some get removed, some get deferred, and owners are named for what stays.

  4. 04

    Server and edge tuning

    Theme render time, Liquid complexity and CDN caching rules are reviewed together, since server latency shows up directly in LCP.

  5. 05

    Budgets in CI

    Performance budgets are enforced in the deploy pipeline so a regression fails the build, not the quarter.

  6. 06

    Handover and monitoring

    Dashboards and alert thresholds are handed over with documentation, so the team that inherits the store can see a regression the day it happens.

04What you get

Deliverables, not decks.

  • Field-data performance baseline by template and device
  • Prioritised remediation plan
  • Critical rendering path rebuild
  • Image and font loading strategy
  • Third-party script audit with cost/value scoring
  • CI performance budgets and build gating
  • Real-user monitoring dashboard
  • Handover documentation for the dev team
assets/vitals.ts
1// field-data first — never lab scores alone2const budget = { lcp: 1800, tbt: 120, cls: 0.05 };3 4onCLS(send); onINP(send); onLCP(send);5// regressions fail the deploy, not the quarter

Delivery pipeline

  1. Audit
  2. Scope
  3. Build
  4. QA
  5. Measure

05What changes

Field LCP
Largest Contentful Paint brought down and kept down across the templates that carry the most traffic.
Fewer layout shifts
CLS-causing patterns — late-loading images, injected banners, web fonts — identified and fixed at source.
Regression protection
A CI budget in place so the next deploy that adds weight fails the build instead of the site.

06How an engagement runs

  1. 01

    Audit

    We pull field data across your templates and devices and identify the specific bottlenecks, then walk through the findings with your team before any code changes.

  2. 02

    Scope

    A prioritised remediation plan is agreed, ordered by expected impact against effort, with a clear line drawn around what is and isn't in scope.

  3. 03

    Delivery

    Fixes ship incrementally with before/after field data at each stage, finishing with monitoring and CI budgets handed over to your team.

07Stack

  • web-vitals
  • Lighthouse CI
  • Chrome UX Report
  • Liquid
  • Cloudflare / CDN rules

09Questions

Core Web Vitals

Send us the store and the symptom.

A senior engineer reads it, tells you what is actually going on, and scopes only what the evidence supports.