Bytes by resource type
The page weight split by resource type: HTML, JS, CSS, images, fonts, media.
At a glance the headline numbers for Bytes by resource type
The page weight split by resource type: HTML, JS, CSS, images, fonts, media.
Scripts are 31.7% of all requests. Images are 30.5%.
The bytes by resource type mix who uses what, and how fast each group loads
Bytes by resource type. On the fleet: 31.7% script, 30.5% image, 13.4% stylesheet.
By count script leads (31.7%); by bytes it is image (63.3%). computed
Passing LCP per bucket every category and count level at once - color is the pass rate
Each row is a category, each column its own count bucket (few on the left, many on the right); the cell is the share of those sites passing LCP.
Stylesheet swings the hardest: 89% of sites pass LCP with few, 57% with many. computed
Few vs many - does quantity cost LCP? the pass rate with few vs many of each category
Per category: the pass rate among pages with FEW of it (hollow ring) against pages with MANY (solid dot), worst trend first. Thin buckets are excluded from the endpoints.
More Stylesheet costs the most: the LCP pass rate falls from 89% with few to 57% with many. computed
Why this matters for the Core Web Vitals, and where to start fixing it
The total page weight tells you the size of the problem. The split per resource type tells you which Core Web Vital pays for it. Image bytes mostly cost LCP. They compete for bandwidth with the hero image and make it load slower. Script bytes are the expensive ones. After the download the main thread still has to parse and execute them, so a script-heavy mix shows up in INP. CSS blocks rendering until it is loaded. Font bytes delay text rendering.
That is why the same total weight can produce very different vitals. A content site with mostly image bytes needs modern formats and lazy loading. A web app with mostly script bytes needs deferral and dead code removal. The mix tells you which problem you have.
Chrome field data from 189,915 sites, representing millions of real page loads. How we measured.
Live queries (2) — admin only
SELECT 1 AS ok FROM site_metric_bags LIMIT 0;WITH flat AS (
SELECT b.cat, b.n, b.size, s.crux."all".lcp AS cwv_val
FROM site_metric_bags b
JOIN sites s ON s.origin = b.origin
WHERE b.path = 'network.resource_type'
AND b.cat IS NOT NULL
),
totals AS (
SELECT cat,
SUM(n) AS fleet_n,
SUM(size) AS fleet_size,
COUNT(*) FILTER (WHERE n IS NOT NULL) AS sample,
COUNT(*) FILTER (WHERE n > 0) AS with_any,
quantile_disc(n, 0.95) AS p95,
COUNT(*) AS n_rows
FROM flat
GROUP BY cat
HAVING COUNT(*) >= (SELECT COUNT(DISTINCT origin) FROM site_metric_bags WHERE path = 'network.resource_type') * 0.005
),
widths AS (
SELECT *,
GREATEST(1, CAST(round(COALESCE(p95, 0)) AS INTEGER)) AS cap,
LEAST(GREATEST(1, CAST(round(COALESCE(p95, 0)) AS INTEGER)), 12 - 1) AS regular_buckets
FROM totals
),
widths2 AS (
SELECT *,
GREATEST(1, CAST(ceil(cap * 1.0 / regular_buckets) AS INTEGER)) AS width
FROM widths
),
binned AS (
SELECT f.cat, f.cwv_val, w.fleet_n, w.fleet_size, w.sample, w.with_any, w.width, w.regular_buckets,
CASE WHEN f.n IS NULL THEN NULL
ELSE LEAST(CAST(FLOOR(f.n * 1.0 / w.width) AS INTEGER), w.regular_buckets)
END AS bucket_idx
FROM flat f
JOIN widths2 w ON f.cat = w.cat
)
SELECT cat, fleet_n, fleet_size, sample, with_any, width, regular_buckets,
bucket_idx,
COUNT(*) AS n,
quantile_disc(cwv_val, 0.5) AS median,
COUNT(*) FILTER (WHERE cwv_val IS NOT NULL) AS total_cwv,
COUNT(*) FILTER (WHERE cwv_val IS NOT NULL AND cwv_val <= 2500) AS good
FROM binned
WHERE bucket_idx IS NOT NULL
GROUP BY cat, fleet_n, fleet_size, sample, with_any, width, regular_buckets, bucket_idx
ORDER BY cat, bucket_idx;