How to track INP/LCP and correlate them with conversion?
Quick Answer
The most reliable way to track INP and LCP in Shopware is to combine real user monitoring (RUM) with analytics events tied directly to revenue and checkout behaviour. You need both performance data and business data in the same reporting layer—otherwise you can see slow pages, but not whether they actually hurt conversion. The setup below covers browser-side Web Vitals collection, Shopware event tracking, segmentation by template and device, and how to correlate poor performance with lost revenue.
Before You Start
- ✦ GA4 or another analytics platform — you need a reporting layer that can store conversion and revenue data alongside performance metrics.
- ✦ Theme access or Tag Manager access — Web Vitals tracking requires frontend JavaScript injection.
- ✦ Consistent page templates — category, product, cart, and checkout pages should be identifiable in analytics reports.
Install Web Vitals tracking
Start with real-user measurements instead of lab tools alone. Lighthouse scores are useful during development, but they don’t tell you what actual customers experience on mobile devices during traffic spikes. Add the Google web-vitals library to your Shopware storefront and send INP, LCP, CLS, and TTFB events into GA4 or your monitoring platform. This gives you performance data per session, device, country, and landing page.
- Install the web-vitals package or inject it through Tag Manager
- Send metric values as custom GA4 events
- Include page type and device category in each payload
import{onINP, onLCP} from 'web-vitals';
onINP((metric) = > {
gtag('event', 'web_vital_inp',
{value : metric.value, page_type : window.pageType});
});
onLCP((metric) = > {
gtag('event', 'web_vital_lcp',
{value : metric.value, page_type : window.pageType});
});Track conversion events
Performance metrics become useful only when tied to business outcomes. Track add-to-cart actions, checkout starts, completed purchases, and revenue in the same analytics property receiving INP and LCP data. Most stores already track purchases, but skip intermediate checkout steps. That makes it hard to identify where slow interactions damage conversion.
- Track add_to_cart and begin_checkout events
- Send order value and currency with purchase events
- Keep naming conventions consistent across all events
Segment by template type
A homepage with a poor LCP behaves very differently from a slow cart page. Split reporting by template type so you can identify where poor metrics affect revenue most. Product detail pages usually suffer from large gallery images and third-party widgets. Checkout pages often suffer from heavy validation scripts and payment SDKs.
- Attach page_type to every performance event
- Separate checkout from storefront reports
- Review mobile and desktop independently
Build correlation reports
Once data starts flowing, group sessions into performance buckets and compare conversion rate, average order value, and bounce rate. For example, compare users with LCP under 2.5 seconds against users above four seconds. This gives you an actual revenue impact number instead of a generic “site is slow” statement.
- Create custom dimensions for INP and LCP ranges
- Compare conversion rate across performance buckets
- Review trends weekly instead of daily
Prioritise fixes by revenue
Don’t optimise every page equally. Focus first on templates where poor INP or LCP clearly correlates with lower conversion or abandoned checkout sessions. That usually means PDPs, search results, and cart interactions. Many teams waste weeks improving homepage Lighthouse scores while checkout JavaScript remains slow on mobile devices.
- Fix checkout interaction delays before cosmetic homepage issues
- Remove unused third-party scripts aggressively
- Measure again after every major frontend change
Shopware Performance Tracking Checklist
0 of 7 completeMistakes Most Developers Make
! Tracking only Lighthouse scores
What happens: Teams optimise synthetic scores while real mobile users still experience slow interactions.
Fix: Collect real-user INP and LCP data from production traffic instead of relying only on lab reports.
! Mixing all templates together
What happens: Homepage performance hides slow product and checkout templates where revenue loss actually happens.
Fix: Split reporting by page type, device category, and funnel stage.
! Ignoring third-party JavaScript impact
What happens: Chat widgets, tracking scripts, and payment SDKs quietly destroy INP during checkout.
Fix: Audit JavaScript bundles regularly and defer or remove anything not tied to revenue.
Key Takeaway
The short version: tracking INP and LCP in Shopware only becomes valuable when you connect those metrics directly to conversion and revenue data. Use real-user monitoring, segment reports by template and device, and focus optimisation work on pages that affect checkout behaviour instead of chasing generic Lighthouse scores. Most stores discover that interaction delays in cart and checkout flows hurt revenue more than homepage load speed. Start with Step 1—that one alone handles most of it.
Related Answers
Was this answer helpful?
Your feedback helps us improve our answers.
Still need help?
Talk to our Shopware experts
We've handled GDPR/CCPA compliance for dozens of EU & US Shopware stores.