getTTFB.ts 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /*
  2. * Copyright 2020 Google LLC
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * https://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. import {initMetric} from './lib/initMetric.js';
  17. import {ReportHandler, NavigationTimingPolyfillEntry} from './types.js';
  18. const afterLoad = (callback: () => void) => {
  19. if (document.readyState === 'complete') {
  20. // Queue a task so the callback runs after `loadEventEnd`.
  21. setTimeout(callback, 0);
  22. } else {
  23. // Use `pageshow` so the callback runs after `loadEventEnd`.
  24. addEventListener('pageshow', callback);
  25. }
  26. }
  27. const getNavigationEntryFromPerformanceTiming = (): NavigationTimingPolyfillEntry => {
  28. // Really annoying that TypeScript errors when using `PerformanceTiming`.
  29. const timing = performance.timing;
  30. const navigationEntry: {[key: string]: number | string} = {
  31. entryType: 'navigation',
  32. startTime: 0,
  33. };
  34. for (const key in timing) {
  35. if (key !== 'navigationStart' && key !== 'toJSON') {
  36. navigationEntry[key] = Math.max(
  37. (timing[key as keyof PerformanceTiming] as number) -
  38. timing.navigationStart, 0);
  39. }
  40. }
  41. return navigationEntry as NavigationTimingPolyfillEntry;
  42. };
  43. export const getTTFB = (onReport: ReportHandler) => {
  44. const metric = initMetric('TTFB');
  45. afterLoad(() => {
  46. try {
  47. // Use the NavigationTiming L2 entry if available.
  48. const navigationEntry = performance.getEntriesByType('navigation')[0] ||
  49. getNavigationEntryFromPerformanceTiming();
  50. metric.value = metric.delta =
  51. (navigationEntry as PerformanceNavigationTiming).responseStart;
  52. // In some cases the value reported is negative. Ignore these cases:
  53. // https://github.com/GoogleChrome/web-vitals/issues/137
  54. if (metric.value < 0) return;
  55. metric.entries = [navigationEntry];
  56. onReport(metric);
  57. } catch (error) {
  58. // Do nothing.
  59. }
  60. });
  61. };