Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix next/image being downloaded multiple times on Safari #22902

Merged
merged 3 commits into from
Mar 9, 2021
Merged

Fix next/image being downloaded multiple times on Safari #22902

merged 3 commits into from
Mar 9, 2021

Conversation

shuding
Copy link
Member

@shuding shuding commented Mar 9, 2021

Currently if you have sizes set in next/image, the image will likely be downloaded multiple times (usually twice) on Safari (macOS and iOS): the correct size for the viewport, and the original size specified in src.

Also make sure you have "Ignore Resource Cache" disabled in the Safari Devtools when trying to reproduce:

CleanShot 2021-03-09 at 21 05 54@2x

The root cause is the way Safari handles <img>'s attribute updates. Although React updates all the attributes one by one synchronously and programmatically, Safari will still try to fetch the resource immediately and won't wait for other DOM changes to be finished.

That means if we set the following 3 attributes in this order: src, srcSet, sizes. Safari will fetch the image when src is set. And then once srcSet is there it will fetch the resource again based on it. And finally, when sizes is updated it might correct the resource URL again.

So the fix here is simple: by just reordering those to sizes, srcSet, src, it will only load the image with the correct size only once:

CleanShot 2021-03-09 at 21 05 30@2x

Fixes #19478.

@ijjk ijjk added the type: next label Mar 9, 2021
timneutkens
timneutkens requested changes Mar 9, 2021
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's crazy 👀 Could you add an integration test for this?

@ijjk
Copy link
Member

ijjk commented Mar 9, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 11.6s 11.5s -78ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall increase ✓
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.956 2.002 ⚠️ +0.05
/ avg req/sec 1278.44 1248.63 ⚠️ -29.81
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.259 1.225 -0.03
/error-in-render avg req/sec 1985.58 2040.9 +55.32
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 613 B 613 B ✓
link.html gzip 621 B 621 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 13.6s 13.3s -337ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Serverless bundles
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_error.js 1.02 MB 1.02 MB ✓
404.html 2.67 kB 2.67 kB ✓
500.html 2.65 kB 2.65 kB ✓
amp.amp.html 10.5 kB 10.5 kB ✓
amp.html 1.86 kB 1.86 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Webpack 5 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 13.5s 14s ⚠️ +456ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall increase ✓
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.008 2.018 ⚠️ +0.01
/ avg req/sec 1244.84 1238.64 ⚠️ -6.2
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.274 1.243 -0.03
/error-in-render avg req/sec 1961.64 2010.54 +48.9
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
597-2bc2376a..203d.js gzip 13.3 kB 13.3 kB ✓
framework.HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 954 B 954 B ✓
Overall change 60.2 kB 60.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB ✓
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB ✓
amp-33a09cb0..6745.js gzip 536 B 536 B ✓
hooks-4e968a..f870.js gzip 902 B 902 B ✓
index-5c6845..f75c.js gzip 230 B 230 B ✓
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB ✓
routerDirect..bb56.js gzip 306 B 306 B ✓
withRouter-7..2133.js gzip 302 B 302 B ✓
Overall change 8.57 kB 8.57 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 326 B 326 B ✓
Overall change 326 B 326 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 585 B 585 B ✓
link.html gzip 593 B 593 B ✓
withRouter.html gzip 581 B 581 B ✓
Overall change 1.76 kB 1.76 kB ✓

Diffs

Diff for index.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "ZvbybuFi9QIdhVr4T9OLB",
+        "buildId": "6CiGDTLpcUy6KO-asB24_",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_buildManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_ssgManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html 
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "ZvbybuFi9QIdhVr4T9OLB",
+        "buildId": "6CiGDTLpcUy6KO-asB24_",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_buildManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_ssgManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "ZvbybuFi9QIdhVr4T9OLB",
+        "buildId": "6CiGDTLpcUy6KO-asB24_",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_buildManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/ZvbybuFi9QIdhVr4T9OLB/_ssgManifest.js"
+      src="/_next/static/6CiGDTLpcUy6KO-asB24_/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: 8707256

@shuding
Copy link
Member Author

shuding commented Mar 9, 2021

@timneutkens added in a8d94f4, also confirmed that testsafari will fail without the fix.

@ijjk
Copy link
Member

ijjk commented Mar 9, 2021

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 13.7s 13.6s -108ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.422 2.43 ⚠️ +0.01
/ avg req/sec 1032.17 1028.97 ⚠️ -3.2
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.617 1.718 ⚠️ +0.1
/error-in-render avg req/sec 1545.65 1454.79 ⚠️ -90.86
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 613 B 613 B ✓
link.html gzip 621 B 621 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 15.4s 15.5s ⚠️ +16ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Serverless bundles
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_error.js 1.02 MB 1.02 MB ✓
404.html 2.67 kB 2.67 kB ✓
500.html 2.65 kB 2.65 kB ✓
amp.amp.html 10.5 kB 10.5 kB ✓
amp.html 1.86 kB 1.86 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Webpack 5 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 16.2s 16s -225ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall increase ✓
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.459 2.348 -0.11
/ avg req/sec 1016.88 1064.51 +47.63
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.86 1.636 -0.22
/error-in-render avg req/sec 1343.9 1528.55 +184.65
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
597-2bc2376a..203d.js gzip 13.3 kB 13.3 kB ✓
framework.HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 954 B 954 B ✓
Overall change 60.2 kB 60.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB ✓
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB ✓
amp-33a09cb0..6745.js gzip 536 B 536 B ✓
hooks-4e968a..f870.js gzip 902 B 902 B ✓
index-5c6845..f75c.js gzip 230 B 230 B ✓
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB ✓
routerDirect..bb56.js gzip 306 B 306 B ✓
withRouter-7..2133.js gzip 302 B 302 B ✓
Overall change 8.57 kB 8.57 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 326 B 326 B ✓
Overall change 326 B 326 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 585 B 585 B ✓
link.html gzip 593 B 593 B ✓
withRouter.html gzip 581 B 581 B ✓
Overall change 1.76 kB 1.76 kB ✓

