更新前端静态网页获取方式，放弃使用后端获取api

frontend/node_modules/web-vitals/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2020 Google LLC
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       https://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

frontend/node_modules/web-vitals/README.md

@@ -0,0 +1,740 @@
+# `web-vitals`
+
+- [Overview](#overview)
+- [Install and load the library](#installation)
+  - [From npm](#import-web-vitals-from-npm)
+  - [From a CDN](#load-web-vitals-from-a-cdn)
+- [Usage](#usage)
+  - [Basic usage](#basic-usage)
+  - [Report the value on every change](#report-the-value-on-every-change)
+  - [Report only the delta of changes](#report-only-the-delta-of-changes)
+  - [Send the results to an analytics endpoint](#send-the-results-to-an-analytics-endpoint)
+  - [Send the results to Google Analytics](#send-the-results-to-google-analytics)
+  - [Send the results to Google Tag Manager](#send-the-results-to-google-tag-manager)
+  - [Batch multiple reports together](#batch-multiple-reports-together)
+- [Bundle versions](#bundle-versions)
+  - [Which bundle is right for you?](#which-bundle-is-right-for-you)
+  - [How the polyfill works](#how-the-polyfill-works)
+- [API](#api)
+  - [Types](#types)
+  - [Functions](#functions)
+- [Browser Support](#browser-support)
+- [Limitations](#limitations)
+- [Development](#development)
+- [Integrations](#integrations)
+- [License](#license)
+
+## Overview
+
+The `web-vitals` library is a tiny (~1K), modular library for measuring all the [Web Vitals](https://web.dev/vitals/) metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console's Speed Report](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)).
+
+The library supports all of the [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) as well as all of the [other Web Vitals](https://web.dev/vitals/#other-web-vitals) that can be measured [in the field](https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured):
+
+### Core Web Vitals
+
+- [Cumulative Layout Shift (CLS)](https://web.dev/cls/)
+- [First Input Delay (FID)](https://web.dev/fid/)
+- [Largest Contentful Paint (LCP)](https://web.dev/lcp/)
+
+### Other Web Vitals
+
+- [First Contentful Paint (FCP)](https://web.dev/fcp/)
+- [Time to First Byte (TTFB)](https://web.dev/ttfb/)
+
+<a name="installation"><a>
+<a name="load-the-library"><a>
+
+## Install and load the library
+
+<a name="import-web-vitals-from-npm"><a>
+
+### From npm
+
+You can install this library from npm by running:
+
+```sh
+npm install web-vitals
+```
+
+_**Note:** If you're not using npm, you can still load `web-vitals` via `<script>` tags from a CDN like [unpkg.com](https://unpkg.com). See the [load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn) usage example below for details._
+
+There are two different versions of the `web-vitals` library (the "standard" version and the "base+polyfill" version), and how you load the library depends on which version you want to use.
+
+For details on the difference between the two versions, see <a href="#which-bundle-is-right-for-you">which bundle is right for you</a>.
+
+**1. The "standard" version**
+
+To load the "standard" version, import modules from the `web-vitals` package in your application code (as you would with any npm package and node-based build tool):
+
+```js
+import {getLCP, getFID, getCLS} from 'web-vitals';
+
+getCLS(console.log);
+getFID(console.log);
+getLCP(console.log);
+```
+
+<a name="how-to-use-the-polyfill"><a>
+
+**2. The "base+polyfill" version**
+
+Loading the "base+polyfill" version is a two-step process:
+
+First, in your application code, import the "base" build rather than the "standard" build. To do this, change any `import` statements that reference `web-vitals` to `web-vitals/base`:
+
+```diff
+- import {getLCP, getFID, getCLS} from 'web-vitals';
++ import {getLCP, getFID, getCLS} from 'web-vitals/base';
+```
+
+Then, inline the code from `dist/polyfill.js` into the `<head>` of your pages. This step is important since the "base" build will error if the polyfill code has not been added.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+      // Inline code from `dist/polyfill.js` here
+    </script>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+Note that the code _must_ go in the `<head>` of your pages in order to work. See [how the polyfill works](#how-the-polyfill-works) for more details.
+
+_**Tip:** while it's certainly possible to inline the code in `dist/polyfill.js` by copy and pasting it directly into your templates, it's better to automate this process in a build step—otherwise you risk the "base" and the "polyfill" scripts getting out of sync when new versions are released._
+
+<a name="load-web-vitals-from-a-cdn"><a>
+
+### From a CDN
+
+The recommended way to use the `web-vitals` package is to install it from npm and integrate it into your build process. However, if you're not using npm, it's still possible to use `web-vitals` by requesting it from a CDN that serves npm package files.
+
+The following examples show how to load `web-vitals` from [unpkg.com](https://unpkg.com), whether your targeting just Chromium-based browsers (using the "standard" version) or additional browsers (using the "base+polyfill" version):
+
+**Load the "standard" version** _(using a module script)_
+
+```html
+<!-- Append the `?module` param to load the module version of `web-vitals` -->
+<script type="module">
+  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
+
+  getCLS(console.log);
+  getFID(console.log);
+  getLCP(console.log);
+</script>
+```
+
+**Load the "standard" version** _(using a classic script)_
+
+```html
+<script>
+(function() {
+  var script = document.createElement('script');
+  script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js';
+  script.onload = function() {
+    // When loading `web-vitals` using a classic script, all the public
+    // methods can be found on the `webVitals` global namespace.
+    webVitals.getCLS(console.log);
+    webVitals.getFID(console.log);
+    webVitals.getLCP(console.log);
+  }
+  document.head.appendChild(script);
+}())
+</script>
+```
+
+**Load the "base+polyfill" version** _(using a classic script)_
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+      // Inline code from `https://unpkg.com/web-vitals/dist/polyfill.js` here.
+    </script>
+  </head>
+  <body>
+    ...
+    <!-- Load the UMD version of the "base" bundle. -->
+    <script>
+    (function() {
+      var script = document.createElement('script');
+      script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.base.iife.js';
+      script.onload = function() {
+        // When loading `web-vitals` using a classic script, all the public
+        // methods can be found on the `webVitals` global namespace.
+        webVitals.getCLS(console.log);
+        webVitals.getFID(console.log);
+        webVitals.getLCP(console.log);
+      }
+      document.head.appendChild(script);
+    }())
+    </script>
+  </body>
+</html>
+```
+
+## Usage
+
+### Basic usage
+
+Each of the Web Vitals metrics is exposed as a single function that takes an `onReport` callback. This callback will be called any time the metric value is available and ready to be reported.
+
+The following example measures each of the Core Web Vitals metrics and logs the result to the console once its value is ready to report.
+
+_(The examples below import the "standard" version, but they will work with the polyfill version as well.)_
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+getCLS(console.log);
+getFID(console.log);
+getLCP(console.log);
+```
+
+Note that some of these metrics will not report until the user has interacted with the page, switched tabs, or the page starts to unload. If you don't see the values logged to the console immediately, try reloading the page (with [preserve log](https://developers.google.com/web/tools/chrome-devtools/console/reference#persist) enabled) or switching tabs and then switching back.
+
+Also, in some cases a metric callback may never be called:
+
+- FID is not reported if the user never interacts with the page.
+- FCP, FID, and LCP are not reported if the page was loaded in the background.
+
+In other cases, a metric callback may be called more than once:
+
+- CLS should be reported any time the [page's `visibilityState` changes to hidden](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden).
+- CLS, FCP, FID, and LCP are reported again after a page is restored from the [back/forward cache](https://web.dev/bfcache/).
+
+_**Warning:** do not call any of the Web Vitals functions (e.g. `getCLS()`, `getFID()`, `getLCP()`) more than once per page load. Each of these functions creates a `PerformanceObserver` instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak._
+
+### Report the value on every change
+
+In most cases, you only want `onReport` to be called when the metric is ready to be reported. However, it is possible to report every change (e.g. each layout shift as it happens) by setting the optional, second argument (`reportAllChanges`) to `true`.
+
+This can be useful when debugging, but in general using `reportAllChanges` is not needed (or recommended).
+
+```js
+import {getCLS} from 'web-vitals';
+
+// Logs CLS as the value changes.
+getCLS(console.log, true);
+```
+
+### Report only the delta of changes
+
+Some analytics providers allow you to update the value of a metric, even after you've already sent it to their servers (overwriting the previously-sent value with the same `id`).
+
+Other analytics providers, however, do not allow this, so instead of reporting the new value, you need to report only the delta (the difference between the current value and the last-reported value). You can then compute the total value by summing all metric deltas sent with the same ID.
+
+The following example shows how to use the `id` and `delta` properties:
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+function logDelta({name, id, delta}) {
+  console.log(`${name} matching ID ${id} changed by ${delta}`);
+}
+
+getCLS(logDelta);
+getFID(logDelta);
+getLCP(logDelta);
+```
+
+_**Note:** the first time the `onReport` function is called, its `value` and `delta` properties will be the same._
+
+In addition to using the `id` field to group multiple deltas for the same metric, it can also be used to differentiate different metrics reported on the same page. For example, after a back/forward cache restore, a new metric object is created with a new `id` (since back/forward cache restores are considered separate page visits).
+
+### Send the results to an analytics endpoint
+
+The following example measures each of the Core Web Vitals metrics and reports them to a hypothetical `/analytics` endpoint, as soon as each is ready to be sent.
+
+The `sendToAnalytics()` function uses the [`navigator.sendBeacon()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) method (if available), but falls back to the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API when not.
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+function sendToAnalytics(metric) {
+  // Replace with whatever serialization method you prefer.
+  // Note: JSON.stringify will likely include more data than you need.
+  const body = JSON.stringify(metric);
+
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+getCLS(sendToAnalytics);
+getFID(sendToAnalytics);
+getLCP(sendToAnalytics);
+```
+
+### Send the results to Google Analytics
+
+Google Analytics does not support reporting metric distributions in any of its built-in reports; however, if you set a unique dimension value (in this case, the metric `id`, as shown in the examples below) on every metric instance that you send to Google Analytics, you can create a report yourself using the [Google Analytics Reporting API](https://developers.google.com/analytics/devguides/reporting) and any data visualization library you choose.
+
+As an example of this, the [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) is a free and open-source tool you can use to create visualizations of the Web Vitals data that you've sent to Google Analytics.
+
+[![web-vitals-report](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)](https://github.com/GoogleChromeLabs/web-vitals-report)
+
+In order to use the [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) (or build your own custom reports using the API) you need to send your data to Google Analytics following one of the examples outlined below:
+
+#### Using `analytics.js`
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+function sendToGoogleAnalytics({name, delta, id}) {
+  // Assumes the global `ga()` function exists, see:
+  // https://developers.google.com/analytics/devguides/collection/analyticsjs
+  ga('send', 'event', {
+    eventCategory: 'Web Vitals',
+    eventAction: name,
+    // The `id` value will be unique to the current page load. When sending
+    // multiple values from the same page (e.g. for CLS), Google Analytics can
+    // compute a total by grouping on this ID (note: requires `eventLabel` to
+    // be a dimension in your report).
+    eventLabel: id,
+    // Google Analytics metrics must be integers, so the value is rounded.
+    // For CLS the value is first multiplied by 1000 for greater precision
+    // (note: increase the multiplier for greater precision if needed).
+    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
+    // Use a non-interaction event to avoid affecting bounce rate.
+    nonInteraction: true,
+    // Use `sendBeacon()` if the browser supports it.
+    transport: 'beacon',
+
+    // OPTIONAL: any additional params or debug info here.
+    // See: https://web.dev/debug-web-vitals-in-the-field/
+    // dimension1: '...',
+    // dimension2: '...',
+    // ...
+  });
+}
+
+getCLS(sendToGoogleAnalytics);
+getFID(sendToGoogleAnalytics);
+getLCP(sendToGoogleAnalytics);
+```
+
+#### Using `gtag.js` (Universal Analytics)
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+function sendToGoogleAnalytics({name, delta, id}) {
+  // Assumes the global `gtag()` function exists, see:
+  // https://developers.google.com/analytics/devguides/collection/gtagjs
+  gtag('event', name, {
+    event_category: 'Web Vitals',
+    // The `id` value will be unique to the current page load. When sending
+    // multiple values from the same page (e.g. for CLS), Google Analytics can
+    // compute a total by grouping on this ID (note: requires `eventLabel` to
+    // be a dimension in your report).
+    event_label: id,
+    // Google Analytics metrics must be integers, so the value is rounded.
+    // For CLS the value is first multiplied by 1000 for greater precision
+    // (note: increase the multiplier for greater precision if needed).
+    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
+    // Use a non-interaction event to avoid affecting bounce rate.
+    non_interaction: true,
+
+    // OPTIONAL: any additional params or debug info here.
+    // See: https://web.dev/debug-web-vitals-in-the-field/
+    // metric_rating: 'good' | 'ni' | 'poor',
+    // debug_info: '...',
+    // ...
+  });
+}
+
+getCLS(sendToGoogleAnalytics);
+getFID(sendToGoogleAnalytics);
+getLCP(sendToGoogleAnalytics);
+```
+
+#### Using `gtag.js` (Google Analytics 4)
+
+[Google Analytics 4](https://support.google.com/analytics/answer/10089681) introduces a new Event model allowing custom parameters instead of a fixed category, action, and label. It also supports non-integer values, making it easier to measure Web Vitals metrics compared to previous versions.
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+function sendToGoogleAnalytics({name, delta, value, id}) {
+  // Assumes the global `gtag()` function exists, see:
+  // https://developers.google.com/analytics/devguides/collection/ga4
+  gtag('event', name, {
+    // Built-in params:
+    value: delta, // Use `delta` so the value can be summed.
+    // Custom params:
+    metric_id: id, // Needed to aggregate events.
+    metric_value: value, // Optional.
+    metric_delta: delta, // Optional.
+
+    // OPTIONAL: any additional params or debug info here.
+    // See: https://web.dev/debug-web-vitals-in-the-field/
+    // metric_rating: 'good' | 'ni' | 'poor',
+    // debug_info: '...',
+    // ...
+  });
+}
+
+getCLS(sendToGoogleAnalytics);
+getFID(sendToGoogleAnalytics);
+getLCP(sendToGoogleAnalytics);
+```
+
+### Send the results to Google Tag Manager
+
+The recommended way to measure Web Vitals metrics with Google Tag Manager is using the [Core Web Vitals](https://www.simoahava.com/custom-templates/core-web-vitals/) custom template tag created and maintained by [Simo Ahava](https://www.simoahava.com/).
+
+For full installation and usage instructions, see Simo's post: [Track Core Web Vitals in GA4 with Google Tag Manager](https://www.simoahava.com/analytics/track-core-web-vitals-in-ga4-with-google-tag-manager/).
+
+### Batch multiple reports together
+
+Rather than reporting each individual Web Vitals metric separately, you can minimize your network usage by batching multiple metric reports together in a single network request.
+
+However, since not all Web Vitals metrics become available at the same time, and since not all metrics are reported on every page, you cannot simply defer reporting until all metrics are available.
+
+Instead, you should keep a queue of all metrics that were reported and flush the queue whenever the page is backgrounded or unloaded:
+
+```js
+import {getCLS, getFID, getLCP} from 'web-vitals';
+
+const queue = new Set();
+function addToQueue(metric) {
+  queue.add(metric);
+}
+
+function flushQueue() {
+  if (queue.size > 0) {
+    // Replace with whatever serialization method you prefer.
+    // Note: JSON.stringify will likely include more data than you need.
+    const body = JSON.stringify([...queue]);
+
+    // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+    (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+          fetch('/analytics', {body, method: 'POST', keepalive: true});
+
+    queue.clear();
+  }
+}
+
+getCLS(addToQueue);
+getFID(addToQueue);
+getLCP(addToQueue);
+
+// Report all available metrics whenever the page is backgrounded or unloaded.
+addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'hidden') {
+    flushQueue();
+  }
+});
+
+// NOTE: Safari does not reliably fire the `visibilitychange` event when the
+// page is being unloaded. If Safari support is needed, you should also flush
+// the queue in the `pagehide` event.
+addEventListener('pagehide', flushQueue);
+```
+
+_**Note:** see [the Page Lifecycle guide](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#legacy-lifecycle-apis-to-avoid) for an explanation of why `visibilitychange` and `pagehide` are recommended over events like `beforeunload` and `unload`._
+
+## Bundle versions
+
+The `web-vitals` package includes builds for both the "standard" and "base+polyfill" versions, as well as different formats of each to allow developers to choose the format that best meets their needs or integrates with their architecture.
+
+The following table lists all the bundles distributed with the `web-vitals` package on npm.
+
+<table>
+  <tr>
+    <td width="35%">
+      <strong>Filename</strong> <em>(all within <code>dist/*</code>)</em>
+    </td>
+    <td><strong>Export</strong></td>
+    <td><strong>Description</strong></td>
+  </tr>
+  <tr>
+    <td><code>web-vitals.js</code></td>
+    <td><code>pkg.module</code></td>
+    <td>
+      <p>An ES module bundle of all metric functions, without any extra polyfills to expand browser support.</p>
+      This is the "standard" version and is the simplest way to consume this library out of the box.
+    </td>
+  </tr>
+  <tr>
+    <td><code>web-vitals.umd.js</code></td>
+    <td><code>pgk.main</code></td>
+    <td>
+      A UMD version of the <code>web-vitals.js</code> bundle (exposed on the <code>window.webVitals.*</code> namespace).
+    </td>
+  </tr>
+  <tr>
+    <td><code>web-vitals.iife.js</code></td>
+    <td>--</td>
+    <td>
+      An IIFE version of the <code>web-vitals.js</code> bundle (exposed on the <code>window.webVitals.*</code> namespace).
+    </td>
+  </tr>
+  <tr>
+    <td><code>web-vitals.base.js</code></td>
+    <td>--</td>
+    <td>
+      <p>An ES module bundle containing just the "base" part of the "base+polyfill" version.</p>
+      Use this bundle if (and only if) you've also added the <code>polyfill.js</code> script to the <code>&lt;head&gt;</code> of your pages. See <a href="#how-to-use-the-polyfill">how to use the polyfill</a> for more details.
+    </td>
+  </tr>
+    <tr>
+    <td><code>web-vitals.base.umd.js</code></td>
+    <td>--</td>
+    <td>
+      A UMD version of the <code>web-vitals.base.js</code> bundle (exposed on the <code>window.webVitals.*</code> namespace).
+    </td>
+  </tr>
+  </tr>
+    <tr>
+    <td><code>web-vitals.base.iife.js</code></td>
+    <td>--</td>
+    <td>
+      An IIFE version of the <code>web-vitals.base.js</code> bundle (exposed on the <code>window.webVitals.*</code> namespace).
+    </td>
+  </tr>
+  <tr>
+    <td><code>polyfill.js</code></td>
+    <td>--</td>
+    <td>
+      <p>The "polyfill" part of the "base+polyfill" version. This script should be used with either <code>web-vitals.base.js</code>, <code>web-vitals.base.umd.js</code>, or <code>web-vitals.base.iife.js</code> (it will not work with any script that doesn't have "base" in the filename).</p>
+      See <a href="#how-to-use-the-polyfill">how to use the polyfill</a> for more details.
+    </td>
+  </tr>
+</table>
+
+### Which bundle is right for you?
+
+Most developers will generally want to use the "standard" bundle (either the ES module or UMD version, depending on your build system), as it's the easiest to use out of the box and integrate into existing build tools.
+
+However, there are a few good reasons to consider using the "base+polyfill" version, for example:
+
+- FID can be measured in all browsers.
+- CLS, FCP, FID, and LCP will be more accurate in some cases (since the polyfill detects the page's initial `visibilityState` earlier).
+
+### How the polyfill works
+
+The `polyfill.js` script adds event listeners (to track FID cross-browser), and it records initial page visibility state as well as the timestamp of the first visibility change to hidden (to improve the accuracy of CLS, FCP, LCP, and FID).
+
+In order for it to work properly, the script must be the first script added to the page, and it must run before the browser renders any content to the screen. This is why it needs to be added to the `<head>` of the document.
+
+The "standard" version of the `web-vitals` library includes some of the same logic found in `polyfill.js`. To avoid duplicating that code when using the "base+polyfill" version, the `web-vitals.base.js` bundle does not include any polyfill logic, instead it coordinates with the code in `polyfill.js`, which is why the two scripts must be used together.
+
+## API
+
+### Types:
+
+#### `Metric`
+
+```ts
+interface Metric {
+  // The name of the metric (in acronym form).
+  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
+
+  // The current value of the metric.
+  value: number;
+
+  // The delta between the current value and the last-reported value.
+  // On the first report, `delta` and `value` will always be the same.
+  delta: number;
+
+  // A unique ID representing this particular metric that's specific to the
+  // current page. This ID can be used by an analytics tool to dedupe
+  // multiple values sent for the same metric, or to group multiple deltas
+  // together and calculate a total.
+  id: string;
+
+  // Any performance entries used in the metric value calculation.
+  // Note, entries will be added to the array as the value changes.
+  entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];
+}
+```
+
+#### `ReportHandler`
+
+```ts
+interface ReportHandler {
+  (metric: Metric): void;
+}
+```
+
+#### `FirstInputPolyfillEntry`
+
+When using the FID polyfill (and if the browser doesn't natively support the Event Timing API), `metric.entries` will contain an object that polyfills the `PerformanceEventTiming` entry:
+
+```ts
+type FirstInputPolyfillEntry = Omit<PerformanceEventTiming,
+  'processingEnd' | 'processingEnd' | 'toJSON'>
+```
+
+#### `FirstInputPolyfillCallback`
+
+```ts
+interface FirstInputPolyfillCallback {
+  (entry: FirstInputPolyfillEntry): void;
+}
+```
+
+#### `NavigationTimingPolyfillEntry`
+
+When calling `getTTFB()`, if the browser doesn't support the [Navigation Timing API Level 2](https://www.w3.org/TR/navigation-timing-2/) interface, it will polyfill the entry object using timings from `performance.timing`:
+
+```ts
+export type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming,
+  'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' |
+  'encodedBodySize' | 'decodedBodySize' | 'toJSON'>
+```
+
+#### `WebVitalsGlobal`
+
+If using the "base+polyfill" build, the `polyfill.js` script creates the global `webVitals` namespace matching the following interface:
+
+```ts
+interface WebVitalsGlobal {
+  firstInputPolyfill: (onFirstInput: FirstInputPolyfillCallback) => void;
+  resetFirstInputPolyfill: () => void;
+  firstHiddenTime: number;
+}
+```
+
+### Functions:
+
+#### `getCLS()`
+
+```ts
+type getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => void
+```
+
+Calculates the [CLS](https://web.dev/cls/) value for the current page and calls the `onReport` function once the value is ready to be reported, along with all `layout-shift` performance entries that were used in the metric value calculation. The reported value is a [double](https://heycam.github.io/webidl/#idl-double) (corresponding to a [layout shift score](https://web.dev/cls/#layout-shift-score)).
+
+If the `reportAllChanges` param is `true`, the `onReport` function will be called any time a new `layout-shift` performance entry is dispatched, or once the final value of the metric has been determined.
+
+_**Important:** unlike other metrics, CLS continues to monitor changes for the entire lifespan of the page&mdash;including if the user returns to the page after it's been hidden/backgrounded. However, since browsers often [will not fire additional callbacks once the user has backgrounded a page](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#advice-hidden), `onReport` is always called when the page's visibility state changes to hidden. As a result, the `onReport` function might be called multiple times during the same page load (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._
+
+#### `getFCP()`
+
+```ts
+type getFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void
+```
+
+Calculates the [FCP](https://web.dev/fcp/) value for the current page and calls the `onReport` function once the value is ready, along with the relevant `paint` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
+
+#### `getFID()`
+
+```ts
+type getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => void
+```
+
+Calculates the [FID](https://web.dev/fid/) value for the current page and calls the `onReport` function once the value is ready, along with the relevant `first-input` performance entry used to determine the value (and optionally the input event if using the [FID polyfill](#fid-polyfill)). The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
+
+_**Important:** since FID is only reported after the user interacts with the page, it's possible that it will not be reported for some page loads._
+
+#### `getLCP()`
+
+```ts
+type getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => void
+```
+
+Calculates the [LCP](https://web.dev/lcp/) value for the current page and calls the `onReport` function once the value is ready (along with the relevant `largest-contentful-paint` performance entries used to determine the value). The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
+
+If the `reportAllChanges` param is `true`, the `onReport` function will be called any time a new `largest-contentful-paint` performance entry is dispatched, or once the final value of the metric has been determined.
+
+#### `getTTFB()`
+
+```ts
+type getTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => void
+```
+
+Calculates the [TTFB](https://web.dev/time-to-first-byte/) value for the current page and calls the `onReport` function once the page has loaded, along with the relevant `navigation` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
+
+Note, this function waits until after the page is loaded to call `onReport` in order to ensure all properties of the `navigation` entry are populated. This is useful if you want to report on other metrics exposed by the [Navigation Timing API](https://w3c.github.io/navigation-timing/).
+
+For example, the TTFB metric starts from the page's [time origin](https://www.w3.org/TR/hr-time-2/#sec-time-origin), which means it [includes](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing#the_life_and_timings_of_a_network_request) time spent on DNS lookup, connection negotiation, network latency, and unloading the previous document. If, in addition to TTFB, you want a metric that excludes these timings and _just_ captures the time spent making the request and receiving the first byte of the response, you could compute that from data found on the performance entry:
+
+```js
+import {getTTFB} from 'web-vitals';
+
+getTTFB((metric) => {
+  // Calculate the request time by subtracting from TTFB
+  // everything that happened prior to the request starting.
+  const requestTime = metric.value - metric.entries[0].requestStart;
+  console.log('Request time:', requestTime);
+});
+```
+
+_**Note:** browsers that do not support `navigation` entries will fall back to
+using `performance.timing` (with the timestamps converted from epoch time to [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)). This ensures code referencing these values (like in the example above) will work the same in all browsers._
+
+## Browser Support
+
+The `web-vitals` code has been tested and will run without error in all major browsers as well as Internet Explorer back to version 9. However, some of the APIs required to capture these metrics are currently only available in Chromium-based browsers (e.g. Chrome, Edge, Opera, Samsung Internet).
+
+Browser support for each function is as follows:
+
+- `getCLS()`: Chromium,
+- `getFCP()`: Chromium, Firefox, Safari
+- `getFID()`: Chromium, Firefox, Safari, Internet Explorer (with the [polyfill](#how-to-use-the-polyfill))
+- `getLCP()`: Chromium
+- `getTTFB()`: Chromium, Firefox, Safari, Internet Explorer
+
+## Limitations
+
+The `web-vitals` library is primarily a wrapper around the Web APIs that
+measure the Web Vitals metrics, which means the limitations of those APIs will
+mostly apply to this library as well.
+
+The primary limitation of these APIs is they have no visibility into `<iframe>` content (not even same-origin iframes), which means pages that make use of iframes will likely see a difference between the data measured by this library and the data available in the Chrome User Experience Report (which does include iframe content).
+
+For same-origin iframes, it's possible to use the `web-vitals` library to measure metrics, but it's tricky because it requires the developer to add the library to every frame and `postMessage()` the results to the parent frame for aggregation.
+
+_**Note:** given the lack of iframe support, the `getCLS()` function technically measures [DCLS](https://github.com/wicg/layout-instability#cumulative-scores) (Document Cumulative Layout Shift) rather than CLS, if the page includes iframes)._
+
+## Development
+
+### Building the code
+
+The `web-vitals` source code is written in TypeScript. To transpile the code and build the production bundles, run the following command.
+
+```sh
+npm run build
+```
+
+To build the code and watch for changes, run:
+
+```sh
+npm run watch
+```
+
+### Running the tests
+
+The `web-vitals` code is tested in real browsers using [webdriver.io](https://webdriver.io/). Use the following command to run the tests:
+
+```sh
+npm test
+```
+
+To test any of the APIs manually, you can start the test server
+
+```sh
+npm run test:server
+```
+
+Then navigate to `http://localhost:9090/test/<view>`, where `<view>` is the basename of one the templates under [/test/views/](/test/views/).
+
+You'll likely want to combine this with `npm run watch` to ensure any changes you make are transpiled and rebuilt.
+
+## Integrations
+
+- [**Web Vitals Connector**](https://goo.gle/web-vitals-connector): Data Studio connector to create dashboards from [Web Vitals data captured in BiqQuery](https://web.dev/vitals-ga4/).
+- [**Core Web Vitals Custom Tag template**](https://www.simoahava.com/custom-templates/core-web-vitals/): Custom GTM template tag to [add measurement handlers](https://www.simoahava.com/analytics/track-core-web-vitals-in-ga4-with-google-tag-manager/) for all Core Web Vitals metrics.
+- [**`web-vitals-reporter`**](https://github.com/treosh/web-vitals-reporter): JavaScript library to batch `onReport` callbacks and send data with a single request.
+
+## License
+
+[Apache 2.0](/LICENSE)

frontend/node_modules/web-vitals/base.d.ts

@@ -0,0 +1 @@
+export * from './dist/modules/index.js';

frontend/node_modules/web-vitals/base.js

@@ -0,0 +1,3 @@
+// Creates the `web-vitals/base` import in node-based bundlers.
+// This will not be needed when export maps are widely supported.
+export * from './dist/web-vitals.base.js';

frontend/node_modules/web-vitals/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "web-vitals",
+  "version": "2.1.4",
+  "description": "Easily measure performance metrics in JavaScript",
+  "main": "dist/web-vitals.umd.js",
+  "module": "dist/web-vitals.js",
+  "typings": "dist/modules/index.d.ts",
+  "files": [
+    "base.js",
+    "base.d.ts",
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "run-s clean build:ts build:js",
+    "build:ts": "tsc -b",
+    "build:js": "rollup -c",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "dev": "run-p watch test:server",
+    "lint": "eslint \"*.js\" \"src/**/*.ts\" \"test/**/*.js\"",
+    "lint:fix": "eslint --fix \"*.js\" \"src/**/*.ts\" \"test/**/*.js\"",
+    "postversion": "git push --follow-tags",
+    "release:major": "npm version major -m 'Release v%s' && npm publish",
+    "release:minor": "npm version minor -m 'Release v%s' && npm publish",
+    "release:patch": "npm version patch -m 'Release v%s' && npm publish",
+    "test": "npm-run-all build -p -r test:*",
+    "test:e2e": "wdio wdio.conf.js",
+    "test:server": "node test/server.js",
+    "start": "run-s build:ts test:server watch",
+    "watch": "run-p watch:*",
+    "watch:ts": "tsc -b -w",
+    "watch:js": "rollup -c -w",
+    "version": "run-s build",
+    "prepare": "husky install"
+  },
+  "keywords": [
+    "crux",
+    "performance",
+    "metrics",
+    "CLS",
+    "FCP",
+    "FID",
+    "LCP",
+    "TTFB"
+  ],
+  "author": {
+    "name": "Philip Walton",
+    "email": "philip@philipwalton.com",
+    "url": "http://philipwalton.com"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleChrome/web-vitals.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GoogleChrome/web-vitals/issues"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@rollup/plugin-replace": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "@wdio/cli": "^7.16.13",
+    "@wdio/local-runner": "^7.16.13",
+    "@wdio/mocha-framework": "^7.16.13",
+    "@wdio/selenium-standalone-service": "^7.16.13",
+    "@wdio/spec-reporter": "^7.16.13",
+    "body-parser": "^1.19.1",
+    "chromedriver": "^97.0.0",
+    "eslint": "^8.7.0",
+    "eslint-config-google": "^0.14.0",
+    "express": "^4.17.2",
+    "fs-extra": "^10.0.0",
+    "husky": "^7.0.4",
+    "npm-run-all": "^4.1.5",
+    "nunjucks": "^3.2.3",
+    "rollup": "^2.64.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.5.5",
+    "wdio-chromedriver-service": "^7.2.6"
+  }
+}

frontend/node_modules/web-vitals/src/getCLS.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {initMetric} from './lib/initMetric.js';
+import {observe, PerformanceEntryHandler} from './lib/observe.js';
+import {onHidden} from './lib/onHidden.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
+import {bindReporter} from './lib/bindReporter.js';
+import {getFCP} from './getFCP.js';
+import {ReportHandler} from './types.js';
+
+
+// https://wicg.github.io/layout-instability/#sec-layout-shift
+interface LayoutShift extends PerformanceEntry {
+  value: number;
+  hadRecentInput: boolean;
+}
+
+
+let isMonitoringFCP = false;
+let fcpValue = -1;
+
+export const getCLS = (onReport: ReportHandler, reportAllChanges?: boolean) => {
+  // Start monitoring FCP so we can only report CLS if FCP is also reported.
+  // Note: this is done to match the current behavior of CrUX.
+  if (!isMonitoringFCP) {
+    getFCP((metric) => {
+      fcpValue = metric.value;
+    });
+    isMonitoringFCP = true;
+  }
+
+  const onReportWrapped: ReportHandler = (arg) => {
+    if (fcpValue > -1) {
+      onReport(arg);
+    }
+  };
+
+  let metric = initMetric('CLS', 0);
+  let report: ReturnType<typeof bindReporter>;
+
+  let sessionValue = 0;
+  let sessionEntries: PerformanceEntry[] = [];
+
+  const entryHandler = (entry: LayoutShift) => {
+    // Only count layout shifts without recent user input.
+    if (!entry.hadRecentInput) {
+      const firstSessionEntry = sessionEntries[0];
+      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
+
+      // If the entry occurred less than 1 second after the previous entry and
+      // less than 5 seconds after the first entry in the session, include the
+      // entry in the current session. Otherwise, start a new session.
+      if (sessionValue &&
+          entry.startTime - lastSessionEntry.startTime < 1000 &&
+          entry.startTime - firstSessionEntry.startTime < 5000) {
+        sessionValue += entry.value;
+        sessionEntries.push(entry);
+      } else {
+        sessionValue = entry.value;
+        sessionEntries = [entry];
+      }
+
+      // If the current session value is larger than the current CLS value,
+      // update CLS and the entries contributing to it.
+      if (sessionValue > metric.value) {
+        metric.value = sessionValue;
+        metric.entries = sessionEntries;
+        report();
+      }
+    }
+  };
+
+  const po = observe('layout-shift', entryHandler as PerformanceEntryHandler);
+  if (po) {
+    report = bindReporter(onReportWrapped, metric, reportAllChanges);
+
+    onHidden(() => {
+      po.takeRecords().map(entryHandler as PerformanceEntryHandler);
+      report(true);
+    });
+
+    onBFCacheRestore(() => {
+      sessionValue = 0;
+      fcpValue = -1;
+      metric = initMetric('CLS', 0);
+      report = bindReporter(onReportWrapped, metric, reportAllChanges);
+    });
+  }
+};

frontend/node_modules/web-vitals/src/getFCP.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {bindReporter} from './lib/bindReporter.js';
+import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
+import {initMetric} from './lib/initMetric.js';
+import {observe} from './lib/observe.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
+import {ReportHandler} from './types.js';
+
+
+export const getFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
+  const visibilityWatcher = getVisibilityWatcher();
+  let metric = initMetric('FCP');
+  let report: ReturnType<typeof bindReporter>;
+
+  const entryHandler = (entry: PerformanceEntry) => {
+    if (entry.name === 'first-contentful-paint') {
+      if (po) {
+        po.disconnect();
+      }
+
+      // Only report if the page wasn't hidden prior to the first paint.
+      if (entry.startTime < visibilityWatcher.firstHiddenTime) {
+        metric.value = entry.startTime;
+        metric.entries.push(entry);
+        report(true);
+      }
+    }
+  };
+
+  // TODO(philipwalton): remove the use of `fcpEntry` once this bug is fixed.
+  // https://bugs.webkit.org/show_bug.cgi?id=225305
+  // The check for `getEntriesByName` is needed to support Opera:
+  // https://github.com/GoogleChrome/web-vitals/issues/159
+  // The check for `window.performance` is needed to support Opera mini:
+  // https://github.com/GoogleChrome/web-vitals/issues/185
+  const fcpEntry = window.performance && performance.getEntriesByName &&
+      performance.getEntriesByName('first-contentful-paint')[0];
+
+  const po = fcpEntry ? null : observe('paint', entryHandler);
+
+  if (fcpEntry || po) {
+    report = bindReporter(onReport, metric, reportAllChanges);
+
+    if (fcpEntry) {
+      entryHandler(fcpEntry);
+    }
+
+    onBFCacheRestore((event) => {
+      metric = initMetric('FCP');
+      report = bindReporter(onReport, metric, reportAllChanges);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          metric.value = performance.now() - event.timeStamp;
+          report(true);
+        });
+      });
+    });
+  }
+};

frontend/node_modules/web-vitals/src/getFID.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {bindReporter} from './lib/bindReporter.js';
+import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
+import {initMetric} from './lib/initMetric.js';
+import {observe, PerformanceEntryHandler} from './lib/observe.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
+import {onHidden} from './lib/onHidden.js';
+import {firstInputPolyfill, resetFirstInputPolyfill} from './lib/polyfills/firstInputPolyfill.js';
+import {FirstInputPolyfillCallback, PerformanceEventTiming, ReportHandler} from './types.js';
+
+
+export const getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => {
+  const visibilityWatcher = getVisibilityWatcher();
+  let metric = initMetric('FID');
+  let report: ReturnType<typeof bindReporter>;
+
+  const entryHandler = (entry: PerformanceEventTiming) => {
+    // Only report if the page wasn't hidden prior to the first input.
+    if (entry.startTime < visibilityWatcher.firstHiddenTime) {
+      metric.value = entry.processingStart - entry.startTime;
+      metric.entries.push(entry);
+      report(true);
+    }
+  };
+
+  const po = observe('first-input', entryHandler as PerformanceEntryHandler);
+  report = bindReporter(onReport, metric, reportAllChanges);
+
+  if (po) {
+    onHidden(() => {
+      po.takeRecords().map(entryHandler as PerformanceEntryHandler);
+      po.disconnect();
+    }, true);
+  }
+
+  if (window.__WEB_VITALS_POLYFILL__) {
+    // Prefer the native implementation if available,
+    if (!po) {
+      window.webVitals.firstInputPolyfill(entryHandler as FirstInputPolyfillCallback)
+    }
+    onBFCacheRestore(() => {
+      metric = initMetric('FID');
+      report = bindReporter(onReport, metric, reportAllChanges);
+      window.webVitals.resetFirstInputPolyfill();
+      window.webVitals.firstInputPolyfill(entryHandler as FirstInputPolyfillCallback);
+    });
+  } else {
+    // Only monitor bfcache restores if the browser supports FID natively.
+    if (po) {
+      onBFCacheRestore(() => {
+        metric = initMetric('FID');
+        report = bindReporter(onReport, metric, reportAllChanges);
+        resetFirstInputPolyfill();
+        firstInputPolyfill(entryHandler as FirstInputPolyfillCallback);
+      });
+    }
+  }
+};

frontend/node_modules/web-vitals/src/getLCP.ts

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {bindReporter} from './lib/bindReporter.js';
+import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
+import {initMetric} from './lib/initMetric.js';
+import {observe, PerformanceEntryHandler} from './lib/observe.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
+import {onHidden} from './lib/onHidden.js';
+import {ReportHandler} from './types.js';
+
+
+const reportedMetricIDs: Record<string, boolean> = {};
+
+export const getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
+  const visibilityWatcher = getVisibilityWatcher();
+  let metric = initMetric('LCP');
+  let report: ReturnType<typeof bindReporter>;
+
+  const entryHandler = (entry: PerformanceEntry) => {
+    // The startTime attribute returns the value of the renderTime if it is not 0,
+    // and the value of the loadTime otherwise.
+    const value = entry.startTime;
+
+    // If the page was hidden prior to paint time of the entry,
+    // ignore it and mark the metric as final, otherwise add the entry.
+    if (value < visibilityWatcher.firstHiddenTime) {
+      metric.value = value;
+      metric.entries.push(entry);
+      report();
+    }
+  };
+
+  const po = observe('largest-contentful-paint', entryHandler);
+
+  if (po) {
+    report = bindReporter(onReport, metric, reportAllChanges);
+
+    const stopListening = () => {
+      if (!reportedMetricIDs[metric.id]) {
+        po.takeRecords().map(entryHandler as PerformanceEntryHandler);
+        po.disconnect();
+        reportedMetricIDs[metric.id] = true;
+        report(true);
+      }
+    }
+
+    // Stop listening after input. Note: while scrolling is an input that
+    // stop LCP observation, it's unreliable since it can be programmatically
+    // generated. See: https://github.com/GoogleChrome/web-vitals/issues/75
+    ['keydown', 'click'].forEach((type) => {
+      addEventListener(type, stopListening, {once: true, capture: true});
+    });
+
+    onHidden(stopListening, true);
+
+    onBFCacheRestore((event) => {
+      metric = initMetric('LCP');
+      report = bindReporter(onReport, metric, reportAllChanges);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          metric.value = performance.now() - event.timeStamp;
+          reportedMetricIDs[metric.id] = true;
+          report(true);
+        });
+      });
+    });
+  }
+};

frontend/node_modules/web-vitals/src/getTTFB.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {initMetric} from './lib/initMetric.js';
+import {ReportHandler, NavigationTimingPolyfillEntry} from './types.js';
+
+
+const afterLoad = (callback: () => void) => {
+  if (document.readyState === 'complete') {
+    // Queue a task so the callback runs after `loadEventEnd`.
+    setTimeout(callback, 0);
+  } else {
+    // Queue a task so the callback runs after `loadEventEnd`.
+    addEventListener('load', () => setTimeout(callback, 0));
+  }
+}
+
+const getNavigationEntryFromPerformanceTiming = (): NavigationTimingPolyfillEntry => {
+  // Really annoying that TypeScript errors when using `PerformanceTiming`.
+  const timing = performance.timing;
+
+  const navigationEntry: {[key: string]: number | string} = {
+    entryType: 'navigation',
+    startTime: 0,
+  };
+
+  for (const key in timing) {
+    if (key !== 'navigationStart' && key !== 'toJSON') {
+      navigationEntry[key] = Math.max(
+          (timing[key as keyof PerformanceTiming] as number) -
+          timing.navigationStart, 0);
+    }
+  }
+  return navigationEntry as unknown as NavigationTimingPolyfillEntry;
+};
+
+export const getTTFB = (onReport: ReportHandler) => {
+  const metric = initMetric('TTFB');
+
+  afterLoad(() => {
+    try {
+      // Use the NavigationTiming L2 entry if available.
+      const navigationEntry = performance.getEntriesByType('navigation')[0] ||
+          getNavigationEntryFromPerformanceTiming();
+
+      metric.value = metric.delta =
+          (navigationEntry as PerformanceNavigationTiming).responseStart;
+
+      // In some cases the value reported is negative or is larger
+      // than the current page time. Ignore these cases:
+      // https://github.com/GoogleChrome/web-vitals/issues/137
+      // https://github.com/GoogleChrome/web-vitals/issues/162
+      if (metric.value < 0 || metric.value > performance.now()) return;
+
+      metric.entries = [navigationEntry];
+
+      onReport(metric);
+    } catch (error) {
+      // Do nothing.
+    }
+  });
+};

frontend/node_modules/web-vitals/src/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export {getCLS} from './getCLS.js';
+export {getFCP} from './getFCP.js';
+export {getFID} from './getFID.js';
+export {getLCP} from './getLCP.js';
+export {getTTFB} from './getTTFB.js';
+
+export * from './types.js';

frontend/node_modules/web-vitals/src/polyfill.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {firstInputPolyfill, resetFirstInputPolyfill} from './lib/polyfills/firstInputPolyfill.js';
+import {getFirstHiddenTime} from './lib/polyfills/getFirstHiddenTimePolyfill.js';
+
+resetFirstInputPolyfill();
+self.webVitals = {
+  firstInputPolyfill: firstInputPolyfill,
+  resetFirstInputPolyfill: resetFirstInputPolyfill,
+  get firstHiddenTime() {
+    return getFirstHiddenTime();
+  },
+};

frontend/node_modules/web-vitals/src/types.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Metric {
+  // The name of the metric (in acronym form).
+  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
+
+  // The current value of the metric.
+  value: number;
+
+  // The delta between the current value and the last-reported value.
+  // On the first report, `delta` and `value` will always be the same.
+  delta: number;
+
+  // A unique ID representing this particular metric instance. This ID can
+  // be used by an analytics tool to dedupe multiple values sent for the same
+  // metric instance, or to group multiple deltas together and calculate a
+  // total. It can also be used to differentiate multiple different metric
+  // instances sent from the same page, which can happen if the page is
+  // restored from the back/forward cache (in that case new metrics object
+  // get created).
+  id: string;
+
+  // Any performance entries used in the metric value calculation.
+  // Note, entries will be added to the array as the value changes.
+  entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];
+}
+
+export interface ReportHandler {
+  (metric: Metric): void;
+}
+
+// https://wicg.github.io/event-timing/#sec-performance-event-timing
+export interface PerformanceEventTiming extends PerformanceEntry {
+  processingStart: DOMHighResTimeStamp;
+  processingEnd: DOMHighResTimeStamp;
+  duration: DOMHighResTimeStamp;
+  cancelable?: boolean;
+  target?: Element;
+}
+
+export type FirstInputPolyfillEntry =
+    Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'>
+
+export interface FirstInputPolyfillCallback {
+  (entry: FirstInputPolyfillEntry): void;
+}
+
+export type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming,
+    'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' |
+    'encodedBodySize' | 'decodedBodySize' | 'toJSON'>
+
+export interface WebVitalsGlobal {
+  firstInputPolyfill: (onFirstInput: FirstInputPolyfillCallback) => void;
+  resetFirstInputPolyfill: () => void;
+  firstHiddenTime: number;
+}
+
+declare global {
+  interface Window {
+    webVitals: WebVitalsGlobal;
+
+    // Build flags:
+    __WEB_VITALS_POLYFILL__: boolean;
+  }
+}