Code Monkey home page Code Monkey logo

Comments (3)

tunetheweb avatar tunetheweb commented on September 23, 2024

Note this was introduced for TTFB in v2.1.2.

Given the limited support for IE9 (TTFB and some form of FID), and other older browsers, I'm wondering if we should just recommended to wrap this in a module script to avoid issues with older browsers:

<!-- Append the `?module` param to load the module version of `web-vitals` -->
<script type="module">
  import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals@3?module';

  onCLS(console.log);
  onFID(console.log);
  onLCP(console.log);
</script>

For those that really want TTFB for these older browsers (as the only semi-reliable metric for those browsers) this could be reported with a simple performance.timing lookup in an additional <script nomodule> element:

<script nomodule>
if (performance && performance.timing) {
  console.log(performance.timing.responseStart - performance.timing.navigationStart;);
}
</script>

Either way, we should update the docs to stop indicating that IE9 is supported when in fact it is not.

from web-vitals.

philipwalton avatar philipwalton commented on September 23, 2024

I can't reproduce this error when testing on IE9 via browserstack.com. @laoboxie can you clarify exactly what code you're running that's causing this error?

I'm trying the following, which doesn't error for me in IE9.

<script>
(function () {
  var script = document.createElement('script');
  script.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
  script.onload = function () {
    webVitals.getTTFB(console.log);
  };
  document.head.appendChild(script);
})();
</script>

Also, when I look at the code, I do not believe it's possible for the part of the code that calls performance.now() to be reached in IE9 because that line is within a conditional that only runs if the browser finds a navigation performance entry (which would not be true in IE9). See:

web-vitals/src/onTTFB.ts

Lines 71 to 82 in 1d2c191

const navEntry = getNavigationEntry();
if (navEntry) {
const responseStart = navEntry.responseStart;
// In some cases no value is reported by the browser (for
// privacy/security reasons), and in other cases (bugs) the value 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
// https://github.com/GoogleChrome/web-vitals/issues/275
if (responseStart <= 0 || responseStart > performance.now()) return;

So unless I'm missing something then I think the documentation is correct in that the onTTFB() function doesn't produce a result in IE9 but it also doesn't error:

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.

And I think it's fine to continue to make this claim because I do think we want people to be able to run this code anywhere without worry that it will error and potentially break other critical functionality on their site.

from web-vitals.

tunetheweb avatar tunetheweb commented on September 23, 2024

Closing this as no further updates heard back. Feel free to reopen if necessary.

from web-vitals.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.