(Note, this isn't about making a random tool giving me a better number; I'm diagnosing a landing page that is having terrible performance, and based on the web vitals assessment, real users are taking nearly 10 seconds to get to interactive!)
I don't think I'm using very much JavaScript, but apparently what I am using is quite slow (Google Tag Manager and Stripe each add between 500-700 ms!!).
I've managed to get https://pagespeed.web.dev/ into the upper 80s / lower 90s for mobile, but I've done so by delaying all JavaScript. Now I only load 1 script, and that script loads the other scripts after either 5000ms or first user interaction (I check for mouseover, keydown, touchmove, or touchstart).
So far so good. However, there are some scripts I'd like to load earlier (really, as soon as possible). I've tried
window.onload = loadEarlyScripts();
document.body.addEventListener('load', loadEarlyScripts);
and
document.body.addEventListener('readystatechange', () => {
if ( document.readystate === 'complete' ) loadEarlyScripts;
});
But all of those drop my PageSpeed performance from 85-95 to ~ 45. So, the user-interaction events are good enough, but none of these are. What's the earliest event I can target that will make PageSpeed happy?