JS script randomly stalls when using window.addEventListener('load')

Site ID: 296b2080-5e4b-4ff0-8a8d-cf7a4b7cb113

This is a simple SPA that uses HTML/CSS/JS (vanilla) and for whatever reason, it’s seems to be stalling at random moments. Normally, I would use DOMContentLoaded for initiation but I have some key styling logic that is dependent on CSS being fully loaded. It works fine in dev (about 1-3 seconds then it’s fully loaded) but again, in production, it’s sporadically stalling and won’t render at all until a refresh happens. Here’s another interesting clue - google’s lighthouse profiler is also having trouble running the script, even WHEN the page is loaded correctly (I know they re-load it but I thought it was worth mentioning).

Anyways, I am a little lost as to what it could be? Any help would be greatly appreciated.

@TylerP33 Netlify can look into it from the Site ID that you’ve provided, but if you want any community members browsing around to assist you’ll need to provide a link to the page itself.

1 Like

@nathanmartin yeah, I was assuming there wouldn’t be much snooping from the client side that could help, but just in case, the website is jennareddoch.com.

It’s pretty infuriating that I can’t figure it out lol have tempted to go pure CSS and remove the styling logic out of JS (that will obviously change my layout some).

For future reference you can absolutely use https://296b2080-5e4b-4ff0-8a8d-cf7a4b7cb113.netlify.app/ as a URL :wink:

Regarding the issue @TylerP33, could you please show how it looks when it’s incorrect vs how it’s supposed to look when it’s correct? Also, is your latest published deploy the one with the CSS changes, or is it still causing issues? If it’s with the CSS changes in place, could you please show us the deploy permalink which had the JS issue?

Dependent on the screen size, you may see different things but the through line is there’s no content being loaded on the beige background color container. It just sits there blank and it’s incredibly obvious.

DOMContentLoaded works just fine (and faster) but due to the JS styling being dependent on class defined elements, it’s not an option for me. The inconsistency in loading is bizarre.

And yes, the current deployment is the most up-to-date.

Hey @TylerP33,

It appears that load event is taking time due to the size of the images.

I ran a quick performance test on your website, and here’s the report I got:

As you can see, the browser spent so long just for the images to load. Since load event fires when all the content on the page has loaded (including the images), it takes time. I’d advise using smaller, placeholder images and progressively replacing them once the page loads.

I can definitely refactor and make that happen. But even with some image optimization, isn’t it odd that it completely stalls sometimes and other times, it works within 1-3 seconds?

It seemed to stall every time in my testing, but no, it’s not odd. The chances are high that the images were returned from the browser cache (and I had disabled cache, which could be why it always stalled for me).

In other words, if images load fast enough, you won’t see anything stalling.

Ah, that makes sense. I’ll get it done.

Thanks for the tip!

I didn’t realise that was a hash for a specific build, I’d mistaken it for an account reference.

Hi @nathanmartin :wave:t6:, welcome to the forums! :netliconfetti: Glad to hear you are up and running as intended. Let us know if you have any other questions or concerns.

@SamO I think you may be a little over-zealous on the welcome messages there, I’m not the OP, nor was I experiencing any issue, I interjected only in an attempt to provide some community assistance and was just thanking @hrishikesh for the handy tip regarding the site id.

1 Like