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.

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

Add warning when LCP image is missing priority prop #30221

Merged
merged 7 commits into from Oct 25, 2021

Conversation

styfle
Copy link
Member

@styfle styfle commented Oct 24, 2021

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

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@styfle styfle marked this pull request as ready for review Oct 24, 2021
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

Copy link
Contributor

@molebox molebox left a comment

very-good

kara
kara approved these changes Oct 25, 2021
Copy link
Collaborator

@kara kara left a comment

LGTM

@ijjk
Copy link
Member

@ijjk ijjk commented Oct 25, 2021

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
Copy link
Member

@ijjk ijjk commented Oct 25, 2021

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

ijjk
ijjk approved these changes Oct 25, 2021
@styfle styfle merged commit 4782cac into canary Oct 25, 2021
30 of 33 checks passed
@styfle styfle deleted the automatically-detect-lcp-image-and-warn branch Oct 25, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants