Fingerprint lighthouse performance impact

[albanx]

// this is a report rather than a bug

Scenario

I have an angular application and during some performance analysis with Lighthouse I found out that fingerprint impacts the Performance score from 8 to 10 points (which is actually a lot).

Fingerprint impacts the performance

• What's the scenario, what happens and what did you expect to happen?
  Mobile simulation with lighthouse median device specs

• What device and browser are you using?
  Chrome v.100 mobile simulation, with lighthouse

• What version of fingerprintjs are you using? (Bug reports not applicable to fingerprintjs master are subject to be closed without comment.)
  v.3.3.3

I had to disable and replace fingerprint with a localstorage solution at the moment.
Have to say that Desktop performance are not impacted.

Ideally would be having a fingerprint detection using only lightweight fingerprint detection (ex just canvas detection). I mostly use it to identify returning visitors rather than security.

[Valve]

@albanx thanks for submitting this issue.
This doesn't answer your question, but I wanted to note that the lighthouse builds a score assuming a CPU that's 4X slower than your real CPU: https://web.dev/discover-performance-opportunities-with-lighthouse/#:~:text=Lighthouse%20doesn't%20actually%20throttle,less%20powerful%20than%20your%20machine's.
Do you have data that would help us confirm by how much FingerprintJS actually slows down your page?

[Finesse]

Hi @albanx. Could you please clarify what exactly your concern is about. Do you want the FingerprintJS library to do the same job consuming less resources? Or do you want to improve the Lighthouse score?

Please share some details about how you use FingerprintJS. Do you use NPM or the CDN? Do you minify the library code? When do you call load() and when do you call get() (e.g. when the page starts, when a button is clicked, etc)?

[albanx]

Hi guys, first thanks for the prompt reply. Let me post some of my findings, later on I will come back with a full analysis:

import FingerprintJS from '@fingerprintjs/fingerprintjs'
  ngOnInit() {
    this.getFingerPrint();
  }
  async getFingerPrint() {
    const fp = await FingerprintJS.load();
    const result = await fp.get()
    const fingerprint = result.visitorId;
    const version = environment.appVersion;
    let timezone = '';
    try {
      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    } catch(e) {

    }

    this.store.dispatch(buildUserFingerPrint(fingerprint, timezone, navigator.userAgent, version));
  }

This is literally my code. The fingerprint is called after the page has been rendered.

Activating the above call, increases the TBT (total blocking time) by 1.2 seconds on low end devices, most probably because the library does some computation that take more that 50ms (according to lighthouse specs).

Questions: is there a way to run fingerprint in a web worker?

The reason I am posting this is because I am trying to optimise a real estate application (own by me) https://homezone.al at the bone, to improve SEO, for which performance is important.

[Finesse]

@albanx I'm don't know Angular well enough so I only can give you a general strategy advice.

FingerprintJS starts collecting the entropy components (that form the fingerprint) when the load function is called. Collecting the components is a resource-consuming process, some blocking operations can't take less than 50ms on low-end devices. You run the process when the page starts, that's why the Lighthouse score decreases. So, you need to delay the load function call to exclude the fingerprinting from the page initialization process. This may work:

ngOnInit() {
  setTimeout(() => this.getFingerPrint(), 2000);
}

Questions: is there a way to run fingerprint in a web worker?

No. FingerprintJS requires window, navigator and document which are unavailable in web workers.

You can also exclude some entropy sources. It will reduce the blocking time but will decrease the fingerprint accuracy. See this thread to learn how to do it.

[albanx]

Angular itself it is not a problem.

I tried that as well with 5 seconds interval:

ngOnInit() {
  setTimeout(() => this.getFingerPrint(), 5000);
}

but did not work at 100%, was giving aleatorian results some time increasing the score by 4 points.

also I moved the FP call directly in index.html, this gave better results.

I will the thread you suggested to seem the improvement. In the mean time thanks for the reply, we can close this ticket. As I said the impact is minimal, and almost null on desktop.

[Finesse]

@albanx You can also do the fingerprinting in response to a user action. Lighthouse won't run the fingerprinting script, therefore the score will improve. The only performance impact will be caused by including the library code to your page. But it can be avoided too by loading the code dynamically, for example:

button.onClick = async () => {
  const FingerprintJS = await import('https://openfpcdn.io/fingerprintjs/v3')
  const fp = await FingerprintJS.load()
  const result = await fp.get()
  const visitorId = result.visitorId
  console.log(visitorId)
}

[albanx]

actually that is a good idea. I will try that and measure the scores. thanks