Images that can be suspended on should load as early as possible during SSR. We now track whether a rendered img is "suspensey" and emit a corresponding preload behind fonts in priority.

Author: gnoff

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -2367,6 +2367,67 @@ function pushStyleContents(
   return;
 }
 
+function getImagePreloadKey(
+  href: string,
+  imageSrcSet: ?string,
+  imageSizes: ?string,
+) {
+  let uniquePart = '';
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
+  } else {
+    uniquePart += '[][]' + href;
+  }
+  return getResourceKey('image', uniquePart);
+}
+
+function pushImg(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resources: Resources,
+): null {
+  if (props.loading !== 'lazy' && typeof props.src === 'string') {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resources.
+    const {src, imageSrcSet, imageSizes} = props;
+    const key = getImagePreloadKey(src, imageSrcSet, imageSizes);
+    let resource = resources.preloadsMap.get(key);
+    if (!resource) {
+      resource = {
+        type: 'preload',
+        chunks: [],
+        state: NoState,
+        props: {
+          rel: 'preload',
+          as: 'image',
+          // There is a bug in Safari where imageSrcSet is not respected on preload links
+          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+          // This harms older browers that do not support imageSrcSet by making their preloads not work
+          // but this population is shrinking fast and is already small so we accept this tradeoff.
+          href: imageSrcSet ? undefined : src,
+          imageSrcSet,
+          imageSizes,
+          crossOrigin: props.crossOrigin,
+          integrity: props.integrity,
+          type: props.type,
+          fetchPriority: props.fetchPriority,
+          referrerPolicy: props.referrerPolicy,
+        },
+      };
+      resources.preloadsMap.set(key, resource);
+      if (__DEV__) {
+        markAsRenderedResourceDEV(resource, props);
+      }
+      pushLinkImpl(resource.chunks, resource.props);
+    }
+    resources.suspenseyImages.add(resource);
+  }
+  return pushSelfClosing(target, props, 'img');
+}
+
 function pushSelfClosing(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -3169,14 +3230,16 @@ export function pushStartInstance(
     case 'pre': {
       return pushStartPreformattedElement(target, props, type);
     }
+    case 'img': {
+      return pushImg(target, props, resources);
+    }
     // Omitted close tags
     case 'base':
     case 'area':
     case 'br':
     case 'col':
     case 'embed':
     case 'hr':
-    case 'img':
     case 'keygen':
     case 'param':
     case 'source':
@@ -4239,6 +4302,9 @@ export function writePreamble(
   resources.fontPreloads.forEach(flushResourceInPreamble, destination);
   resources.fontPreloads.clear();
 
+  resources.suspenseyImages.forEach(flushResourceInPreamble, destination);
+  resources.suspenseyImages.clear();
+
   // Flush unblocked stylesheets by precedence
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
 
@@ -4305,6 +4371,9 @@ export function writeHoistables(
   resources.fontPreloads.forEach(flushResourceLate, destination);
   resources.fontPreloads.clear();
 
+  resources.suspenseyImages.forEach(flushResourceInPreamble, destination);
+  resources.suspenseyImages.clear();
+
   // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
   resources.precedences.forEach(preloadLateStyles, destination);
@@ -4856,6 +4925,7 @@ export type Resources = {
   // Flushing queues for Resource dependencies
   preconnects: Set<PreconnectResource>,
   fontPreloads: Set<PreloadResource>,
+  suspenseyImages: Set<PreloadResource>,
   // usedImagePreloads: Set<PreloadResource>,
   precedences: Map<string, Set<StyleResource>>,
   stylePrecedences: Map<string, StyleTagResource>,
@@ -4880,6 +4950,7 @@ export function createResources(): Resources {
     // cleared on flush
     preconnects: new Set(),
     fontPreloads: new Set(),
+    suspenseyImages: new Set(),
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
@@ -5083,16 +5154,7 @@ export function preload(href: string, options: PreloadOptions) {
       // both. This is to prevent identical calls with the same srcSet and sizes to be duplicated
       // by varying the href. this is an edge case but it is the most correct behavior.
       const {imageSrcSet, imageSizes} = options;
-      let uniquePart = '';
-      if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
-        uniquePart += '[' + imageSrcSet + ']';
-        if (typeof imageSizes === 'string') {
-          uniquePart += '[' + imageSizes + ']';
-        }
-      } else {
-        uniquePart += '[][]' + href;
-      }
-      key = getResourceKey(as, uniquePart);
+      key = getImagePreloadKey(href, imageSrcSet, imageSizes);
     } else {
       key = getResourceKey(as, href);
     }

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -3771,6 +3771,62 @@ body {
     );
   });
 
+  it('can emit preloads for non-lazy images that are rendered', async () => {
+    function App() {
+      ReactDOM.preload('script', {as: 'script'});
+      ReactDOM.preload('a', {as: 'image'});
+      ReactDOM.preload('b', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <img src="a" />
+            <img src="b" loading="lazy" />
+            <img src="b2" loading="lazy" />
+            <img src="c" imageSrcSet="srcsetc" />
+            <img src="d" imageSrcSet="srcsetd" imageSizes="sizesd" />
+            <img src="d" imageSrcSet="srcsetd" imageSizes="sizesd2" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    // non-lazy images are first, then arbitrary preloads like for the script and lazy images
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="a" as="image" />
+          <link rel="preload" as="image" imagesrcset="srcsetc" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd2"
+          />
+          <link rel="preload" href="script" as="script" />
+          <link rel="preload" href="b" as="image" />
+        </head>
+        <body>
+          <img src="a" />
+          <img src="b" loading="lazy" />
+          <img src="b2" loading="lazy" />
+          <img src="c" imagesrcset="srcsetc" />
+          <img src="d" imagesrcset="srcsetd" imagesizes="sizesd" />
+          <img src="d" imagesrcset="srcsetd" imagesizes="sizesd2" />
+        </body>
+      </html>,
+    );
+  });
+
   describe('ReactDOM.prefetchDNS(href)', () => {
     it('creates a dns-prefetch resource when called', async () => {
       function App({url}) {