Magento 2 Core Web Vitals Extension: LCP, FID, INP and CLS Monitoring (Hyva + Luma)

Measure real Core Web Vitals from real shoppers on every page of your Magento 2 store. Panth Core Web Vitals injects a lightweight JavaScript snippet that uses the native browser PerformanceObserver API to collect LCP, FID, INP, and CLS. It also adds resource hints (dns-prefetch, preconnect, prefetch) and performance HTTP headers from the admin, with no third-party library needed. Works on both Hyva and Luma.

Product page: kishansavaliya.com/magento-2-corewebvitals.html

Quick Answer

What is Panth Core Web Vitals? It is a Magento 2 extension that collects LCP, FID, INP, and CLS from every real visitor using the browser's native PerformanceObserver API, then sends those metrics to GA4 or a custom endpoint so you can track your Google ranking signals over time.

What does it add to my store?

• A lightweight monitoring snippet that records LCP, FID, INP, and CLS on every frontend page load, with no polling and no third-party library.
• Per-metric targets you set in the admin, so each metric is rated as good, needs improvement, or poor.
• Resource hints (dns-prefetch, preconnect, prefetch) you configure from the admin to reduce latency for fonts, CDNs, and analytics origins.
• Performance HTTP headers (Server-Timing, X-DNS-Prefetch-Control, Link rel=preconnect) added to every frontend response.
• GA4 and custom beacon integration so metrics go to your own analytics pipeline.

Which themes are supported? Both Hyva and Luma. The snippet loads via standard layout XML and has no theme-specific dependencies.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Kishan Savaliya

Top Rated Plus on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

Panth Infotech Agency

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

Table of Contents

• Who Is It For
• Key Features
• Metric Thresholds
• Compatibility
• Installation
• Configuration
• How It Works
• FAQ
• Support
• About Panth Infotech
• Quick Links

Who Is It For

• Merchants who care about Google rankings and want field data (real user measurements) instead of synthetic lab tests from PageSpeed Insights.
• Stores with slow LCP or high CLS that want to identify problem pages using real visitor data before making code changes.
• Hyva and Luma stores that need a zero-dependency monitoring snippet that loads without blocking the page.
• Developers and agencies who want to send Core Web Vitals to GA4 or a custom RUM endpoint without writing the JavaScript themselves.
• Multi-site merchants who need per-store-view metric targets and resource hint configuration.

Key Features

Real-time Metric Collection (PerformanceObserver API)

• LCP tracking using the largest-contentful-paint entry type, captured on the final paint before user input.
• FID tracking using the first-input entry type, for legacy browser dashboards.
• INP tracking using the event entry type, the official Core Web Vital since March 2024.
• CLS tracking using the layout-shift entry type with session-window aggregation.
• Zero runtime dependencies, vanilla JavaScript, loads with async + defer.
• Debug mode that logs all collected metrics to the browser console and exposes window.coreWebVitalsMetrics for inspection.

Per-metric Targets and Ratings

• Each metric (LCP, FID/INP, CLS) can be independently enabled or disabled from the admin.
• Set your own target thresholds for each metric. The module rates each value as good, needs improvement, or poor against your targets and against Google's official thresholds.

Resource Hints

• DNS prefetch - one domain per line in the admin, outputs <link rel="dns-prefetch"> in the page head to resolve hostnames early.
• Preconnect - performs DNS, TCP, and TLS handshake ahead of time for critical origins like fonts and CDNs.
• Prefetch - low-priority resource download for the next page navigation.

Performance HTTP Headers

• Server-Timing: php;dur=NN added to every frontend response so PHP execution time is visible in DevTools.
• X-DNS-Prefetch-Control: on to enable speculative DNS on Chromium and WebKit.
• Link: rel=preconnect at the HTTP header layer so the browser can act before HTML parsing begins.

Analytics Integration

• GA4 integration via gtag, sends metrics as events with event_category: "Web Vitals". Enter an optional GA4 Measurement ID to route to a specific property.
• Custom beacon endpoint via navigator.sendBeacon for your own RUM pipeline.
• Browser CustomEvents dispatched for each metric (coreWebVitals:lcp, coreWebVitals:fid, coreWebVitals:inp, coreWebVitals:cls) for third-party integrations.

