Real-time Core Web Vitals monitoring for Magento 2. Track LCP (Largest Contentful Paint), FID (First Input Delay), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) on every storefront page using the native browser PerformanceObserver API. Configure resource hints (dns-prefetch, preconnect, prefetch), emit performance HTTP headers (
Server-Timing,X-DNS-Prefetch-Control,Link), apply optimized font loading strategies, and collect aggregated metrics on a scheduled cron job — all from one unified admin section. Compatible with Magento 2.4.4 – 2.4.8, PHP 8.1 – 8.4, Hyva, and Luma.
Panth Core Web Vitals is a lightweight, production-ready performance observability module. It injects a micro-JavaScript snippet that leverages the native PerformanceObserver interface to capture LCP, FID/INP and CLS in real time — no third-party library, no blocking scripts, no extra render cost. Metrics are rated against Google's official good/needs-improvement/poor thresholds and dispatched through GA4 (gtag), a custom beacon endpoint (navigator.sendBeacon), or browser CustomEvents for your own RUM pipeline. Beyond measurement, the module ships server-side speed primitives: dns-prefetch / preconnect / prefetch tag generation, Server-Timing headers for PHP execution visibility, RFC 8288 Link preconnect headers, preload hints for critical fonts, and an hourly cron aggregator that persists rolling metric snapshots for trend analysis.
Get a free quote for your project in 24 hours — Core Web Vitals tuning, Hyva migration, Luma performance fixes, LCP/CLS optimization, and Adobe Commerce Cloud CDN configuration.
|
Top Rated Plus on Upwork 100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist |
Magento Development Team Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud |
Visit our website: kishansavaliya.com | Get a quote: kishansavaliya.com/get-quote
- Why Core Web Vitals Matter
- Key Features
- Metric Thresholds
- Compatibility
- Installation
- Configuration
- Resource Hints
- Performance HTTP Headers
- Font Loading Strategy
- Cron Metrics Collection
- Analytics Integration
- Troubleshooting
- FAQ
- Support
- About Panth Infotech
- Quick Links
Since 2021, Google uses Core Web Vitals as a direct ranking signal. A slow LCP, a janky CLS or an unresponsive INP does not only frustrate shoppers — it also demotes your storefront in organic search results, raises paid-ad CPCs via worse Quality Score, and kills conversion rates. Industry data consistently shows every 100 ms saved on LCP translates into measurable revenue uplift on eCommerce.
Panth Core Web Vitals gives you:
- Field data — real user measurements from every visitor, not synthetic lab tests
- Actionable levers — resource hints, font preloads, HTTP performance headers
- Trend visibility — cron-collected rolling snapshots for regression detection
- LCP tracking — Largest Contentful Paint, captured on the final paint event before user input
- FID tracking — First Input Delay for legacy browsers and backwards compatibility
- INP tracking — Interaction to Next Paint, the official replacement CWV since March 2024
- CLS tracking — Cumulative Layout Shift with session-window aggregation
- TTFB & FCP bonus metrics exposed via
window.coreWebVitalsMetrics - Zero runtime dependencies — vanilla JavaScript, ~3 KB gzipped, async +
defer
<link rel="dns-prefetch">— early DNS resolution (20–120 ms savings per origin)<link rel="preconnect" crossorigin>— DNS + TCP + TLS handshake ahead of time<link rel="prefetch">— low-priority download of next-page resources- Managed through a simple one-domain-per-line admin textarea
Server-Timing: php;dur=NN— PHP execution time visible in DevTools TimingX-DNS-Prefetch-Control: on— enables speculative DNS on supporting browsersLink: <https://...>; rel=preconnect— RFC 8288 preconnect at the header layer (fires before HTML parses)
- Emits
<link rel="preload" as="font" type="font/woff2" crossorigin>for critical fonts - Applies
font-display: swapguidance to eliminate FOIT (Flash of Invisible Text) - Reduces CLS caused by late-loading webfonts
- Hourly scheduled task that aggregates beacon-posted metrics into rolling buckets
- Rolling 7-day / 30-day snapshots for trend analysis
- Admin opt-out switch and auto-pruning of stale samples
- Auto-dispatch to Google Analytics 4 via
gtagwithevent_category: "Web Vitals" navigator.sendBeaconto a custom endpoint viawindow.panthCoreWebVitalsEndpoint- Browser
CustomEvents:coreWebVitals:lcp,coreWebVitals:fid,coreWebVitals:inp,coreWebVitals:cls
- Lives under Stores → Configuration → Panth Extensions → Core Web Vitals
- Unified Panth Infotech admin sidebar (via the free
Panth_Corebase module) - MEQP compliant, zero severity-10 violations
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2500 ms | ≤ 4000 ms | > 4000 ms |
| FID (First Input Delay) | ≤ 100 ms | ≤ 300 ms | > 300 ms |
| INP (Interaction to Next Paint) | ≤ 200 ms | ≤ 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
Targets align with Google's official web.dev/vitals thresholds.
| Requirement | Versions Supported |
|---|---|
| Magento Open Source | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 |
| Adobe Commerce | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 |
| Adobe Commerce Cloud | 2.4.4 — 2.4.8 |
| PHP | 8.1.x, 8.2.x, 8.3.x, 8.4.x |
| MySQL | 8.0+ |
| MariaDB | 10.4+ |
| Hyva Theme | 1.0+ (fully supported) |
| Luma Theme | Native support |
| Browsers | Chrome, Edge, Firefox, Safari 13+ (graceful no-op on older) |
Requires mage2kishan/module-core (free, installed automatically via Composer).
composer require mage2kishan/module-corewebvitals
bin/magento module:enable Panth_Core Panth_CoreWebVitals
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush- Download the latest release from Packagist or the Adobe Commerce Marketplace
- Extract to
app/code/Panth/CoreWebVitals/ - Ensure the base module
Panth_Coreis also present underapp/code/Panth/Core/ - Run the commands above starting from
bin/magento module:enable
bin/magento module:status Panth_CoreWebVitals
# Expected output: Module is enabledThen navigate to Admin → Stores → Configuration → Panth Extensions → Core Web Vitals and set Enable Module = Yes.
All settings live at Stores → Configuration → Panth Extensions → Core Web Vitals.
| Setting | Default | Description |
|---|---|---|
| Enable Module | No | Master switch. Injects the monitoring snippet on every frontend page. |
| Debug Mode | No | Logs metrics to DevTools console and exposes window.coreWebVitalsMetrics. Disable in production. |
| Send Metrics to Analytics | Yes | Forwards metrics to GA4 gtag or a custom beacon endpoint. |
| Setting | Default |
|---|---|
| Monitor LCP / Target LCP (ms) | Yes / 2500 |
| Monitor FID & INP / Target FID / Target INP | Yes / 100 / 200 |
| Monitor CLS / Target CLS | Yes / 0.1 |
| Setting | Description |
|---|---|
| DNS Prefetch Domains | One per line, no protocol. Example: fonts.googleapis.com |
| Preconnect Domains | One per line. Example: fonts.gstatic.com. Limit to 2–4 critical origins. |
| Prefetch URLs | One full URL per line for next-navigation prefetch. |
Resource hints tell the browser to do costly network work earlier than it would naturally schedule it. Configure each list under Resource Hints in the admin.
- dns-prefetch — resolves a hostname early, saving 20–120 ms on the first request to that origin
- preconnect — performs DNS + TCP + TLS upfront, ideal for fonts, analytics, and CDN origins
- prefetch — downloads a resource at low priority for the likely next page
All hints are output both as <link> tags in <head> and, where supported, mirrored into the HTTP Link response header so the browser can act before HTML parsing begins.
Once the module is enabled, every frontend response carries:
| Header | Purpose |
|---|---|
Server-Timing: php;dur=NN |
PHP execution time in ms — visible under DevTools Network → Timing |
X-DNS-Prefetch-Control: on |
Enables speculative DNS resolution on Chromium/WebKit |
Link: <https://...>; rel=preconnect; crossorigin |
RFC 8288 preconnect at the header layer — fires before HTML parse |
These headers are emitted by a lightweight HTTP response observer that runs after controller dispatch.
Late-rendering webfonts are a top cause of poor CLS and slow LCP. The module can:
- Emit
<link rel="preload" as="font" type="font/woff2" crossorigin>for fonts you list as critical - Encourage
font-display: swapvia layout examples — renders fallback text immediately - Reduce layout shift from font-metric swap by pairing preloads with
size-adjustfallbacks
Result: measurably lower CLS and a more stable LCP on above-the-fold text blocks.
A scheduled job (panth_corewebvitals_collect) runs hourly and:
- Aggregates beacon-posted samples into rolling 7-day / 30-day buckets
- Computes p50 / p75 / p95 percentiles per metric
- Prunes stale raw samples to keep storage lightweight
- Writes a summary row you can query for dashboards or alerting
Disable the cron via the Enable Metric Collection Cron toggle in the admin if you prefer a zero-server-state setup.
If gtag() is loaded, metrics are auto-sent as events with event_category: "Web Vitals". No extra config required.
<script>window.panthCoreWebVitalsEndpoint = 'https://your-collector.example.com/rum';</script>Metrics are POSTed as JSON via navigator.sendBeacon.
window.addEventListener('coreWebVitals:lcp', (e) => console.log(e.detail));
window.addEventListener('coreWebVitals:inp', (e) => console.log(e.detail));
window.addEventListener('coreWebVitals:cls', (e) => console.log(e.detail));| Symptom | Cause | Fix |
|---|---|---|
| No metrics in console | Module disabled or debug off | Enable both + cache:flush |
PerformanceObserver is not defined |
Very old browser (IE11) | Expected — script safely no-ops |
| GA4 events missing | gtag not present |
Verify GA4 tag + "Send Metrics to Analytics" = Yes |
Resource hint <link> missing |
Module off or no domains configured | Enable + add domains under Resource Hints |
Server-Timing header missing |
Full-page cache (Varnish/Fastly) cached a response emitted while module was disabled | Purge full-page cache |
Enable Debug Mode and inspect var/log/panth_corewebvitals.log for detailed output.
No — PSI runs lab synthetic tests. This module captures field (real-user) data from every actual visitor, which is what Google uses for ranking.
No. The snippet is ~3 KB gzipped, loads with defer, and uses the native PerformanceObserver API with zero polling.
INP replaced FID as an official Core Web Vital in March 2024. The module tracks both — FID for legacy dashboards, INP for the current ranking signal.
Yes, fully. The snippet is theme-agnostic and loads via standard default_head_blocks.xml.
No. Metrics only go to your own GA4 property (if gtag is present) or your own beacon endpoint. No data ever leaves your infrastructure otherwise.
Yes — no personal data is collected. Metrics are anonymous performance numbers. You control the destination entirely.
Yes. The Server-Timing and Link headers integrate cleanly with Fastly's VCL. Ensure your VCL does not strip these headers.
Yes. All settings respect Magento's scope hierarchy (default → website → store view).
| Channel | Contact |
|---|---|
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +91 84012 70422 | |
| GitHub Issues | github.com/mage2sk/module-corewebvitals/issues |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
Response time: 1–2 business days.
Looking for Core Web Vitals optimization, Hyva migrations, Luma speed tuning, or Adobe Commerce Cloud performance engineering? Get a free quote in 24 hours:
Panth Core Web Vitals is distributed under a proprietary license — see LICENSE.txt.
Built and maintained by Kishan Savaliya — kishansavaliya.com — a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.
Panth Infotech is a Magento 2 development agency specialising in performance, SEO, checkout and AI-powered storefront extensions for both Hyva and Luma. Our catalogue covers 34+ modules built to MEQP standards and continuously tested against Magento 2.4.4 – 2.4.8 with PHP 8.1 – 8.4.
Browse the full extension catalogue on Adobe Commerce Marketplace or Packagist.
- 🌐 Website: kishansavaliya.com
- 💬 Get a Quote: kishansavaliya.com/get-quote
- 👨💻 Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
- 🏢 Upwork Agency: upwork.com/agencies/1881421506131960778
- 📦 Packagist: packagist.org/packages/mage2kishan/module-corewebvitals
- 🐙 GitHub: github.com/mage2sk/module-corewebvitals
- 🛒 Adobe Marketplace: commercemarketplace.adobe.com
- 📧 Email: kishansavaliyakb@gmail.com
- 📱 WhatsApp: +91 84012 70422
Ready to score green on every Core Web Vital?
SEO Keywords: core web vitals magento, core web vitals magento 2, magento 2 LCP, largest contentful paint magento, magento 2 FID, first input delay magento, magento 2 INP, interaction to next paint magento, magento 2 CLS, cumulative layout shift magento, page speed magento, magento 2 performance monitoring, real user monitoring magento, RUM magento 2, PerformanceObserver magento, magento 2 resource hints, dns-prefetch magento, preconnect magento, prefetch magento, magento 2 Server-Timing header, magento 2 Link header RFC 8288, magento 2 font preload, font-display swap magento, magento 2 web vitals cron, magento 2 GA4 web vitals, google analytics 4 core web vitals magento, magento 2 page speed optimization, magento 2.4.8 performance, hyva core web vitals, luma core web vitals, magento 2 SEO performance, google ranking signal magento, magento 2 speed extension, mage2kishan corewebvitals, panth infotech core web vitals, kishan savaliya magento performance, hire magento performance developer, adobe commerce cloud performance, fastly server-timing magento