Query metrics: Chapter 1. JavaScript

[rviscomi]

Part	Chapter	Authors	Reviewers	Tracking Issue
I. Page Content	1. JavaScript	@addyosmani @housseindjirdeh @mathiasbynens	@rwaldron @RReverser	#3

READ ME!

All of the metrics in the table below have been marked as Able To Query during the metrics triage. The analyst assigned to each metric is expected to write the corresponding query and submit a PR to have it reviewed and added to the repo.

In order to stay on schedule and have the data ready for authors, please have all metrics reviewed and merged by August 5.

Assignments

ID	Metric description	Analyst	Notes
01.01	Distribution of JS bytes	@rviscomi
01.02	Distribution of first party JS bytes vs. third party	@rviscomi
01.03	Number of JS requests	@rviscomi
01.04	Number of first-party JS requests vs. third-party	@rviscomi
01.05	% of gzip-compressed scripts	@rviscomi
01.06	% of brotli-compressed scripts	@rviscomi
01.07	Breakdown of V8 CPU times (if feasible)	@rviscomi	Confirm with pmeenan that the CPU timing is enabled
01.08	Top N JS libraries	@rviscomi
01.09	Notable changes in popularity since last year	@rviscomi
01.10	Top N JS client-side frameworks (React, Vue, etc…)	@rviscomi
01.11	Distribution of JS bytes on site per JavaScript framework	@rviscomi
01.12	% of pages that use <script type=module>	@rviscomi	Added custom metric
01.13	% of pages that use <script nomodule>	@rviscomi	Added custom metric
01.14	% of pages that use <link rel=preload> for JS resources	@rviscomi	Resolved by link-nodes custom metric
01.15	% of pages that use <link rel=modulepreload>	@rviscomi	Easiest as a DOM query
01.16	% of pages that use <link rel=prefetch> for JS resources	@rviscomi	Easiest as a DOM query
01.18	Atomics	@rviscomi
01.19	Intl	@rviscomi
01.20	Proxy	@rviscomi
01.21	SharedArrayBuffer	@rviscomi
01.22	WeakMap	@rviscomi
01.23	WeakSet	@rviscomi
01.24	dynamic import (by looking for "import(")	@rviscomi
01.25	% of sites that ship sourcemaps	@rviscomi	X-SourceMap header or //# sourceMappingURL= in JS

Checklist of metrics to be merged

• 01.01 Distribution of JS bytes
• 01.02 Distribution of first party JS bytes vs. third party
• 01.03 Number of JS requests
• 01.04 Number of first-party JS requests vs. third-party
• 01.05 % of gzip-compressed scripts
• 01.06 % of brotli-compressed scripts
• 01.07 Breakdown of V8 CPU times (if feasible)
• 01.08 Top N JS libraries
• 01.09 Notable changes in popularity since last year
• 01.10 Top N JS client-side frameworks (React, Vue, etc…)
• 01.11 Distribution of JS bytes on site per JavaScript framework
• 01.12 % of pages that use <script type=module>
• 01.13 % of pages that use <script nomodule>
• 01.14 % of pages that use <link rel=preload> for JS resources
• 01.15 % of pages that use <link rel=modulepreload>
• 01.16 % of pages that use <link rel=prefetch> for JS resources
• 01.18 Atomics
• 01.19 Intl
• 01.20 Proxy
• 01.21 SharedArrayBuffer
• 01.22 WeakMap
• 01.23 WeakSet
• 01.24 dynamic import (by looking for "import(")
• 01.25 % of sites that ship sourcemaps

[rviscomi]

👋 Hey @mathiasbynens, for the "Breakdown of V8 CPU times" metric, which metrics in particular would you like to analyze?

For reference, here's a JSON blob of all of the data we have. And here's a list of metrics prefixed with cpu and v8 that you might find interesting. There are lots of them.

[mathiasbynens]

Those metrics are highly fine-grained. For this report, it'd make sense to combine them into higher-level buckets. I'd propose the following:

• main thread parse time
• main thread compile time
• main thread optimize time
• main thread execution time

[mathiasbynens]

If the above is too much hassle, we could just add up everything under "main thread". (Background work is not interesting, as it doesn't delay page load.)

[rviscomi]

Thanks @mathiasbynens. I've saved the results of the cumulative main thread time query to this sheet. Let me know if those numbers look reasonable to you or if you'd like to see the results formatted differently (histogram, quantiles, etc).

client	p10	p25	p50	p75	p90
desktop	140.806	352.182	849.281	1849.936	3542.87
mobile	376.68	988.04	2436.777	5518.328	10735.304

Here's the underlying query:

#standardSQL
# 01_07: Cumulative V8 main thread time
CREATE TEMPORARY FUNCTION totalMainThreadTime(payload STRING)
RETURNS FLOAT64 LANGUAGE js AS '''
try {
  var $ = JSON.parse(payload);
  return Object.values($._v8Stats.main_thread).reduce((sum, i) => sum + i, 0);
} catch (e) {
  return null;
}
''';

SELECT
  client,
  ROUND(APPROX_QUANTILES(v8_time, 1000)[OFFSET(100)], 3) AS p10,
  ROUND(APPROX_QUANTILES(v8_time, 1000)[OFFSET(250)], 3) AS p25,
  ROUND(APPROX_QUANTILES(v8_time, 1000)[OFFSET(500)], 3) AS p50,
  ROUND(APPROX_QUANTILES(v8_time, 1000)[OFFSET(750)], 3) AS p75,
  ROUND(APPROX_QUANTILES(v8_time, 1000)[OFFSET(900)], 3) AS p90
FROM (
  SELECT _TABLE_SUFFIX AS client, totalMainThreadTime(payload) AS v8_time FROM `httparchive.pages.2019_07_01_*`)
GROUP BY
  client