1

I have a web application that requests a lot of media assets in parallel using AJAX. All assets are coming from the same Cloudfront Origin, which is itself directly plugged into an S3 bucket.

I'm seeing requests from Cloudfront with TTFB of the order of seconds. Even more odd, it seems that those requests are basically queued until a previous request has been served:

Those two requests are initiated in parallel, and you can see that it's not Chrome queueing them, but Cloudfront not answering anything to the second (2KB) request until the first request has completed download. This is slowing down my application by a huge margin, and I cannot figure out what is going wrong... I see the same behavior when I check with Safari too.

Here are the two requests details

As you can see, they are also both Hit from cloudfront.

Finally, as it might be relevant, I'm using a lambda function in my Origin's behavior to add the proper Vary headers, to prevent Chrome from using cached requests without the CORS headers that will make subseqeuent CORS request fail (see details here). Here is my complete Origin's behavior settings:

Any help is appreciated, and please feel free to ask more details if needed! Thanks a lot in advance.

Silvain
  • 399
  • 4
  • 20
  • 1
    The Lambda@Edge trigger on origin response would not fire on a cache hit, so that should be unrelated. I suspect you need to look back towards the requests preceding these two, as they appear to have been blocked by something earlier, rather than one of them blocking the other. You mentioned *"a lot of media assets in parallel"* -- how many are in "a lot?" – Michael - sqlbot Aug 08 '19 at 20:01
  • Thanks for the clarification about the Lambda@Edge! `They appear to have been blocked by something earlier` - Both requests started at the same time because they are dependent on a previous request (ie. the app makes an API query which returns a list of files to download, and then starts all those downloads in parallel). – Silvain Aug 09 '19 at 08:49
  • The whole flow is as follow: `1.` The app downloads a ReactJS bundle (only file not coming from the same Cloudfront Origin, it has its own S3 Bucket + Origin) `2.` The bundle requests two files in parallel (those in the example) `3.` One of the previous file is a "manifest" which contains a list of assets to download `4.` All listed assets are downloaded in parallel – Silvain Aug 09 '19 at 08:50
  • `You mentioned "a lot of media assets in parallel" -- how many are in "a lot?"` - It depends, but it can be something around 10 in parallel, maybe 20 in the worst case (it's a 3D app, which needs to download textures and meshes, so that can add up to quite a bunch of files). In this example, it's in fact only 2 since it's at step `2.` of the flow. The issue is the same at step `4.` though. – Silvain Aug 09 '19 at 08:51

0 Answers0