Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Query metrics: Chapter 1. JavaScript #82

Closed
rviscomi opened this issue Jul 23, 2019 · 4 comments

Comments

@rviscomi
Copy link
Member

commented Jul 23, 2019

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 rviscomi added the Analysis label Jul 23, 2019

@rviscomi rviscomi added this to the Content written milestone Jul 23, 2019

@rviscomi rviscomi self-assigned this Jul 23, 2019

@rviscomi rviscomi added this to TODO in Web Almanac via automation Jul 23, 2019

@rviscomi

This comment has been minimized.

Copy link
Member Author

commented Aug 1, 2019

👋 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

This comment has been minimized.

Copy link

commented Aug 9, 2019

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

This comment has been minimized.

Copy link

commented Aug 9, 2019

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

This comment has been minimized.

Copy link
Member Author

commented Aug 9, 2019

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

@rviscomi rviscomi closed this Aug 16, 2019

Web Almanac automation moved this from TODO to Done Aug 16, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
2 participants
You can’t perform that action at this time.