├── .gitignore ├── .eslintrc ├── LICENSE ├── CHANGELOG.md ├── demo.html ├── src ├── snippet.js ├── debug.js ├── umd-wrapper.js ├── index.js ├── externs.js ├── firstConsistentlyInteractiveCore.js ├── activityTrackerUtils.js └── firstConsistentlyInteractiveDetector.js ├── tests ├── runFirstInteractiveCoreTests.html ├── runMutationObserverTests.html └── firstConsistentlyInteractiveCoreTest.js ├── package.json ├── CONTRIBUTING.md ├── README.md ├── tti-polyfill.js ├── scripts └── build.js ├── tti-polyfill-debug.js ├── tti-polyfill.js.map └── tti-polyfill-debug.js.map /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | }, 6 | "parserOptions": { 7 | "sourceType": "module", 8 | }, 9 | "extends": [ 10 | "eslint:recommended", 11 | "google", 12 | ], 13 | } 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Google Inc. All rights reserved. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 0.2.2 (2017-06-20) 4 | 5 | - Fix incorrectly mangled symbols [#7] 6 | 7 | ### 0.2.1 (2017-06-20) 8 | 9 | - Update externs so umd code isn't mangled at build [#6] 10 | 11 | ### 0.2.0 (2017-06-19) 12 | 13 | - Update the build to remove `console.log()` statements [#3] 14 | - Add a new `tti-polyfill-debug.js` file with the debug logs preserved [#3] 15 | - Remove the `debugMode` option as it's handled by the debug script [#3] 16 | - Add the undocumented `useMutationObserver` option to the documentation [#3] 17 | 18 | ### 0.1.1 (2017-05-23) 19 | 20 | - Remove unnecessary `console.log()` statement [#2] 21 | 22 | ### 0.1.0 (2017-05-18) 23 | 24 | - Initial public release 25 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/snippet.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /* eslint-disable */ 17 | 18 | 19 | !function(){if('PerformanceLongTaskTiming' in window){var g=window.__tti={e:[]}; 20 | g.o=new PerformanceObserver(function(l){g.e=g.e.concat(l.getEntries())}); 21 | g.o.observe({entryTypes:['longtask']})}}(); 22 | -------------------------------------------------------------------------------- /tests/runFirstInteractiveCoreTests.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | Check console for errors. 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/debug.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * @define {boolean} 18 | */ 19 | let DEBUG = true; 20 | 21 | 22 | /** 23 | * Prints a log statement to the console if the DEBUG flag is true. 24 | * @param {...*} args 25 | */ 26 | export const log = (...args) => { 27 | if (DEBUG) { 28 | // eslint-disable-next-line no-console 29 | console.log(...args); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /src/umd-wrapper.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /* global define, module */ 17 | 18 | 19 | import {getFirstConsistentlyInteractive} from './index.js'; 20 | 21 | 22 | const moduleExport = {getFirstConsistentlyInteractive}; 23 | 24 | 25 | if (typeof module != 'undefined' && module.exports) { 26 | module.exports = moduleExport; 27 | } else if (typeof define === 'function' && define.amd) { 28 | define('ttiPolyfill', [], () => moduleExport); 29 | } else { 30 | window.ttiPolyfill = moduleExport; 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tti-polyfill", 3 | "version": "0.2.2", 4 | "description": "Polyfill for Time to Interactive. See https://goo.gl/OSmrPk", 5 | "main": "tti-polyfill.js", 6 | "scripts": { 7 | "lint": "eslint --fix src/*.js scripts/*.js tests/*.js", 8 | "build": "npm run lint && node scripts/build.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/GoogleChrome/tti-polyfill.git" 13 | }, 14 | "contributors": [ 15 | "Deepanjan Roy (Google)", 16 | "Philip Walton (https://philipwalton.com/)" 17 | ], 18 | "license": "Apache-2.0", 19 | "bugs": { 20 | "url": "https://github.com/GoogleChrome/tti-polyfill/issues" 21 | }, 22 | "homepage": "https://github.com/GoogleChrome/tti-polyfill#readme", 23 | "devDependencies": { 24 | "chalk": "^1.1.3", 25 | "eslint": "^4.0.0", 26 | "eslint-config-google": "^0.8.0", 27 | "fs-extra": "^3.0.1", 28 | "google-closure-compiler-js": "^20170521.0.0", 29 | "gzip-size": "^3.0.0", 30 | "rollup": "^0.41.6", 31 | "rollup-plugin-node-resolve": "^3.0.0", 32 | "source-map": "^0.5.6" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Want to contribute? Great! First, read this page (including the small print at the end). 2 | 3 | ### Before you contribute 4 | Before we can use your code, you must sign the 5 | [Google Individual Contributor License Agreement](https://developers.google.com/open-source/cla/individual?csw=1) 6 | (CLA), which you can do online. The CLA is necessary mainly because you own the 7 | copyright to your changes, even after your contribution becomes part of our 8 | codebase, so we need your permission to use and distribute your code. We also 9 | need to be sure of various other things—for instance that you'll tell us if you 10 | know that your code infringes on other people's patents. You don't have to sign 11 | the CLA until after you've submitted your code for review and a member has 12 | approved it, but you must do it before we can put your code into our codebase. 13 | Before you start working on a larger contribution, you should get in touch with 14 | us first through the issue tracker with your idea so that we can help out and 15 | possibly guide you. Coordinating up front makes it much easier to avoid 16 | frustration later on. 17 | 18 | ### Code reviews 19 | All submissions, including submissions by project members, require review. We 20 | use Github pull requests for this purpose. 21 | 22 | ### The small print 23 | Contributions made by corporations are covered by a different agreement than 24 | the one above, the Software Grant and Corporate Contributor License Agreement. 25 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | import FirstConsistentlyInteractiveDetector 17 | from './firstConsistentlyInteractiveDetector.js'; 18 | 19 | 20 | /** 21 | * Returns a promise that resolves to the first consistently interactive time 22 | * (in milliseconds) or null if the browser doesn't support the features 23 | * required for detection. 24 | * @param {!FirstConsistentlyInteractiveDetectorInit=} opts Configuration 25 | * options for the polyfill 26 | * @return {!Promise} TODO(philipwalton): for some reason the type 27 | * {!Promise<(number|null)>} isn't working here, check if this is fixed in 28 | * a new version of closure compiler. 29 | */ 30 | export const getFirstConsistentlyInteractive = (opts = {}) => { 31 | if ('PerformanceLongTaskTiming' in window) { 32 | const detector = new FirstConsistentlyInteractiveDetector(opts); 33 | return detector.getFirstConsistentlyInteractive(); 34 | } else { 35 | return Promise.resolve(null); 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /src/externs.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /* eslint-disable */ 17 | 18 | 19 | // UMD globals 20 | var define; 21 | define.amd; 22 | var module; 23 | module.exports; 24 | 25 | 26 | // TTI Polyfill global export 27 | window.ttiPolyfill; 28 | window.ttiPolyfill.getFirstConsistentlyInteractive = function() {}; 29 | 30 | 31 | // TTI Polyfill snippet variables. 32 | window.__tti; 33 | window.__tti.o; 34 | window.__tti.e; 35 | 36 | 37 | /** 38 | * @typedef {{ 39 | * useMutationObserver: (boolean|undefined), 40 | * }} 41 | */ 42 | var FirstConsistentlyInteractiveDetectorInit; 43 | 44 | 45 | /** 46 | * @constructor 47 | */ 48 | function PerformanceObserverEntry() {} 49 | 50 | 51 | /** 52 | * Options for the PerformanceObserver. 53 | * @typedef {{ 54 | * entryTypes: (Array), 55 | * }} 56 | */ 57 | var PerformanceObserverInit; 58 | 59 | 60 | /** 61 | * @param {!function(!Performance, !PerformanceObserver)} callback 62 | * @constructor 63 | */ 64 | function PerformanceObserver(callback) {} 65 | 66 | 67 | /** 68 | * @param {!PerformanceObserverInit} options 69 | */ 70 | PerformanceObserver.prototype.observe = function(options) {}; 71 | 72 | 73 | PerformanceObserver.prototype.disconnect = function() {}; 74 | 75 | 76 | /** 77 | * @constructor 78 | */ 79 | function PerformanceLongTaskTiming() {} 80 | -------------------------------------------------------------------------------- /src/firstConsistentlyInteractiveCore.js: -------------------------------------------------------------------------------- 1 | // Copyright 2017 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | 16 | /** 17 | * Computes the first consistently interactive value... 18 | * @param {number} searchStart 19 | * @param {number} minValue 20 | * @param {number} lastKnownNetwork2Busy 21 | * @param {number} currentTime 22 | * @param {!Array<{start: (number), end: (number)}>} longTasks 23 | * @return {number|null} 24 | */ 25 | export const computeFirstConsistentlyInteractive = 26 | (searchStart, minValue, lastKnownNetwork2Busy, currentTime, longTasks) => { 27 | // Have not reached network 2-quiet yet. 28 | if ((currentTime - lastKnownNetwork2Busy) < 5000) return null; 29 | 30 | const maybeFCI = longTasks.length === 0 ? 31 | searchStart : longTasks[longTasks.length - 1].end; 32 | 33 | // Main thread has not been quiet for long enough. 34 | if (currentTime - maybeFCI < 5000) return null; 35 | 36 | return Math.max(maybeFCI, minValue); 37 | }; 38 | 39 | 40 | /** 41 | * Computes the time (in milliseconds since requestStart) that the network was 42 | * last known to have >2 requests in-flight. 43 | * @param {!Array} incompleteRequestStarts 44 | * @param {!Array<{start: (number), end: (number)}>} observedResourceRequests 45 | * @return {number} 46 | */ 47 | export const computeLastKnownNetwork2Busy = 48 | (incompleteRequestStarts, observedResourceRequests) => { 49 | if (incompleteRequestStarts.length > 2) return performance.now(); 50 | 51 | const endpoints = []; 52 | for (const req of observedResourceRequests) { 53 | endpoints.push({ 54 | timestamp: req.start, 55 | type: 'requestStart', 56 | }); 57 | endpoints.push({ 58 | timestamp: req.end, 59 | type: 'requestEnd', 60 | }); 61 | } 62 | 63 | for (const ts of incompleteRequestStarts) { 64 | endpoints.push({ 65 | timestamp: ts, 66 | type: 'requestStart', 67 | }); 68 | } 69 | 70 | endpoints.sort((a, b) => a.timestamp - b.timestamp); 71 | 72 | let currentActive = incompleteRequestStarts.length; 73 | 74 | for (let i = endpoints.length - 1; i >= 0; i--) { 75 | const endpoint = endpoints[i]; 76 | switch (endpoint.type) { 77 | case 'requestStart': 78 | currentActive--; 79 | break; 80 | case 'requestEnd': 81 | currentActive++; 82 | if (currentActive > 2) { 83 | return endpoint.timestamp; 84 | } 85 | break; 86 | default: 87 | throw Error('Internal Error: This should never happen'); 88 | } 89 | } 90 | 91 | // If we reach here, we were never network 2-busy. 92 | return 0; 93 | }; 94 | -------------------------------------------------------------------------------- /tests/runMutationObserverTests.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 |

25 | Some link 26 | 27 | 28 | 29 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: **WARNING** :warning: we no longer recommend measuring TTI [in the field](https://web.dev/user-centric-performance-metrics/#in-the-field); instead, we recommend measuring [FID](https://web.dev/fid/), which can be done using the [`web-vitals`](https://github.com/GoogleChrome/web-vitals) JavaScript library. TTI will continue to be supported in [lab-measurement tools](https://web.dev/user-centric-performance-metrics/#in-the-lab) like [Lighthouse](https://github.com/GoogleChrome/lighthouse). 2 | 3 | * * * 4 | 5 | Time to Interactive Polyfill 6 | ============================ 7 | 8 | A polyfill for the Time to Interactive metric. See the [metric definition](https://goo.gl/OSmrPk) for in-depth implementation details. 9 | 10 | ## Installation 11 | 12 | You can install the TTI polyfill from npm by running: 13 | 14 | ```sh 15 | npm install tti-polyfill 16 | ``` 17 | 18 | ## Usage 19 | 20 | Adding the TTI polyfill is a two-step process. First you need to add a snippet of code to the head of your document (before any other scripts run). This snippet creates a `PerformanceObserver` instance and starts observing `longtask` entry types. 21 | 22 | ```html 23 | 28 | ``` 29 | 30 | *__Note:__ this snippet is a temporary workaround, until browsers implement level 2 of the Performance Observer spec and include the [`buffered`](https://w3c.github.io/performance-timeline/#dom-performanceobserverinit-buffered) flag.* 31 | 32 | The second step is to import the module into your application code and invoke the `getFirstConsistentlyInteractive()` method. The `getFirstConsistentlyInteractive()` method returns a promise that resolves to the TTI metric value (in milliseconds since navigation start). If no TTI value can be found, or if the browser doesn't support all the APIs required to detect TTI, the promise resolves to `null`. 33 | 34 | ```js 35 | import ttiPolyfill from './path/to/tti-polyfill.js'; 36 | 37 | ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => { 38 | // Use `tti` value in some way. 39 | }); 40 | ``` 41 | 42 | Note that this method can be invoked at any time, it does not need to be called prior to interactivity being reached. This allows you to load the polyfill via `