Core Web Vitals (iframes)

Core Web Vitals (iframes) shows you Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP), First Contentful Paint (FCP), and Time to First Byte (TTFB) — separately for the top page and every iframe on it. Most Web Vitals tools only report numbers for the top frame. If your page is a thin shell around third-party iframes — storefronts, embedded checkouts, payment widgets, ad slots, video players, third-party comments, marketing pixels — those top-frame numbers can hide the actual user experience. This extension measures each frame independently so you can see which one is dragging the score down. WHAT IT SHOWS • Per-frame LCP, CLS, INP, FCP, and TTFB measured live as you browse. • Every frame on the page, including dynamically inserted iframes and about:blank frames. • Standard web.dev/vitals thresholds: good / needs-improvement / poor, with green / amber / red color coding. • A small LCP badge inside each frame. Click to expand into a 5-metric panel. • A toolbar popup with a per-frame summary, copy-as-JSON, and clear-this-tab actions. • A color strip on the toolbar icon reflecting the worst LCP rating across all frames in the tab. PINPOINT THE CULPRIT ELEMENT • Aim button on LCP, CLS, and INP highlights the responsible DOM element on the page — the LCP image, the elements that shifted, the slowest INP target. • Optional "always on" mode keeps the LCP element outlined while you scroll. • Optional "show targets" mode keeps LCP / CLS / INP outlines drawn continuously. EXPORTABLE DATA • Every metric has a "copy as JSON" button. The popup also has a "copy all" button that dumps every frame's metrics for the active tab. • JSON includes the metric name, value, rating, delta, navigation type, and a snapshot of the underlying PerformanceEntry data — ready to paste into a bug report, a Slack message, or a regression spreadsheet. BUILT ON OFFICIAL TOOLING Built on the official web-vitals library from the Chrome team (https://github.com/GoogleChrome/web-vitals) with reportAllChanges enabled, so you see every intermediate value — especially useful for CLS and INP, which evolve as the user interacts. PRIVACY • No telemetry. No analytics. No remote servers. No accounts. • The extension reads what the browser already exposes via the standard Performance APIs and never sends it anywhere. • Per-tab metrics live in chrome.storage.session and are cleared when Chrome restarts. Your three preferences live in chrome.storage.local and never leave your device. WHO IT'S FOR • Frontend engineers shipping pages that embed third-party widgets. • Performance teams auditing why a "fast" page feels slow in the field. • E-commerce teams diagnosing checkout iframes, storefront embeds, and ad-slot regressions. • Anyone curious about how their CMS-rendered iframes are actually performing. METRICS AND THRESHOLDS LCP ≤ 2.5 s good · ≤ 4.0 s needs-improvement · > 4.0 s poor CLS ≤ 0.10 good · ≤ 0.25 needs-improvement · > 0.25 poor INP ≤ 200 ms good · ≤ 500 ms needs-improvement · > 500 ms poor FCP ≤ 1.8 s good · ≤ 3.0 s needs-improvement · > 3.0 s poor TTFB ≤ 0.8 s good · ≤ 1.8 s needs-improvement · > 1.8 s poor SETTINGS • Show badges (default ON) — show the LCP badge in every frame on every page. • Always highlight LCP element (default OFF) — keep a box drawn around the LCP element at all times. • Show targets (default OFF) — outline the LCP image, CLS shifters, and INP target continuously. PERMISSIONS • storage — persist your three preferences locally and per-tab metric state. • tabs — resolve the active tab in the popup and set the toolbar badge color per tab. • webNavigation — reset a tab's metrics when its top frame actually navigates to a new URL. • activeTab — send a "highlight this element" message into the active tab. • Host permission for all sites — inject the metric collector into every page and iframe; required because the extension's purpose is to measure pages on any site you visit. None of these are used for tracking. The extension makes no network requests.