Admin and Code Quality

• Admin section at Stores → Configuration → Panth Extensions → Core Web Vitals.
• Scope-aware settings that respect Magento's default, website, and store view hierarchy.
• MEQP-style code with constructor DI only and no ObjectManager.
• Translation ready, every label uses Magento's __() function.

Metric Thresholds

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

Compatibility

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 from the product page.
2. Extract it to app/code/Panth/CoreWebVitals/ in your Magento install.
3. Make sure Panth_Core is installed too (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

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

After install, open:

Admin → Stores → Configuration → Panth Extensions → Core Web Vitals

Set Enable Module = Yes and flush the cache.

Configuration

Go to Stores → Configuration → Panth Extensions → Core Web Vitals.

General Settings

LCP Monitoring

FID / INP Monitoring

CLS Monitoring

Resource Hints

How It Works

1. When the module is enabled, a block renders core-web-vitals.phtml in the page head via layout XML.
2. The template outputs a small JavaScript snippet that registers PerformanceObserver listeners for largest-contentful-paint, first-input, event (INP), and layout-shift entry types.
3. Each time a metric value is captured, it is rated against your configured target and Google's thresholds, then sent to GA4 via gtag if present, to your custom beacon endpoint via navigator.sendBeacon, and as a browser CustomEvent.
4. If Debug Mode is on, every metric value is also logged to the browser console.
5. A second block renders resource-hints.phtml, which outputs <link> tags for dns-prefetch, preconnect, and prefetch from your admin settings.
6. A response plugin adds the Server-Timing, X-DNS-Prefetch-Control, and Link headers to every frontend HTTP response.

FAQ

Does this replace Google PageSpeed Insights?

No. PageSpeed Insights runs synthetic lab tests from Google's servers. This module collects field data from your real visitors, which is what Google actually uses as a ranking signal.

Will the snippet slow down my pages?

No. The snippet loads with defer, uses the native PerformanceObserver API with no polling, and has no third-party library dependency.

Is INP the same as FID?

INP replaced FID as an official Core Web Vital in March 2024. The module tracks both. FID is kept for legacy dashboards and backwards compatibility. INP is the current ranking signal.

Does it work on Hyva themes?

Yes. The snippet and resource hints load via standard default_head_blocks.xml and have no Hyva-specific or Luma-specific code.

Does it send data to third parties by default?

No. With the default configuration, no data leaves your store unless you have GA4 (gtag) loaded on your pages. You control every destination via the admin settings.

Is it GDPR / CCPA compliant?

Yes. No personal data is collected. The metrics are anonymous performance numbers. You decide where they are sent.

Does it work with multi-store setups?

Yes. All settings respect Magento's scope hierarchy: default, website, and store view.

Can I use it with Adobe Commerce Cloud and Fastly?

Yes. The Server-Timing and Link headers work with Fastly's VCL. Make sure your VCL does not strip these headers if you want them visible in DevTools.

Does Panth Core Web Vitals need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency that Composer installs for you automatically.

Support

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for Core Web Vitals optimization, Hyva migrations, Luma speed tuning, or Adobe Commerce Cloud performance work? Get a free quote in 24 hours:

About Panth Infotech

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 that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

SEO Keywords: magento 2 core web vitals, 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, magento 2 performance monitoring, magento 2 page speed extension, real user monitoring magento, RUM magento 2, PerformanceObserver magento 2, magento 2 resource hints, dns-prefetch magento 2, preconnect magento 2, prefetch magento 2, magento 2 Server-Timing header, magento 2 GA4 web vitals, google analytics 4 core web vitals magento, magento 2 performance extension, magento 2.4.8 performance, hyva core web vitals, luma core web vitals, magento 2 google ranking performance, magento 2 web vitals extension, magento 2 speed extension, mage2kishan corewebvitals, panth core web vitals, panth infotech, kishan savaliya magento, hire magento performance developer, top rated plus upwork, adobe commerce cloud performance, fastly magento performance