// CrUX Lens — https://cruxlens.dev // Copyright (C) 2026 Scott Leonard // Licensed under the GNU Affero General Public License v3.0 or later. // See the LICENSE file in the project root, or https://www.gnu.org/licenses/agpl-3.0.html const { useState, useEffect, useRef } = React; const ORIGIN = "https://www.mywebsite.com"; const TEST_URL = "https://www.mywebsite.com/full-relative-path"; const METRIC_LABELS = { largest_contentful_paint: "LCP", interaction_to_next_paint: "INP", cumulative_layout_shift: "CLS", first_contentful_paint: "FCP", experimental_time_to_first_byte: "TTFB", LARGEST_CONTENTFUL_PAINT: "LCP", INTERACTION_TO_NEXT_PAINT: "INP", CUMULATIVE_LAYOUT_SHIFT: "CLS", FIRST_CONTENTFUL_PAINT_MS: "FCP", EXPERIMENTAL_TIME_TO_FIRST_BYTE: "TTFB", }; const METRIC_UNITS = { largest_contentful_paint: "ms", interaction_to_next_paint: "ms", cumulative_layout_shift: "", first_contentful_paint: "ms", experimental_time_to_first_byte: "ms", LARGEST_CONTENTFUL_PAINT: "ms", INTERACTION_TO_NEXT_PAINT: "ms", CUMULATIVE_LAYOUT_SHIFT: "", FIRST_CONTENTFUL_PAINT_MS: "ms", EXPERIMENTAL_TIME_TO_FIRST_BYTE: "ms", }; const METRIC_THRESHOLDS = { largest_contentful_paint: { good: 2500, poor: 4000 }, interaction_to_next_paint: { good: 200, poor: 500 }, cumulative_layout_shift: { good: 0.1, poor: 0.25 }, first_contentful_paint: { good: 1800, poor: 3000 }, experimental_time_to_first_byte: { good: 800, poor: 1800 }, LARGEST_CONTENTFUL_PAINT: { good: 2500, poor: 4000 }, INTERACTION_TO_NEXT_PAINT: { good: 200, poor: 500 }, CUMULATIVE_LAYOUT_SHIFT: { good: 0.1, poor: 0.25 }, FIRST_CONTENTFUL_PAINT_MS: { good: 1800, poor: 3000 }, EXPERIMENTAL_TIME_TO_FIRST_BYTE: { good: 800, poor: 1800 }, }; const psiCurl = (url, strategy) => `# PageSpeed Insights — origin + URL field data (no API key needed) curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url || "https://example.com")}&strategy=${strategy || "mobile"}&category=performance" > psi_result.json echo "Saved to psi_result.json — paste contents into the dashboard"`; function generateBqSql(origin, testUrl, months, device) { const yyyymmList = months.map(m => m.year * 100 + (m.month + 1)); const inClause = yyyymmList.join(", "); const monthLabels = months.map(m => { const d = new Date(m.year, m.month); return d.toLocaleDateString("en-US", { month: "short", year: "numeric" }); }); const deviceFilter = device === "all" ? "" : `\n AND device = '${device}'`; const deviceLabel = device === "all" ? "all devices" : device; const main = `-- CrUX BigQuery: ${origin} CWV — ${monthLabels[0]}–${monthLabels[monthLabels.length - 1]} (${deviceLabel}) -- Run at: https://console.cloud.google.com/bigquery -- Note: The most recent month's table may not exist yet -- (CrUX monthly tables release on the 2nd Tuesday after month ends) SELECT yyyymm, device, origin, p75_lcp, p75_inp, p75_cls, ROUND(fast_lcp / (fast_lcp + avg_lcp + slow_lcp), 3) AS pct_good_lcp, ROUND(fast_inp / (fast_inp + avg_inp + slow_inp), 3) AS pct_good_inp, ROUND(small_cls / (small_cls + medium_cls + large_cls), 3) AS pct_good_cls, ROUND(slow_inp / (fast_inp + avg_inp + slow_inp), 3) AS pct_poor_inp FROM \`chrome-ux-report.materialized.device_summary\` WHERE origin = '${origin}'${deviceFilter} AND yyyymm IN (${inClause}) ORDER BY yyyymm;`; const trimmedUrl = testUrl?.trim(); if (!trimmedUrl) return main; const bonus = `-- BONUS: Compare specific article URL vs origin SELECT yyyymm, IF(url = origin, 'ORIGIN', 'ARTICLE') AS scope, url, p75_lcp, p75_inp, p75_cls FROM \`chrome-ux-report.materialized.device_summary\` WHERE ( origin = '${origin}' OR url = '${trimmedUrl}' )${deviceFilter} AND yyyymm IN (${inClause}) ORDER BY yyyymm, scope;`; return `${main}\n\n\n${bonus}`; } const BQ_DEVICES = [ { value: "phone", label: "Phone" }, { value: "desktop", label: "Desktop" }, { value: "tablet", label: "Tablet" }, { value: "all", label: "All" }, ]; function fmt(metric, value) { const v = parseFloat(value); if (metric.toLowerCase().includes("layout_shift") || metric.toLowerCase().includes("cls")) return v.toFixed(2); return Math.round(v).toLocaleString(); } function status(metric, p75) { const t = METRIC_THRESHOLDS[metric]; if (!t) return "unknown"; const v = parseFloat(p75); if (v <= t.good) return "good"; if (v <= t.poor) return "ni"; return "poor"; } const SC = { good: "#0d7c3e", ni: "#d48c00", poor: "#d4230f", unknown: "#888" }; const SB = { good: "rgba(13,124,62,0.06)", ni: "rgba(212,140,0,0.06)", poor: "rgba(212,35,15,0.06)", unknown: "#f5f5f3" }; const FORM_FACTORS_CRUX = [ { value: "PHONE", label: "Phone" }, { value: "DESKTOP", label: "Desktop" }, { value: "TABLET", label: "Tablet" }, { value: "ALL", label: "All" }, ]; const FORM_FACTORS_PSI = [ { value: "mobile", label: "Mobile" }, { value: "desktop", label: "Desktop" }, ]; const LOOKUP_MODES = [ { value: "single", label: "Single URL" }, { value: "sitemap", label: "Sitemap / Feed" }, { value: "list", label: "URL List" }, ]; const parseUrlList = (text) => text.split(/\r?\n/).map(s => s.trim()).filter(s => /^https?:\/\//i.test(s)).slice(0, 100); const BATCH_METRICS = ["interaction_to_next_paint", "largest_contentful_paint", "cumulative_layout_shift"]; function FormFactorSelect({ value, onChange, options }) { return (
{options.map(opt => ( ))}
); } function ContextStrip({ metrics }) { const items = []; const rt = metrics?.largest_contentful_paint_resource_type?.fractions; if (rt && (rt.image != null || rt.text != null)) { const img = Math.round((rt.image || 0) * 100); const txt = Math.round((rt.text || 0) * 100); items.push({ label: "LCP resource", primary: `${img}% image`, secondary: `${txt}% text`, bar: null, }); } const rtt = metrics?.round_trip_time; if (rtt?.percentiles?.p75 != null && Array.isArray(rtt.histogram) && rtt.histogram.length === 3) { const h = rtt.histogram; items.push({ label: "Round-trip time (p75)", primary: `${rtt.percentiles.p75}ms`, secondary: `${Math.round((h[0].density || 0) * 100)}% fast · ${Math.round((h[1].density || 0) * 100)}% ok · ${Math.round((h[2].density || 0) * 100)}% slow`, bar: [ { w: (h[0].density || 0) * 100, c: SC.good }, { w: (h[1].density || 0) * 100, c: SC.ni }, { w: (h[2].density || 0) * 100, c: SC.poor }, ], }); } const nt = metrics?.navigation_types?.fractions; if (nt) { const direct = Math.round(((nt.navigate || 0) + (nt.navigate_cache || 0)) * 100); const bf = Math.round(((nt.back_forward || 0) + (nt.back_forward_cache || 0)) * 100); const bfcache = Math.round((nt.back_forward_cache || 0) * 100); const reload = Math.round((nt.reload || 0) * 100); items.push({ label: "Navigation types", primary: `${direct}% direct`, secondary: `Back/fwd ${bf}% · Reload ${reload}% · BFCache ${bfcache}%`, bar: null, }); } if (items.length === 0) return null; return (
Context
{items.map(it => (
{it.label}
{it.primary}
{it.bar && (
{it.bar.map((seg, i) =>
)}
)}
{it.secondary}
))}
); } function LcpBreakdown({ metrics }) { const phases = [ { key: "largest_contentful_paint_image_time_to_first_byte", label: "Server (TTFB)", color: "#1a1a2e" }, { key: "largest_contentful_paint_image_resource_load_delay", label: "Load delay", color: "#4a5668" }, { key: "largest_contentful_paint_image_resource_load_duration", label: "Load duration", color: "#8899a8" }, { key: "largest_contentful_paint_image_render_delay", label: "Render delay", color: "#c8d6e5" }, ]; const values = phases.map(p => ({ ...p, p75: metrics?.[p.key]?.percentiles?.p75 })); const present = values.filter(v => v.p75 != null); if (present.length === 0) return null; const total = present.reduce((s, v) => s + (v.p75 || 0), 0); const imgFrac = metrics?.largest_contentful_paint_resource_type?.fractions?.image; return (

LCP phase breakdown

{imgFrac != null && Image LCP on {Math.round(imgFrac * 100)}% of loads}
{values.map(v => v.p75 == null ? null : (
))}
{values.map(v => (
{v.label}
{v.p75 != null ? `${v.p75}ms` : "—"}
))}
These sub-phases sum to roughly the image LCP (~{total}ms). The largest segment is usually the best fix target — render delay often points to main-thread work, load duration to image size, load delay to blocking resources, TTFB to server response.
); } function StatusCard({ metric, p75, distributions }) { const s = status(metric, p75); const label = METRIC_LABELS[metric] || metric; const unit = METRIC_UNITS[metric] || ""; const good = distributions?.[0]?.proportion; const ni = distributions?.[1]?.proportion; const poor = distributions?.[2]?.proportion; return (
{label} (p75)
{fmt(metric, p75)}{unit}
{good != null && (
{(good * 100).toFixed(0)}% good {(poor * 100).toFixed(0)}% poor
)}
{s === "ni" ? "Needs Improvement" : s === "good" ? "Good" : s === "poor" ? "Poor" : "—"}
); } function CopyBlock({ text, copied, onCopy, maxHeight = 260 }) { const preRef = useRef(null); const handleCopy = () => { // Try clipboard API first, fall back to selecting text if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => onCopy()).catch(() => selectFallback()); } else { selectFallback(); } }; const selectFallback = () => { if (preRef.current) { const range = document.createRange(); range.selectNodeContents(preRef.current); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } onCopy(); }; return ( 
{text}
); } function InfoTooltip({ children }) { const [open, setOpen] = useState(false); const timeoutRef = useRef(null); const show = () => { clearTimeout(timeoutRef.current); setOpen(true); }; const hide = () => { timeoutRef.current = setTimeout(() => setOpen(false), 150); }; return ( ? {open && ( {children} )} ); } function BatchResults({ data }) { const [sortKey, setSortKey] = useState(null); const [sortDir, setSortDir] = useState("asc"); const rows = (data.batch || []).map(entry => { const metrics = entry.response?.record?.metrics || {}; const getP75 = m => { const v = metrics[m]?.percentiles?.p75; return v == null ? null : parseFloat(v); }; return { url: entry.url, hasData: !!entry.response?.record?.metrics, errorMsg: entry.response?.error?.message || null, inp: getP75("interaction_to_next_paint"), lcp: getP75("largest_contentful_paint"), cls: getP75("cumulative_layout_shift"), }; }); const withData = rows.filter(r => r.hasData); const withoutData = rows.length - withData.length; const SHORT_KEYS = { interaction_to_next_paint: "inp", largest_contentful_paint: "lcp", cumulative_layout_shift: "cls" }; const metricStats = BATCH_METRICS.map(mKey => { const shortKey = SHORT_KEYS[mKey]; const vals = withData.map(r => r[shortKey]).filter(v => v != null); const count = vals.length; if (!count) return { mKey, shortKey, count: 0, good: 0, ni: 0, poor: 0, avg: null, median: null }; const srt = [...vals].sort((a, b) => a - b); const median = srt.length % 2 === 0 ? (srt[srt.length / 2 - 1] + srt[srt.length / 2]) / 2 : srt[Math.floor(srt.length / 2)]; const avg = vals.reduce((s, v) => s + v, 0) / count; let good = 0, ni = 0, poor = 0; vals.forEach(v => { const s = status(mKey, v); if (s === "good") good++; else if (s === "ni") ni++; else if (s === "poor") poor++; }); return { mKey, shortKey, count, good, ni, poor, avg, median }; }); const urlStatuses = withData.map(r => { const ss = BATCH_METRICS.map(m => r[SHORT_KEYS[m]] == null ? null : status(m, r[SHORT_KEYS[m]])).filter(s => s != null); if (!ss.length) return "unknown"; if (ss.some(s => s === "poor")) return "poor"; if (ss.some(s => s === "ni")) return "ni"; return "good"; }); const overallGood = urlStatuses.filter(s => s === "good").length; const overallNi = urlStatuses.filter(s => s === "ni").length; const overallPoor = urlStatuses.filter(s => s === "poor").length; const scVerdict = (() => { if (withData.length === 0) { return { key: "unknown", label: "Not enough data", color: SC.unknown, text: "No URLs returned CrUX data, so Search Console impact can't be predicted from this batch." }; } const passRate = overallGood / withData.length; const poorRate = overallPoor / withData.length; if (passRate >= 0.75) { return { key: "good", label: "Likely passing CWV", color: SC.good, text: `${overallGood} of ${withData.length} URLs (${Math.round(passRate * 100)}%) pass Core Web Vitals on all three metrics. Search Console should report these URLs as Good.` }; } if (poorRate >= 0.25) { return { key: "poor", label: "Likely flagged in Search Console", color: SC.poor, text: `${overallPoor} URLs (${Math.round(poorRate * 100)}%) have at least one metric in the Poor zone. Search Console groups those as "Poor URLs" — expect the CWV report to show an issue for these.` }; } return { key: "ni", label: "Mixed — some URLs need improvement", color: SC.ni, text: `${overallNi + overallPoor} URLs (${Math.round((overallNi + overallPoor) / withData.length * 100)}%) fall short of CWV on at least one metric. Search Console will likely show a mix of "Needs improvement" and "Poor" groups.` }; })(); const sorted = sortKey ? [...rows].sort((a, b) => { const av = a[sortKey], bv = b[sortKey]; if (av == null && bv == null) return 0; if (av == null) return 1; if (bv == null) return -1; if (sortKey === "url") return sortDir === "asc" ? av.localeCompare(bv) : bv.localeCompare(av); return sortDir === "asc" ? av - bv : bv - av; }) : rows; const toggleSort = k => { if (sortKey === k) setSortDir(d => d === "asc" ? "desc" : "asc"); else { setSortKey(k); setSortDir("asc"); } }; const headerCell = (k, label, align = "left") => ( toggleSort(k)} style={{ textAlign: align, padding: "8px 10px", fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: "#888", cursor: "pointer", borderBottom: "1px solid #e0e0dc", userSelect: "none", whiteSpace: "nowrap" }}> {label}{sortKey === k && {sortDir === "asc" ? "▲" : "▼"}} ); const metricCell = (metricKey, val) => { if (val == null) return —; const s = status(metricKey, val); const display = metricKey.includes("layout") ? val.toFixed(2) : Math.round(val).toLocaleString(); return {display}; }; const fmtVal = (mKey, v) => { if (v == null) return "—"; return mKey.includes("layout") ? v.toFixed(2) : Math.round(v).toLocaleString(); }; const verdictBg = scVerdict.key === "good" ? SB.good : scVerdict.key === "ni" ? SB.ni : scVerdict.key === "poor" ? SB.poor : "#f5f5f3"; return (
Search Console Outlook
{scVerdict.label}
{scVerdict.text}
{withData.length > 0 && (
{overallGood} good ({Math.round(overallGood / withData.length * 100)}%) {overallNi} needs improvement ({Math.round(overallNi / withData.length * 100)}%) {overallPoor} poor ({Math.round(overallPoor / withData.length * 100)}%)
)}
{metricStats.map(st => { const label = METRIC_LABELS[st.mKey]; const unit = METRIC_UNITS[st.mKey]; const pG = st.count ? st.good / st.count : 0; const pN = st.count ? st.ni / st.count : 0; const pP = st.count ? st.poor / st.count : 0; const cardColor = st.count === 0 ? SC.unknown : pG >= 0.75 ? SC.good : pP >= 0.25 ? SC.poor : SC.ni; const cardBg = st.count === 0 ? "#f5f5f3" : pG >= 0.75 ? SB.good : pP >= 0.25 ? SB.poor : SB.ni; return (
{label} {st.count > 0 && (() => { const verdictPct = pG >= 0.75 ? pG : pP >= 0.25 ? pP : pN; const verdictLabel = pG >= 0.75 ? "Good" : pP >= 0.25 ? "Poor" : "Needs Improvement"; return ( - {Math.round(verdictPct * 100)}% {verdictLabel} ); })()}
{st.count === 0 ? (
No data
) : ( <>
{st.good} ({Math.round(pG * 100)}%) {st.ni} ({Math.round(pN * 100)}%) {st.poor} ({Math.round(pP * 100)}%)
avg {fmtVal(st.mKey, st.avg)}{unit} median {fmtVal(st.mKey, st.median)}{unit}
)}
); })}
{rows.length} URLs queried · {withData.length} with data · {withoutData} no data
{headerCell("url", "URL")} {headerCell("inp", "INP", "right")} {headerCell("lcp", "LCP", "right")} {headerCell("cls", "CLS", "right")} {sorted.map((r, i) => ( {metricCell("interaction_to_next_paint", r.inp)} {metricCell("largest_contentful_paint", r.lcp)} {metricCell("cumulative_layout_shift", r.cls)} ))}
{r.url} {!r.hasData && r.errorMsg && ({r.errorMsg.split(":")[0]})}
); } function Dashboard() { const [tab, setTab] = useState("urlLookup"); const [psiJson, setPsiJson] = useState(""); const [psiData, setPsiData] = useState(null); const [psiErr, setPsiErr] = useState(null); const [psiUrl, setPsiUrl] = useState(TEST_URL); const [psiFormFactor, setPsiFormFactor] = useState("mobile"); const [apiKey, setApiKey] = useState(""); const [copied, setCopied] = useState({}); // BigQuery state const [bqDevice, setBqDevice] = useState("phone"); const [bqOrigin, setBqOrigin] = useState(ORIGIN); const [bqUrl, setBqUrl] = useState(TEST_URL); const [bqMonths, setBqMonths] = useState(() => { // Default: past 6 months including current month const now = new Date(); const months = []; for (let i = 5; i >= 0; i--) { const d = new Date(now.getFullYear(), now.getMonth() - i, 1); months.push({ year: d.getFullYear(), month: d.getMonth(), selected: true }); } return months; }); // URL Lookup tab state const [urlInput, setUrlInput] = useState(TEST_URL); const [urlApiKey, setUrlApiKey] = useState(""); const [urlFormFactor, setUrlFormFactor] = useState("PHONE"); const [urlSnapshotJson, setUrlSnapshotJson] = useState(""); const [urlSnapshotData, setUrlSnapshotData] = useState(null); const [urlSnapshotErr, setUrlSnapshotErr] = useState(null); const [urlHistoryJson, setUrlHistoryJson] = useState(""); const [urlHistoryData, setUrlHistoryData] = useState(null); const [urlHistoryErr, setUrlHistoryErr] = useState(null); const [lookupMode, setLookupMode] = useState("single"); const [sitemapUrl, setSitemapUrl] = useState(""); const [pastedUrls, setPastedUrls] = useState(""); const [batchJson, setBatchJson] = useState(""); const [batchData, setBatchData] = useState(null); const [batchErr, setBatchErr] = useState(null); const [batchRunning, setBatchRunning] = useState(false); const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0, currentUrl: "" }); const [showOfflineScript, setShowOfflineScript] = useState(false); const [showApiKey, setShowApiKey] = useState(false); const [psiRunning, setPsiRunning] = useState(false); const [urlSnapRunning, setUrlSnapRunning] = useState(false); const [urlHistRunning, setUrlHistRunning] = useState(false); const batchAbortRef = useRef(null); const urlCanvasRefs = useRef({}); const copy = (text, id) => { setCopied(p => ({ ...p, [id]: true })); setTimeout(() => setCopied(p => ({ ...p, [id]: false })), 3000); }; const parsePsi = () => { setPsiErr(null); try { const d = JSON.parse(psiJson); if (!d.loadingExperience && !d.originLoadingExperience) throw new Error("No field data found in response. Make sure you're pasting the full PSI JSON."); setPsiData(d); } catch (e) { setPsiErr(e.message); } }; const parseUrlSnapshot = () => { setUrlSnapshotErr(null); try { const d = JSON.parse(urlSnapshotJson); if (!d?.record?.metrics) throw new Error("Invalid CrUX response — missing record.metrics. If you got a NOT_FOUND error, this URL doesn't have enough traffic for CrUX."); setUrlSnapshotData(d); } catch (e) { setUrlSnapshotErr(e.message); } }; const parseUrlHistory = () => { setUrlHistoryErr(null); try { const d = JSON.parse(urlHistoryJson); if (!d?.record?.metrics) throw new Error("Invalid CrUX History response — missing record.metrics. If you got a NOT_FOUND error, this URL doesn't have enough traffic for CrUX."); setUrlHistoryData(d); } catch (e) { setUrlHistoryErr(e.message); } }; const parseBatch = () => { setBatchErr(null); try { const d = JSON.parse(batchJson); if (!Array.isArray(d?.batch)) throw new Error("Invalid batch response — expected a top-level \"batch\" array. Run the generated script and paste the contents of crux_batch.json here."); if (d.batch.length === 0) throw new Error("Batch is empty — the script didn't find any URLs in that sitemap/feed."); setBatchData(d); } catch (e) { setBatchErr(e.message); } }; const batchQueryUrls = async (urls, abort) => { const SPACING_MS = 450; const batch = []; for (let i = 0; i < urls.length; i++) { if (abort.signal.aborted) break; const url = urls[i]; setBatchProgress({ current: i + 1, total: urls.length, currentUrl: url }); const body = urlFormFactor === "ALL" ? { url } : { url, formFactor: urlFormFactor }; let response; try { const r = await fetch( "https://chromeuxreport.googleapis.com/v1/records:queryRecord", { method: "POST", headers: { "content-type": "application/json", "X-goog-api-key": urlApiKey }, body: JSON.stringify(body), signal: abort.signal } ); response = await r.json(); } catch (e) { if (abort.signal.aborted) break; response = { error: { code: 0, message: e.message || "Network error" } }; } batch.push({ url, response }); if (i < urls.length - 1 && !abort.signal.aborted) { await new Promise(res => setTimeout(res, SPACING_MS)); } } return batch; }; const runBatch = async () => { setBatchErr(null); setBatchData(null); if (!sitemapUrl.trim()) return setBatchErr("Enter a sitemap or feed URL first."); if (!urlApiKey.trim()) return setBatchErr("Enter your CrUX API key first."); const abort = new AbortController(); batchAbortRef.current = abort; setBatchRunning(true); setBatchProgress({ current: 0, total: 0, currentUrl: "Fetching sitemap…" }); try { const smRes = await fetch(`/api/sitemap?url=${encodeURIComponent(sitemapUrl.trim())}`, { signal: abort.signal }); const smData = await smRes.json(); if (!smRes.ok) throw new Error(smData.error || `Sitemap proxy returned ${smRes.status}`); const urls = smData.urls || []; if (!urls.length) throw new Error("No URLs returned from the sitemap."); const batch = await batchQueryUrls(urls, abort); if (batch.length > 0) { const payload = { batch }; setBatchData(payload); setBatchJson(JSON.stringify(payload, null, 2)); } } catch (e) { if (e.name !== "AbortError") setBatchErr(e.message || "Batch run failed."); } finally { setBatchRunning(false); batchAbortRef.current = null; } }; const runListBatch = async () => { setBatchErr(null); setBatchData(null); if (!urlApiKey.trim()) return setBatchErr("Enter your CrUX API key first."); const urls = parseUrlList(pastedUrls); if (!urls.length) return setBatchErr("No valid URLs found. Paste one per line, each starting with http:// or https://. Capped at 100."); const abort = new AbortController(); batchAbortRef.current = abort; setBatchRunning(true); setBatchProgress({ current: 0, total: urls.length, currentUrl: "" }); try { const batch = await batchQueryUrls(urls, abort); if (batch.length > 0) { const payload = { batch }; setBatchData(payload); setBatchJson(JSON.stringify(payload, null, 2)); } } catch (e) { if (e.name !== "AbortError") setBatchErr(e.message || "Batch run failed."); } finally { setBatchRunning(false); batchAbortRef.current = null; } }; const cancelBatch = () => { if (batchAbortRef.current) batchAbortRef.current.abort(); }; const runPsi = async () => { setPsiErr(null); if (!psiUrl.trim()) return setPsiErr("Enter a URL first."); setPsiRunning(true); try { const u = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(psiUrl.trim())}&strategy=${psiFormFactor}&category=performance`; const r = await fetch(u); const d = await r.json(); if (d.error) throw new Error(d.error.message || "PSI error"); if (!d.loadingExperience && !d.originLoadingExperience) throw new Error("No field data found in response."); setPsiData(d); setPsiJson(JSON.stringify(d, null, 2)); } catch (e) { setPsiErr(e.message || "PSI request failed."); } finally { setPsiRunning(false); } }; const runUrlSnapshot = async () => { setUrlSnapshotErr(null); if (!urlInput.trim()) return setUrlSnapshotErr("Enter a URL first."); if (!urlApiKey.trim()) return setUrlSnapshotErr("Enter your CrUX API key first."); setUrlSnapRunning(true); try { const body = urlFormFactor === "ALL" ? { url: urlInput.trim() } : { url: urlInput.trim(), formFactor: urlFormFactor }; const r = await fetch( "https://chromeuxreport.googleapis.com/v1/records:queryRecord", { method: "POST", headers: { "content-type": "application/json", "X-goog-api-key": urlApiKey }, body: JSON.stringify(body) } ); const d = await r.json(); if (d.error) throw new Error(d.error.message || "CrUX error"); if (!d?.record?.metrics) throw new Error("Invalid CrUX response — missing record.metrics. If you got NOT_FOUND, this URL doesn't have enough traffic for CrUX."); setUrlSnapshotData(d); setUrlSnapshotJson(JSON.stringify(d, null, 2)); } catch (e) { setUrlSnapshotErr(e.message || "Snapshot request failed."); } finally { setUrlSnapRunning(false); } }; const runUrlHistory = async () => { setUrlHistoryErr(null); if (!urlInput.trim()) return setUrlHistoryErr("Enter a URL first."); if (!urlApiKey.trim()) return setUrlHistoryErr("Enter your CrUX API key first."); setUrlHistRunning(true); try { const body = { url: urlInput.trim(), metrics: ["largest_contentful_paint", "interaction_to_next_paint", "cumulative_layout_shift"], }; if (urlFormFactor !== "ALL") body.formFactor = urlFormFactor; const r = await fetch( "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord", { method: "POST", headers: { "content-type": "application/json", "X-goog-api-key": urlApiKey }, body: JSON.stringify(body) } ); const d = await r.json(); if (d.error) throw new Error(d.error.message || "CrUX History error"); if (!d?.record?.metrics) throw new Error("Invalid CrUX History response — missing record.metrics."); setUrlHistoryData(d); setUrlHistoryJson(JSON.stringify(d, null, 2)); } catch (e) { setUrlHistoryErr(e.message || "History request failed."); } finally { setUrlHistRunning(false); } }; const sitemapScript = (sm, k, ff) => { const ffLine = ff === "ALL" ? "" : `,\\\"formFactor\\\":\\\"${ff}\\\"`; return `#!/bin/bash # CrUX Batch Lookup — fetches URLs from a sitemap/feed and queries CrUX for each # Save as crux_batch.sh, then: chmod +x crux_batch.sh && ./crux_batch.sh set -e SITEMAP="${sm || "https://www.example.com/sitemap.xml"}" API_KEY="${k || "YOUR_API_KEY"}" MAX_URLS=100 OUTPUT="crux_batch.json" UA="Mozilla/5.0 (crux-explorer batch lookup)" echo "Fetching: $SITEMAP" CONTENT=$(curl -sL -A "$UA" "$SITEMAP") # Sitemap index? Recurse one level. if echo "$CONTENT" | grep -q "[^<]+' | sed -E 's/<\\/?loc>//g' | head -n 5) ALL="" while IFS= read -r C; do [ -z "$C" ] && continue echo " → $C" CC=$(curl -sL -A "$UA" "$C") ALL="$ALL"$'\\n'"$(echo "$CC" | grep -oE '[^<]+' | sed -E 's/<\\/?loc>//g')" done <<< "$CHILDREN" URLS=$(echo "$ALL" | grep -v '^$' | head -n $MAX_URLS) else # Try first (sitemap), then (Atom), then ... (RSS). URLS=$(echo "$CONTENT" | grep -oE '[^<]+' | sed -E 's/<\\/?loc>//g' | head -n $MAX_URLS) if [ -z "$URLS" ]; then URLS=$(echo "$CONTENT" | grep -oE ']+href="[^"]+"' | sed -E 's/.*href="([^"]+)".*/\\1/' | head -n $MAX_URLS) fi if [ -z "$URLS" ]; then URLS=$(echo "$CONTENT" | grep -oE '[^<]+' | sed -E 's/<\\/?link>//g' | head -n $MAX_URLS) fi fi COUNT=$(echo "$URLS" | grep -vc '^$' || true) if [ "$COUNT" -eq 0 ]; then echo "No URLs found. Check the sitemap/feed URL and try again." exit 1 fi echo "Found $COUNT URLs. Querying CrUX API..." echo '{"batch":[' > "$OUTPUT" FIRST=true i=0 while IFS= read -r URL; do [ -z "$URL" ] && continue i=$((i+1)) printf '[%d/%d] %s\\n' "$i" "$COUNT" "$URL" [ "$FIRST" = false ] && echo ',' >> "$OUTPUT" FIRST=false PAYLOAD="{\\"url\\":\\"$URL\\"${ffLine}}" RESPONSE=$(curl -s -X POST \\ "https://chromeuxreport.googleapis.com/v1/records:queryRecord" \\ -H "X-goog-api-key: $API_KEY" \\ -H 'Content-Type: application/json' \\ -d "$PAYLOAD") printf '{"url":"%s","response":%s}' "$URL" "$RESPONSE" >> "$OUTPUT" sleep 0.3 done <<< "$URLS" echo ']}' >> "$OUTPUT" echo "" echo "✓ Done — paste the contents of $OUTPUT into the dashboard to visualize."`; }; const urlSnapshotCurl = (u, k, ff) => { const ffLine = ff === "ALL" ? "" : `\n "formFactor": "${ff}",`; return `# CrUX API — single URL snapshot${ff === "ALL" ? " (all form factors)" : ` (${ff.toLowerCase()})`} curl -s -X POST \\ 'https://chromeuxreport.googleapis.com/v1/records:queryRecord' \\ -H 'X-goog-api-key: ${k || "YOUR_API_KEY"}' \\ -H 'Content-Type: application/json' \\ -d '{ "url": "${u || "https://example.com"}"${ff === "ALL" ? "" : ","}${ffLine} }' > crux_url_snapshot.json echo "Saved to crux_url_snapshot.json"`; }; const urlHistoryCurl = (u, k, ff) => { const ffLine = ff === "ALL" ? "" : `\n "formFactor": "${ff}",`; return `# CrUX History API — single URL${ff === "ALL" ? " (all form factors)" : ` (${ff.toLowerCase()})`}, 40 weeks curl -s -X POST \\ 'https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord' \\ -H 'X-goog-api-key: ${k || "YOUR_API_KEY"}' \\ -H 'Content-Type: application/json' \\ -d '{ "url": "${u || "https://example.com"}",${ffLine} "metrics": ["largest_contentful_paint","interaction_to_next_paint","cumulative_layout_shift"] }' > crux_url_history.json echo "Saved to crux_url_history.json"`; }; // Draw URL History charts useEffect(() => { if (!urlHistoryData?.record?.metrics) return; const metrics = urlHistoryData.record.metrics; const periods = urlHistoryData.record.collectionPeriods || []; ["interaction_to_next_paint", "largest_contentful_paint", "cumulative_layout_shift"].forEach(mk => { const canvas = urlCanvasRefs.current[mk]; if (!canvas || !metrics[mk]) return; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); const W = rect.width, H = rect.height; const p75s = metrics[mk].percentilesTimeseries?.p75s || []; const vals = p75s.map(v => v == null ? null : parseFloat(v)); const valid = vals.filter(v => v !== null); if (!valid.length) return; const th = METRIC_THRESHOLDS[mk]; const max = Math.max(...valid, th.poor * 1.15); const pT = 32, pB = 48, pL = 56, pR = 20; const cW = W - pL - pR, cH = H - pT - pB; const y = v => pT + cH - (v / max) * cH; ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(0,0,0,0.02)"; ctx.fillRect(pL, pT, cW, cH); ctx.fillStyle = "rgba(13,124,62,0.05)"; ctx.fillRect(pL, y(th.good), cW, y(0) - y(th.good)); ctx.fillStyle = "rgba(212,140,0,0.05)"; ctx.fillRect(pL, y(th.poor), cW, y(th.good) - y(th.poor)); ctx.fillStyle = "rgba(212,35,15,0.05)"; ctx.fillRect(pL, pT, cW, y(th.poor) - pT); [th.good, th.poor].forEach((t, i) => { const yy = y(t); ctx.strokeStyle = i === 0 ? "#0d7c3e" : "#d4230f"; ctx.lineWidth = 1; ctx.setLineDash([4, 4]); ctx.beginPath(); ctx.moveTo(pL, yy); ctx.lineTo(W - pR, yy); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = ctx.strokeStyle; ctx.font = "600 10px 'DM Sans',system-ui"; ctx.textAlign = "right"; ctx.fillText(mk.includes("layout") ? t.toFixed(2) : t.toLocaleString(), pL - 6, yy + 3); }); ctx.fillStyle = "#888"; ctx.font = "10px 'DM Sans',system-ui"; ctx.textAlign = "right"; for (let i = 0; i <= 5; i++) { const v2 = (max * i) / 5; ctx.fillText(mk.includes("layout") ? v2.toFixed(2) : Math.round(v2).toLocaleString(), pL - 6, y(v2) + 3); ctx.strokeStyle = "rgba(0,0,0,0.05)"; ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(pL, y(v2)); ctx.lineTo(W - pR, y(v2)); ctx.stroke(); } const xS = cW / Math.max(vals.length - 1, 1); ctx.strokeStyle = "#1a1a2e"; ctx.lineWidth = 2; ctx.lineJoin = "round"; ctx.beginPath(); let started = false; const pts = []; vals.forEach((v2, i) => { if (v2 === null) return; const xx = pL + i * xS, yy = y(v2); pts.push({ x: xx, y: yy, v: v2, i }); if (!started) { ctx.moveTo(xx, yy); started = true; } else ctx.lineTo(xx, yy); }); ctx.stroke(); if (pts.length > 1) { ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); pts.forEach(p => ctx.lineTo(p.x, p.y)); ctx.lineTo(pts[pts.length - 1].x, pT + cH); ctx.lineTo(pts[0].x, pT + cH); ctx.closePath(); const g = ctx.createLinearGradient(0, pT, 0, pT + cH); g.addColorStop(0, "rgba(26,26,46,0.12)"); g.addColorStop(1, "rgba(26,26,46,0.01)"); ctx.fillStyle = g; ctx.fill(); } let uIdx = -1; periods.forEach((p, i) => { const d = p.lastDate; if (!d) return; const dt = new Date(`${d.year}-${String(d.month).padStart(2, "0")}-${String(d.day).padStart(2, "0")}`); if (uIdx < 0 && dt >= new Date("2026-03-27")) uIdx = i; if (dt >= new Date("2026-03-27") && dt <= new Date("2026-04-15")) { ctx.fillStyle = "rgba(212,35,15,0.06)"; ctx.fillRect(pL + i * xS - xS / 2, pT, xS, cH); } }); pts.forEach(p => { const s2 = status(mk, p.v); if (p.i >= vals.length - 6 || p.i === 0 || p.i === uIdx) { ctx.fillStyle = SC[s2]; ctx.beginPath(); ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2); ctx.fill(); } }); if (uIdx >= 0) { const xx = pL + uIdx * xS; ctx.strokeStyle = "rgba(212,35,15,0.5)"; ctx.lineWidth = 1; ctx.setLineDash([3, 3]); ctx.beginPath(); ctx.moveTo(xx, pT); ctx.lineTo(xx, pT + cH); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = "#d4230f"; ctx.font = "600 9px 'DM Sans',system-ui"; ctx.textAlign = "left"; ctx.fillText("Mar 27 Core Update", xx + 4, pT + 12); } ctx.fillStyle = "#888"; ctx.font = "10px 'DM Sans',system-ui"; ctx.textAlign = "center"; const ev = Math.max(Math.floor(periods.length / 8), 1); periods.forEach((p, i) => { if (i % ev !== 0 && i !== periods.length - 1) return; const d = p.lastDate; if (!d) return; ctx.fillText(`${d.month}/${d.day}`, pL + i * xS, H - pB + 16); }); }); }, [urlHistoryData]); const tabBtn = (id, label) => ( ); const originMetrics = psiData?.originLoadingExperience?.metrics || {}; const urlMetrics = psiData?.loadingExperience?.metrics || {}; const cwvKeys = ["INTERACTION_TO_NEXT_PAINT", "LARGEST_CONTENTFUL_PAINT", "CUMULATIVE_LAYOUT_SHIFT"]; return (
Core Web Vitals

CrUX Lens

PSI · CrUX API · BigQuery
{tabBtn("urlLookup", "① CrUX API Lookup")} {tabBtn("psi", "② PageSpeed Insights")} {tabBtn("bigquery", "③ BigQuery SQL")}
{/* ============ PSI ============ */} {tab === "psi" && (
How to use: Enter a URL, pick a form factor, and click Run. No API key required. Prefer to run offline? Expand the advanced section below for a curl command.
setPsiUrl(e.target.value)} placeholder="https://www.mywebsite.com/some-article" style={{ width: "100%", padding: "10px 14px", border: "1px solid #d0d0cc", borderRadius: 4, fontSize: 12, fontFamily: "'DM Mono',monospace", boxSizing: "border-box" }} />
{psiRunning && querying PageSpeed Insights…}
{psiErr &&
{psiErr}
} {psiData && (
{[ { label: "Origin-Level Field Data (CrUX)", subtitle: `All pages on ${ORIGIN}`, metrics: originMetrics, overall: psiData?.originLoadingExperience?.overall_category }, { label: "URL-Level Field Data (CrUX)", subtitle: psiUrl, metrics: urlMetrics, overall: psiData?.loadingExperience?.overall_category }, ].map((sec, si) => (

{sec.label}

{sec.overall && {sec.overall}}
{sec.subtitle}
{cwvKeys.map(m => { const d = sec.metrics[m]; if (!d) return
No {METRIC_LABELS[m]} data
; return ; })}
{(() => { const supporting = ["FIRST_CONTENTFUL_PAINT_MS", "EXPERIMENTAL_TIME_TO_FIRST_BYTE"].filter(m => sec.metrics[m]); if (supporting.length === 0) return null; return (
Supporting metrics
{supporting.map(m => { const d = sec.metrics[m]; return ; })}
); })()}
))} {psiData?.lighthouseResult?.categories?.performance && (() => { const s = psiData.lighthouseResult.categories.performance.score; const c = s >= 0.9 ? SC.good : s >= 0.5 ? SC.ni : SC.poor; return (
{Math.round(s * 100)}
Lighthouse lab score (simulated mobile). Field data above is what Search Console uses.
); })()}
)}
Advanced: run via curl
Prefer to run this locally? Copy the command below, save the output as psi_result.json, and paste it back here to visualize.
copy(psiCurl(psiUrl, psiFormFactor), "psi")} />