Diffs

Diff for index.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "8WfMynDMS-Q_AHZ1poRL-",
+        "buildId": "k6QbQ-jJMxuQhUWT2dSAg",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_buildManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_ssgManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html 
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "8WfMynDMS-Q_AHZ1poRL-",
+        "buildId": "k6QbQ-jJMxuQhUWT2dSAg",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_buildManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_ssgManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "8WfMynDMS-Q_AHZ1poRL-",
+        "buildId": "k6QbQ-jJMxuQhUWT2dSAg",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_buildManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/8WfMynDMS-Q_AHZ1poRL-/_ssgManifest.js"
+      src="/_next/static/k6QbQ-jJMxuQhUWT2dSAg/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: a8d94f4

@ijjk
Copy link
Member

ijjk commented Mar 9, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 10.9s 10.4s -535ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall increase ✓
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.027 1.973 -0.05
/ avg req/sec 1233.44 1267.32 +33.88
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.379 1.377 0
/error-in-render avg req/sec 1813.13 1815.98 +2.85
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 613 B 613 B ✓
link.html gzip 621 B 621 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 12.8s 12s -826ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
677f882d2ed8..a2e7.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 6.65 kB 6.65 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 59.8 kB 59.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
amp-e3e9bc99..932c.js gzip 536 B 536 B ✓
hooks-5023ef..3670.js gzip 888 B 888 B ✓
index-3a2b03..c677.js gzip 227 B 227 B ✓
link-177412b..043e.js gzip 1.67 kB 1.67 kB ✓
routerDirect..1a66.js gzip 303 B 303 B ✓
withRouter-9..1b7d.js gzip 302 B 302 B ✓
Overall change 8.66 kB 8.66 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 347 B 347 B ✓
Overall change 347 B 347 B ✓
Serverless bundles
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_error.js 1.02 MB 1.02 MB ✓
404.html 2.67 kB 2.67 kB ✓
500.html 2.65 kB 2.65 kB ✓
amp.amp.html 10.6 kB 10.6 kB ✓
amp.html 1.86 kB 1.86 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Webpack 5 Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
buildDuration 12.3s 12.3s -52ms
nodeModulesSize 42.8 MB 42.8 MB ⚠️ +807 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.047 2.003 -0.04
/ avg req/sec 1221.44 1248.09 +26.65
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.32 1.393 ⚠️ +0.07
/error-in-render avg req/sec 1894.48 1794.29 ⚠️ -100.19
Client Bundles (main, webpack, commons)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
597-2bc2376a..203d.js gzip 13.3 kB 13.3 kB ✓
framework.HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 954 B 954 B ✓
Overall change 60.2 kB 60.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_app-aedc815..1421.js gzip 1.26 kB 1.26 kB ✓
_error-71ec2..1a96.js gzip 3.38 kB 3.38 kB ✓
amp-33a09cb0..6745.js gzip 536 B 536 B ✓
hooks-4e968a..f870.js gzip 902 B 902 B ✓
index-5c6845..f75c.js gzip 230 B 230 B ✓
link-99f0c6c..b84a.js gzip 1.65 kB 1.65 kB ✓
routerDirect..bb56.js gzip 306 B 306 B ✓
withRouter-7..2133.js gzip 302 B 302 B ✓
Overall change 8.57 kB 8.57 kB ✓
Client Build Manifests
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
_buildManifest.js gzip 326 B 326 B ✓
Overall change 326 B 326 B ✓
Rendered Page Sizes
vercel/next.js canary shuding/next.js fix-safari-image-multi-requests Change
index.html gzip 585 B 585 B ✓
link.html gzip 593 B 593 B ✓
withRouter.html gzip 581 B 581 B ✓
Overall change 1.76 kB 1.76 kB ✓

Diffs

Diff for index.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "1qKDCAfZ8MvqFsOIZAT4y",
+        "buildId": "yqnkhHDn-Hfg-XNMpsNRk",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_buildManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_ssgManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html 
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "1qKDCAfZ8MvqFsOIZAT4y",
+        "buildId": "yqnkhHDn-Hfg-XNMpsNRk",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_buildManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_ssgManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html 
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "1qKDCAfZ8MvqFsOIZAT4y",
+        "buildId": "yqnkhHDn-Hfg-XNMpsNRk",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_buildManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/1qKDCAfZ8MvqFsOIZAT4y/_ssgManifest.js"
+      src="/_next/static/yqnkhHDn-Hfg-XNMpsNRk/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: 962ea93

@kodiakhq kodiakhq bot merged commit 7dd99fa into vercel:canary Mar 9, 2021
@shuding shuding deleted the fix-safari-image-multi-requests branch March 9, 2021 19:16
This was referenced Mar 15, 2021
Merged
Closed
Closed
Closed
Merged
Merged
Closed
Closed
Closed
Closed
Closed
Merged
Closed
This was referenced Mar 16, 2021
Merged
Merged
Closed
Closed
Merged
Closed
Closed
Merged
Merged
Closed
Closed
Merged
Closed
Merged
Closed
Closed
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Closed
Closed
Closed
Closed
Merged
Merged
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@divmain divmain Awaiting requested review from divmain

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Next/Image] Images on Safari are getting downloaded multiple times in different sizes
3 participants
@shuding @ijjk @timneutkens