1

Google Lighthouse has recommendations that have huge potential savings, but I'm skeptical of how they calculate those savings and actual savings look rather trivial. I'm curious if I'm missing something.

Here there's a total estimated savings of >2s with large 'potential savings' for each font file: enter image description here

If I look at any request in there, they're all very small:
enter image description here

Here are my runtime settings:
enter image description here

Does anyone know how this could be calculated? I'm expecting to see negligible improvement (if any), but maybe I'll be surprised.

MStodd
  • 4,716
  • 3
  • 30
  • 50
  • Check the waterfall, at what point did the fonts load. Also bear in mind that there is still throttling at 10240kbps so you will have to adjust the network settings before you test. – GrahamTheDev Jun 22 '21 at 19:54

1 Answers1

2

First you have to understand that there is throttling on the CPU and the connection when running a mobile audit (to simulate a mid tier phone on 4G).

You may find this answer I gave helps understand why the network tab does not match the report (it is about the performance tab vs the report but the same principle applies)

Once you understand that part the easiest way to understand where these numbers come from is to look at the source code for the font audit (for example)

You will see that all it is doing is comparing the start time to the end time on a resource entry. It caps this at 3000ms as at that point the browser will just use the default font to render.

// all browsers wait 3000ms to block text so we make sure 3000 is our max wasted time

I think if you examine lines 150 to lines 173 they will give you an answer (coupled with the information on throttling I gave earlier)

If you want your Network tab to closely match that of your report you can set the network throttling (next to the "disable cache" checkmark) to "Fast 3G" as this closely matches the settings Lighthouse uses. (from memory the exact settings are 1.6Mbit / s download, 750Kbit / s upload and 150ms latency if you want to create a custom network profile).

Preloading means that the requests happen before any other requests and before the HTML has been fully parsed, so depending on where your requests are in the waterfall the time savings can be significant (examine the preload fonts audit for more detail)

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • I added my runtime settings. I only ran desktop, so that's not an issue. It looks like they multiply by a magic 1000 to account for paint time. Is that it? Maybe the benefit is a single paint with the correct font instead of a paint with a default font followed by a paint with a different font later? – MStodd Jun 22 '21 at 19:32
  • No the 1000 is to convert seconds to milliseconds I believe. I think that note is saying that there is a limitation to how they calculate it that they **dont** include paint time (just badly worded). I could be wrong though this is one of the audits I have never looked into I am afraid. – GrahamTheDev Jun 22 '21 at 19:59
  • Ohhh, duh. Alright, well you definitely gave me a good place to start – MStodd Jun 22 '21 at 20:05