chore: Improve home performance #45

igorbrasileiro · 2022-05-18T19:52:22Z

What's the purpose of this pull request?

The main goal of this PR is to decrease the Total Blocking Time (TBT), and improve the LH score metric.

How does it work?

This PR decreases the highest portion of the TBT from the first render, which is related to execution and compiling code from SWR, ButtonSignIn, two ProductShelf, and ProductTiles. To tackle this problem these components that use the SWR, now pass the suspense property to SWR. By doing this these components are suspended and rendered into a new task, decreasing the time from the first render task, consequently decreasing the TBT. You can see this at the flamegraph below

Also, this PR creates a new task for the SWR fetcher function to decrease the possibility to create long tasks. This change impacts all pages.

Take a look at the results below:

Before - https://sfj-d8224eb--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1157.39	4749.32	[-542.13, 2856.92]
Largest Contentful Paint (LCP)	2067.96	217834.57	[-75883.14, 80019.06]
Time to Interactive (TTI)	2961.19	15004.17	[-2407.99, 8330.36]
Total Blocking Time (TBT)	506.91	15683.75	[-5105.44, 6119.27]
Performance score	0.853	0.002182	[0.852552, 0.854114]
JavaScript Execution Time	1380.73	34724.50	[-11045.27, 13806.73]
Speed Index	1388.05	34829.27	[-11075.44, 13851.55]

After - https://sfj-da42147--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1055.43	0.07	[1055.41, 1055.46]
Largest Contentful Paint (LCP)	1687.31	126758.50	[-43672.63, 47047.26]
Time to Interactive (TTI)	2680.05	3588.11	[1396.06, 3964.04]
Total Blocking Time (TBT)	313.16	520.99	[126.72, 499.59]
Performance score	0.925	0.000125	[0.924955, 0.925045]
JavaScript Execution Time	1153.76	2166.92	[378.34, 1929.18]
Speed Index	1408.14	124234.62	[-43048.64, 45864.93]

⚠️ As you can see the TBT mean is lower, the score is higher, and almost all metrics are more consistent with lower standard deviation.

How to test it?

References

https://nextjs.org/docs/advanced-features/dynamic-import
https://loadable-components.com/docs/loadable-vs-react-lazy/

Checklist

You may erase this after checking them all ;)

Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#4)
PR description
Updated the Storybook - if applicable.
Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.
For documentation changes, ping @carolinamenezes or @Mariana-Caetano to review and update the changes.

vercel · 2022-05-18T19:52:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nextjs-store-storybook	✅ Ready (Inspect)	Visit Preview	May 20, 2022 at 8:20PM (UTC)

vtex-sites · 2022-05-18T19:52:53Z

Preview is ready

This pull request generated a Preview

👀 Preview: https://preview-45--nextjs.preview.vtex.app
🔬 Go deeper by inspecting the Build Logs
📝 based on commit eeec626

vtex-sites · 2022-05-18T20:11:07Z

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit eeec626

Lighthouse Report by page
📎 /
📎 /apple-magic-mouse-99988212/p
📎 /office

filipewl

The new stats look promising!

Any ideas on the PDP error logged to the console?

src/components/common/Navbar/Navbar.tsx

igorbrasileiro · 2022-05-19T13:22:21Z

Any ideas on the PDP error logged to the console?

@filipewl No errors at PDP, take a look there again.

Also the last performance tests

before - https://sfj-7de89f9--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1172.48	4136.73	[-307.83, 2652.79]
Largest Contentful Paint (LCP)	2040.58	180579.87	[-62579.10, 66660.25]
Time to Interactive (TTI)	2986.40	87343.01	[-28268.90, 34241.69]
Total Blocking Time (TBT)	495.72	16094.74	[-5263.71, 6255.15]
Performance score	0.860	0.002497	[0.858773, 0.860560]
JavaScript Execution Time	1449.04	87764.31	[-29957.02, 32855.09]
Speed Index	1225.23	12201.72	[-3141.09, 5591.56]

after - https://sfj-37f848c--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1141.47	5581.80	[-855.95, 3138.89]
Largest Contentful Paint (LCP)	2410.86	39693.26	[-11793.19, 16614.91]
Time to Interactive (TTI)	2782.45	1902.71	[2101.58, 3463.33]
Total Blocking Time (TBT)	348.95	5304.13	[-1549.11, 2247.01]
Performance score	0.896	0.000664	[0.895762, 0.896238]
JavaScript Execution Time	1210.94	6667.69	[-1175.07, 3596.94]
Speed Index	1252.19	2693.74	[288.25, 2216.13]

filipewl

LGTM!

icazevedo

LGTM. Can you explain how this differs from your previous PR?

igorbrasileiro · 2022-05-20T11:38:28Z

LGTM. Can you explain how this differs from your previous PR?

