Why React dynamic import file (~3.7 KB) take 650 ms on first load but only 45 ms on refresh with AWS S3 + CloudFront?

Sohan Ram — Wed, 01 Oct 2025 11:18:36 +0000

I have a React app deployed on AWS S3 + CloudFront.

One of my routes uses a dynamic import (import()), and the corresponding JS chunk is very small (~3.7 KB).

On the first load, the request for this file takes about 650 ms, but if I refresh the page immediately afterward, it only takes about 45 ms.

Here’s the request and response details from Chrome DevTools for the file:

Request URL: https://admin.simprosysapis.com/assets/RolesList-DVgRFD0k.js
Request Method: GET
Status Code: 200 OK
Remote Address: 18.66.57.77:443
Referrer Policy: strict-origin-when-cross-origin

Response headers

cache-control: max-age=3600, must-revalidate
content-encoding: br
content-type: text/javascript
server: SimprosysAPI
via: 1.1 ...cloudfront.net (CloudFront)
x-cache: Miss from cloudfront

Request headers

accept-encoding: gzip, deflate, br, zstd
cache-control: no-cache
pragma: no-cache
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ...

My questions

Why does a 3.7 KB file take ~650 ms to load the first time?

Is this mostly TLS/handshake + CloudFront latency rather than file size?
Is the x-cache: Miss from cloudfront header responsible?

Why does it become so much faster (~45 ms) on refresh?

Is the browser using disk/memory cache or a CloudFront cached copy?

Is there a way to improve the first load time for these small dynamic chunks (e.g., preloading, prefetching, or CloudFront settings)?

What I tried

Checked headers: content-encoding: br confirms compression is working.
Cache headers look reasonable (max-age=3600).
Behavior is consistent across multiple builds.

Expected / Desired