getTTFB.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. // Queue a task so the callback runs after `loadEventEnd`.
  24. addEventListener('load', () => setTimeout(callback, 0));
  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 or is larger
  52. // than the current page time. Ignore these cases:
  53. // https://github.com/GoogleChrome/web-vitals/issues/137
  54. // https://github.com/GoogleChrome/web-vitals/issues/162
  55. if (metric.value < 0 || metric.value > performance.now())
  56. return;
  57. metric.entries = [navigationEntry];
  58. onReport(metric);
  59. }
  60. catch (error) {
  61. // Do nothing.
  62. }
  63. });
  64. };