Add warning when LCP image is missing `priority` prop #30221

styfle · 2021-10-24T01:32:06Z

This will warn when Next.js detected an image as the LCP element but its missing the priority prop.

Related to Add "priority" section to Image Optimization doc #30218

molebox

packages/next/client/image.tsx

kara

LGTM

ijjk · 2021-10-25T20:50:32Z

Failing test suites

Commit: d32c0be

test/development/basic-basepath/hmr.test.ts

basic HMR > Error Recovery > should recover from errors in the render function
basic HMR > Error Recovery > should recover after exporting an invalid page
basic HMR > Error Recovery > should recover after undefined exported as default

Expand output

● basic HMR › Error Recovery › should recover from errors in the render function

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:454:9)

● basic HMR › Error Recovery › should recover after exporting an invalid page

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:509:9)

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  599 |         await next.patchFile(aboutPage, aboutContent)
  600 |
> 601 |         if (browser) {
      |                       ^
  602 |           await check(
  603 |             () => getBrowserBodyText(browser),
  604 |             /This is the about page/

  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:601:23)

ijjk · 2021-10-25T20:50:51Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
buildDuration	17.3s	17.4s	⚠️ +78ms
buildDurationCached	3.6s	3.5s	-91ms
nodeModulesSize	475 MB	475 MB	⚠️ +3.27 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.89	2.91	⚠️ +0.02
/ avg req/sec	865.05	859	⚠️ -6.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.377	1.38	0
/error-in-render avg req/sec	1815.19	1812	⚠️ -3.19

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.7 kB	27.7 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.5 kB	71.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	⚠️ +3 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	⚠️ +3 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
index.html gzip	534 B	534 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-c60c37af3228a150.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-62a3db573e84bff3.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -172,6 +172,8 @@
         return target;
       }
       var loadedImageURLs = new Set();
+      var allImgs = new Map();
+      var perfObserver;
       var emptyDataURL =
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
@@ -490,15 +492,15 @@
         if (false) {
           var rand, VALID_BLUR_EXT;
         }
-        var ref = _slicedToArray(
+        var ref2 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
             2
           ),
-          setRef = ref[0],
-          isIntersected = ref[1];
+          setRef = ref2[0],
+          isIntersected = ref2[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -619,6 +621,9 @@
           });
         }
         var srcString = src;
+        if (false) {
+          var fullUrl;
+        }
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
buildDuration	14.5s	14.5s	⚠️ +5ms
buildDurationCached	3.5s	3.6s	⚠️ +96ms
nodeModulesSize	475 MB	475 MB	⚠️ +3.27 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.957	2.945	-0.01
/ avg req/sec	845.35	848.76	+3.41
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.366	1.346	-0.02
/error-in-render avg req/sec	1829.98	1857.06	+27.08

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.8 kB	27.8 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	621 B	621 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	⚠️ +5 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.9 kB	1.9 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	⚠️ +5 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js automatically-detect-lcp-image-and-warn	Change
index.html gzip	534 B	534 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-c60c37af3228a150.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-62a3db573e84bff3.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -172,6 +172,8 @@
         return target;
       }
       var loadedImageURLs = new Set();
+      var allImgs = new Map();
+      var perfObserver;
       var emptyDataURL =
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
@@ -490,15 +492,15 @@
         if (false) {
           var rand, VALID_BLUR_EXT;
         }
-        var ref = _slicedToArray(
+        var ref2 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
             2
           ),
-          setRef = ref[0],
-          isIntersected = ref[1];
+          setRef = ref2[0],
+          isIntersected = ref2[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -619,6 +621,9 @@
           });
         }
         var srcString = src;
+        if (false) {
+          var fullUrl;
+        }
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {

Commit: d32c0be

Add warning when LCP image is missing priority prop

aa083de

ijjk added created-by: Next.js team PRs by the Next.js team type: documentation type: next labels Oct 24, 2021

styfle mentioned this pull request Oct 24, 2021

Add "priority" section to Image Optimization doc #30218

Merged

1 task

This comment has been minimized.

Sign in to view

styfle added 2 commits October 23, 2021 22:36

Add test

615ebca

Ignore blur placeholders

3e2032e

styfle marked this pull request as ready for review October 24, 2021 02:40

styfle requested review from huozhi, ijjk, leerob, lfades, molebox, padmaia, shuding and timneutkens as code owners October 24, 2021 02:40

This comment has been minimized.

Sign in to view

Improve warning detection

4ab8411

This comment has been minimized.

Sign in to view

molebox approved these changes Oct 25, 2021

View reviewed changes

timneutkens reviewed Oct 25, 2021

View reviewed changes

packages/next/client/image.tsx Show resolved Hide resolved

timneutkens approved these changes Oct 25, 2021

View reviewed changes

styfle and others added 2 commits October 25, 2021 16:26

Merge branch 'canary' into automatically-detect-lcp-image-and-warn

21c87f9

Merge branch 'canary' into automatically-detect-lcp-image-and-warn

d32c0be

kara approved these changes Oct 25, 2021

View reviewed changes

Merge branch 'canary' into automatically-detect-lcp-image-and-warn

8ba6627

ijjk approved these changes Oct 25, 2021

View reviewed changes

styfle merged commit 4782cac into canary Oct 25, 2021

styfle deleted the automatically-detect-lcp-image-and-warn branch October 25, 2021 21:59

styfle added the hacktoberfest-accepted label Oct 31, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add warning when LCP image is missing `priority` prop #30221

Add warning when LCP image is missing `priority` prop #30221

styfle commented Oct 24, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

molebox left a comment

kara left a comment

ijjk commented Oct 25, 2021

ijjk commented Oct 25, 2021

Diffs

Diffs

Add warning when LCP image is missing priority prop #30221

Add warning when LCP image is missing priority prop #30221

Conversation

styfle commented Oct 24, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

molebox left a comment

Choose a reason for hiding this comment

kara left a comment

Choose a reason for hiding this comment

ijjk commented Oct 25, 2021

Failing test suites

ijjk commented Oct 25, 2021

Stats from current PR

Diffs

Diffs

Add warning when LCP image is missing `priority` prop #30221

Add warning when LCP image is missing `priority` prop #30221

styfle commented Oct 24, 2021 •

edited