Safari on iPhone loads my Next.js app much slower than Chrome

Help
, , ,
1

Hi everyone,

I’m experiencing a strange issue with my Next.js application deployed on Vercel.

Environment

  • Framework: Next.js (App Router)
  • Hosting: Vercel
  • Devices tested: Multiple iPhones
  • Browsers tested:
    • :white_check_mark: Chrome (loads almost instantly)
    • :cross_mark: Safari (very slow initial load)

The issue

When opening my website on an iPhone using Safari, the initial page load is extremely slow. The browser stays on a blank screen for several seconds before the page starts loading.

However, opening the exact same URL on Chrome on the same iPhone loads almost instantly.

This happens consistently across multiple iPhones, so it doesn’t appear to be device-specific.

Once the first page finally loads, navigating around the site feels normal. The problem is only with the initial request in Safari.

What I’ve checked

  • The project is deployed on Vercel.
  • Performance is excellent on Chrome and other browsers.
  • There are no obvious JavaScript errors.
  • The issue is reproducible only in Safari.

Questions

  • Has anyone experienced this before?
  • Could this be related to Safari’s networking stack, HTTP/3, TLS, DNS, or the Vercel Edge Network?
  • Are there any Vercel configurations that could cause this behavior?
  • What is the best way to determine whether the delay is happening during DNS lookup, TLS handshake, TTFB, or client-side execution?

I’d appreciate any suggestions or debugging tips.

Thanks!

2

The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.

You can also use v0 to narrow down the possibilities.

3

Hi Hero,

I’d first separate “Safari is slow to get the document” from “Safari gets the document quickly but renders a blank page for a while.”

A quick way to check is to run this in Safari’s console after a slow load, then compare it with Chrome on the same iPhone:

const n = performance.getEntriesByType("navigation")[0];

console.table({
  dns: Math.round(n.domainLookupEnd - n.domainLookupStart),
  connect: Math.round(n.connectEnd - n.connectStart),
  tls: Math.round(n.requestStart - n.secureConnectionStart),
  ttfb: Math.round(n.responseStart - n.requestStart),
  download: Math.round(n.responseEnd - n.responseStart),
  dom: Math.round(n.domContentLoadedEventEnd - n.responseEnd),
  total: Math.round(n.loadEventEnd - n.startTime),
});

If dns, connect, tls, or ttfb is much higher only in Safari, I’d test Safari with iCloud Private Relay/content blockers disabled, and compare Wi-Fi vs mobile data. I’d also compare the custom domain against the *.vercel.app URL. If the Vercel URL is fast but the custom domain is slow, then I’d look at DNS, SSL, or anything proxying the domain.

If the network numbers look normal but the screen stays blank, then I’d focus on client rendering: large JS, blocking third-party scripts, fonts, CSS, hydration, or an app shell that does not render meaningful HTML before client code runs.

One useful isolation test is adding a very small static page, for example /plain, that only returns simple text and no heavy components. If Safari loads /plain instantly but the homepage is slow, the issue is probably in the page code/assets. If /plain is also slow, the issue is more likely network/domain/browser-path related.

The most useful detail to share next would be the timing table from Safari and Chrome for the exact same URL.