Why can't js chunks be loaded in parallel with CSS files?

[Ryo98-SL]

Summary

When I was optimizing the resource loading of my NextJS web app, I found that the request for the JS chunk was not being concatenated in parallel with the start of the CSS files, and was causing it to wait for the CSS files to load. I thought this behavior was a potential optimization point, since Claude's website implements parallel loading, but how?

As examples, I've included screenshots of Perplexity and Claude's websites.

perplexity:

claude:

Additional information

No response

Example

No response

[rishabhriyal112]

Hey @Ryo98-SL I can see this is a frustrating performance issue you're dealing with. Let me break this down in a way that hopefully makes sense.
So basically, what's happening is your browser is being a bit too "polite" - it's waiting for your CSS files to finish loading before it starts downloading your JavaScript chunks, even though it technically could grab them at the same time.

Why This Happens

Think of it like this: your browser is trying to avoid that awkward moment when a webpage looks completely broken for a split second. You know, when text is flying all over the place before the styles kick in? To prevent this, browsers have this rule where they make sure CSS is ready before letting JavaScript do its thing.
From your screenshots, I can see exactly what you're describing - those JS chunks are just sitting there waiting their turn while the CSS files are doing their thing. It's like being stuck in a really inefficient queue at the grocery store.

What You Can Do About It

• Try preloading your most critical files with <link rel="preload"> - this basically tells the browser "hey, I'm going to need this soon, start downloading it now"

• If some of your JavaScript isn't immediately needed, mark it as async or defer

• Consider inlining your critical CSS right in the HTML (just the stuff needed above the fold)

• Look into code splitting your CSS too, not just your JS

• Maybe explore CSS-in-JS solutions if you're using React or similar frameworks

• Check your bundler config - Webpack and similar tools have options for managing how chunks get prioritized
  This is honestly one of those web performance gotchas that catches a lot of developers off guard. You're optimizing your JavaScript splitting (which is great!), but then CSS comes along and basically says "not so fast."

The good news is that once you know what's happening, there are definitely ways to work around it. The screenshots from Perplexity and Claude's sites you shared show this is happening even on well-optimized sites, so don't feel bad about running into this.
Have you tried any preloading strategies yet?

[icyJoseph]

Can you check if they are using fetchpriority -

This screenshot shows the normal low prio set by Next.js IIRC -

I wonder if there's other browser or server conditions at play though, that might be stalling the script requests.

[rishabhriyal112]

Oh nice catch by icyJoseph! That's actually a really good thing to check.
So basically, fetchpriority is like telling the browser "hey, this file is super important, grab it first" or "this one can wait, no rush."
Here's what you should do:
Just right-click on your page, hit "View Source" (or inspect element), and look for your CSS and JavaScript tags. See if they have something like fetchpriority="high" or fetchpriority="low" in them.

What you're looking for:

• Your CSS files might have fetchpriority="high"
• Your JS chunks might have fetchpriority="low" or nothing at all
  If that's the case, boom - there's your answer! Your browser is literally being told "CSS first, JavaScript later" and it's just doing what it's told.

or you can do is open Chrome DevTools, go to the Network tab, and look for a "Priority" column. You'll see things like "High", "Low", "Medium" - if your CSS shows "High" and your JS shows "Low", that's exactly why they're not loading in parallel.
This is probably happening because Next.js (or whatever you're using) is automatically setting these priorities, thinking it's being helpful by prioritizing styles over scripts.