Core Web Vitals Monitor for Magento 2

What you get

Panth Core Web Vitals — Real-time LCP, FID, INP & CLS Monitoring for Magento 2

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.

Key Features

Real-time Monitoring (PerformanceObserver API)

• 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

Resource Hints

• <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

Performance HTTP Headers

• Server-Timing: php;dur=NN — PHP execution time visible in DevTools Timing
• X-DNS-Prefetch-Control: on — enables speculative DNS on supporting browsers
• Link: <https://...>; rel=preconnect — RFC 8288 preconnect at the header layer (fires before HTML parses)

Optimized Font Loading

• Emits <link rel="preload" as="font" type="font/woff2" crossorigin> for critical fonts
• Applies font-display: swap guidance to eliminate FOIT (Flash of Invisible Text)
• Reduces CLS caused by late-loading webfonts

Cron Metrics Collection

• 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

Analytics Integration

• Auto-dispatch to Google Analytics 4 via gtag with event_category: "Web Vitals"
• navigator.sendBeacon to a custom endpoint via window.panthCoreWebVitalsEndpoint
• Browser CustomEvents: coreWebVitals:lcp, coreWebVitals:fid, coreWebVitals:inp, coreWebVitals:cls

Admin Foundation

• Lives under Stores → Configuration → Panth Extensions → Core Web Vitals
• Unified Panth Infotech admin sidebar (via the free Panth_Core base module)
• MEQP compliant, zero severity-10 violations

Metric Thresholds

Targets align with Google's official web.dev/vitals thresholds.

Resource Hints

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.

Performance HTTP Headers

Once the module is enabled, every frontend response carries:

These headers are emitted by a lightweight HTTP response observer that runs after controller dispatch.

Font Loading Strategy

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: swap via layout examples — renders fallback text immediately
• Reduce layout shift from font-metric swap by pairing preloads with size-adjust fallbacks

Result: measurably lower CLS and a more stable LCP on above-the-fold text blocks.

Cron Metrics Collection

A scheduled job (panth_corewebvitals_collect) runs hourly and:

1. Aggregates beacon-posted samples into rolling 7-day / 30-day buckets
2. Computes p50 / p75 / p95 percentiles per metric
3. Prunes stale raw samples to keep storage lightweight
4. 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.

Analytics Integration

Google Analytics 4

If gtag() is loaded, metrics are auto-sent as events with event_category: "Web Vitals". No extra config required.

Custom Beacon Endpoint

<script>window.panthCoreWebVitalsEndpoint = 'https://your-collector.example.com/rum';</script>

Metrics are POSTed as JSON via navigator.sendBeacon.

Browser CustomEvents

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));

Troubleshooting

Enable Debug Mode and inspect var/log/panth_corewebvitals.log for detailed output.

Quick Links

• 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

Compatibility

Requires mage2kishan/module-core (free, installed automatically via Composer).

Installation

Composer Installation (Recommended)

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

Manual Installation via ZIP

1. Download the latest release from Packagist or the Adobe Commerce Marketplace
2. Extract to app/code/Panth/CoreWebVitals/
3. Ensure the base module Panth_Core is also present under app/code/Panth/Core/
4. Run the commands above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_CoreWebVitals
# Expected output: Module is enabled

Then navigate to Admin → Stores → Configuration → Panth Extensions → Core Web Vitals and set Enable Module = Yes.

Configuration

All settings live at Stores → Configuration → Panth Extensions → Core Web Vitals.

General Settings

Metric Targets

Resource Hints

License

Panth Core Web Vitals is distributed under a proprietary license — see LICENSE.txt.