getTTFB.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. const afterLoad = (callback) => {
  18. if (document.readyState === 'complete') {
  19. // Queue a task so the callback runs after `loadEventEnd`.
  20. setTimeout(callback, 0);
  21. }
  22. else {
  23. // Use `pageshow` so the callback runs after `loadEventEnd`.
  24. addEventListener('pageshow', callback);
  25. }
  26. };
  27. const getNavigationEntryFromPerformanceTiming = () => {
  28. // Really annoying that TypeScript errors when using `PerformanceTiming`.
  29. const timing = performance.timing;
  30. const navigationEntry = {
  31. entryType: 'navigation',
  32. startTime: 0,
  33. };
  34. for (const key in timing) {
  35. if (key !== 'navigationStart' && key !== 'toJSON') {
  36. navigationEntry[key] = Math.max(timing[key] -
  37. timing.navigationStart, 0);
  38. }
  39. }
  40. return navigationEntry;
  41. };
  42. export const getTTFB = (onReport) => {
  43. const metric = initMetric('TTFB');
  44. afterLoad(() => {
  45. try {
  46. // Use the NavigationTiming L2 entry if available.
  47. const navigationEntry = performance.getEntriesByType('navigation')[0] ||
  48. getNavigationEntryFromPerformanceTiming();
  49. metric.value = metric.delta =
  50. navigationEntry.responseStart;
  51. // In some cases the value reported is negative. Ignore these cases:
  52. // https://github.com/GoogleChrome/web-vitals/issues/137
  53. if (metric.value < 0)
  54. return;
  55. metric.entries = [navigationEntry];
  56. onReport(metric);
  57. }
  58. catch (error) {
  59. // Do nothing.
  60. }
  61. });
  62. };