This content originally appeared on DEV Community and was authored by Sohan Ram
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 cloudfrontheader 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: brconfirms compression is working. - Cache headers look reasonable (
max-age=3600). - Behavior is consistent across multiple builds.
Expected / Desired
I want to understand if this latency difference is normal for CloudFront + S3 dynamic imports, and whether I can optimize the first-load latency further.
This content originally appeared on DEV Community and was authored by Sohan Ram