Which one? I opened many. But know I'm using the next/dynamic, which seems to work well with the SSR.

igorbrasileiro · 2022-05-20T12:40:05Z

src/sdk/product/useProductsQuery.ts

+    {
+      ...options,
+      fallbackData:
+        options?.suspense && !options.fallbackData


the explanation why suspense + ssr need fallback data.
https://github.com/vercel/swr/blob/main/core/use-swr.ts#L567-L580

igorbrasileiro · 2022-05-20T12:40:14Z

src/sdk/person/usePersonQuery.ts

-    { ...options, fetchOptions: { ...options?.fetchOptions, method: 'POST' } }
+    {
+      ...options,
+      fallbackData:


the explanation why suspense + ssr need fallback data.
https://github.com/vercel/swr/blob/main/core/use-swr.ts#L567-L580

igorbrasileiro · 2022-05-20T12:50:12Z

Before - https://sfj-d8224eb--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1157.39	4749.32	[-542.13, 2856.92]
Largest Contentful Paint (LCP)	2067.96	217834.57	[-75883.14, 80019.06]
Time to Interactive (TTI)	2961.19	15004.17	[-2407.99, 8330.36]
Total Blocking Time (TBT)	506.91	15683.75	[-5105.44, 6119.27]
Performance score	0.853	0.002182	[0.852552, 0.854114]
JavaScript Execution Time	1380.73	34724.50	[-11045.27, 13806.73]
Speed Index	1388.05	34829.27	[-11075.44, 13851.55]

After - https://sfj-da42147--nextjs.preview.vtex.app/

Metric	Mean	Standard deviation	Confidence Interval (95%)
Cumulative Layout shift (CLS)	0.00	0.00	[0.00, 0.00]
First Contentful Paint (FCP)	1055.43	0.07	[1055.41, 1055.46]
Largest Contentful Paint (LCP)	1687.31	126758.50	[-43672.63, 47047.26]
Time to Interactive (TTI)	2680.05	3588.11	[1396.06, 3964.04]
Total Blocking Time (TBT)	313.16	520.99	[126.72, 499.59]
Performance score	0.925	0.000125	[0.924955, 0.925045]
JavaScript Execution Time	1153.76	2166.92	[378.34, 1929.18]
Speed Index	1408.14	124234.62	[-43048.64, 45864.93]

eduardoformiga · 2022-05-20T15:58:56Z

src/components/ui/Button/ButtonSignIn.tsx

@@ -3,7 +3,7 @@ import usePersonQuery from 'src/sdk/person/usePersonQuery'
 import { ButtonLink } from 'src/components/ui/Button'

 const ButtonSignIn = () => {
-  const person = usePersonQuery()
+  const person = usePersonQuery({ suspense: true })


afterward, we can think about bringing the information of the logged user from the server-side (if the user is logged or not), and so maybe we don't need the additional request on the ButtonSignIn nor the Skeleton/Loading state since we will have this information on the first render already, like doing the request on the getServerSideProps. What do you think?

Yeah, but by doing this we couldn't leverage from use the same page for all users, because now they vary based on logged users

src/pages/index.tsx

This reverts commit 46ab248166ac331325622d4b2fed1b4952d0f2c0.

igorbrasileiro requested a review from a team May 18, 2022 19:52

igorbrasileiro self-assigned this May 18, 2022

igorbrasileiro force-pushed the chore/home-perf branch from 551fccf to ff88122 Compare May 18, 2022 19:58

vercel bot temporarily deployed to preview May 18, 2022 19:59 Inactive

igorbrasileiro force-pushed the chore/home-perf branch from ff88122 to 37f848c Compare May 18, 2022 20:25

vercel bot temporarily deployed to preview May 18, 2022 20:26 Inactive

filipewl reviewed May 18, 2022

View reviewed changes

src/components/common/Navbar/Navbar.tsx Outdated Show resolved Hide resolved

igorbrasileiro force-pushed the chore/home-perf branch from 2dd778c to 6948521 Compare May 19, 2022 12:48

vercel bot temporarily deployed to preview May 19, 2022 12:52 Inactive

igorbrasileiro force-pushed the chore/home-perf branch from 6948521 to 37f848c Compare May 19, 2022 13:12

igorbrasileiro marked this pull request as ready for review May 19, 2022 13:20

igorbrasileiro requested a review from filipewl May 19, 2022 13:40

filipewl approved these changes May 19, 2022

View reviewed changes

igorbrasileiro force-pushed the chore/home-perf branch from 37f848c to 98a8897 Compare May 19, 2022 16:38

vercel bot temporarily deployed to preview May 19, 2022 16:39 Inactive

icazevedo approved these changes May 19, 2022

View reviewed changes

vercel bot temporarily deployed to preview May 20, 2022 11:36 Inactive

igorbrasileiro force-pushed the chore/home-perf branch from f7acaa3 to ed80f12 Compare May 20, 2022 11:44

vercel bot temporarily deployed to preview May 20, 2022 11:45 Inactive

vercel bot temporarily deployed to preview May 20, 2022 12:35 Inactive

igorbrasileiro commented May 20, 2022

View reviewed changes

igorbrasileiro added the Features New feature or request label May 20, 2022

igorbrasileiro added the Performance label May 20, 2022

eduardoformiga reviewed May 20, 2022

View reviewed changes

vercel bot temporarily deployed to preview May 20, 2022 16:02 Inactive

vercel bot temporarily deployed to preview May 20, 2022 16:04 Inactive

vercel bot temporarily deployed to preview May 20, 2022 16:09 Inactive

vercel bot temporarily deployed to preview May 20, 2022 16:33 Inactive

filipewl approved these changes May 20, 2022

View reviewed changes

src/pages/index.tsx Show resolved Hide resolved

igorbrasileiro added 19 commits May 20, 2022 17:19

Break fetcher execution into new tasks

d58894b

Lazy load ProductShelf

bbabf3a

Bump packages

9267585

Lazy load ButtonSignIn component

cccbc9c

Fix next/dynamic usage

0e30544

Fix ProductTilesSkeleton

4ce0b46

Fix ButtonSignIn suspense at Navbar

209e9f0

Remove ProductShelf and ProductTiles skeleton title prop

2d15cb6

Remove startTransition for setSession at the usePersonQuery

54e4d66

Drop dynamic ProductShelf and ProductTiles

013ae25

Add changelog entry

96060d7

Use dynamic to prevent load product shelf and tiles at home page

6eadfe6

Update changelog

8b5b715

Drop dynamic in favor of suspend queries

ed52f04

Prevent load unnecessary LinksList for mobiles

0a3f527

Fix changelog

d744b43

Add the suspense for the tiles at home page

261d01d

Revert "Prevent load unnecessary LinksList for mobiles"

84e7a9b

This reverts commit 46ab248166ac331325622d4b2fed1b4952d0f2c0.

Fix ProductShelfSkeleton

5694718

igorbrasileiro force-pushed the chore/home-perf branch from d611e1a to 5694718 Compare May 20, 2022 20:19

vercel bot temporarily deployed to preview May 20, 2022 20:20 Inactive

igorbrasileiro merged commit eeec626 into main May 20, 2022

igorbrasileiro deleted the chore/home-perf branch May 20, 2022 20:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Improve home performance #45

chore: Improve home performance #45

igorbrasileiro commented May 18, 2022 •

edited

Loading

vercel bot commented May 18, 2022 •

edited

Loading

vtex-sites bot commented May 18, 2022 •

edited

Loading

vtex-sites bot commented May 18, 2022 •

edited

Loading

filipewl left a comment

igorbrasileiro commented May 19, 2022

filipewl left a comment

icazevedo left a comment

igorbrasileiro commented May 20, 2022 •

edited

Loading

igorbrasileiro May 20, 2022

igorbrasileiro May 20, 2022 •

edited

Loading

igorbrasileiro commented May 20, 2022

eduardoformiga May 20, 2022 •

edited

Loading

igorbrasileiro May 20, 2022

chore: Improve home performance #45

chore: Improve home performance #45

Conversation

igorbrasileiro commented May 18, 2022 • edited Loading

What's the purpose of this pull request?

How does it work?

How to test it?

References

Checklist

vercel bot commented May 18, 2022 • edited Loading

vtex-sites bot commented May 18, 2022 • edited Loading

Preview is ready

This pull request generated a Preview

vtex-sites bot commented May 18, 2022 • edited Loading

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

filipewl left a comment

Choose a reason for hiding this comment

igorbrasileiro commented May 19, 2022

filipewl left a comment

Choose a reason for hiding this comment

icazevedo left a comment

Choose a reason for hiding this comment

igorbrasileiro commented May 20, 2022 • edited Loading

igorbrasileiro May 20, 2022

Choose a reason for hiding this comment

igorbrasileiro May 20, 2022 • edited Loading

Choose a reason for hiding this comment

igorbrasileiro commented May 20, 2022

eduardoformiga May 20, 2022 • edited Loading

Choose a reason for hiding this comment

igorbrasileiro May 20, 2022

Choose a reason for hiding this comment

igorbrasileiro commented May 18, 2022 •

edited

Loading

vercel bot commented May 18, 2022 •

edited

Loading

vtex-sites bot commented May 18, 2022 •

edited

Loading

vtex-sites bot commented May 18, 2022 •

edited

Loading

igorbrasileiro commented May 20, 2022 •

edited

Loading

igorbrasileiro May 20, 2022 •

edited

Loading

eduardoformiga May 20, 2022 •

edited

Loading