[Not for merge] Perf investigation

[gaearon]

I spent a bit of time in DevTools to see why switching pages is so slow. Commented out the biggest offenders:

• Sandboxes mount synchronously on route load
  • This runs a bunch of CodeMirror calculations which seem to be slow
  • Not sure what our strategy should even be here, but there's clearly a lot that could be optimized
• Don't forget code blocks are also full-blown code viewers
  • This doesn't make sense to process at runtime. We should really do this AOT somehow. Though we should also see if there's something in particular making CodeMirror slow or creating issues here.
• The polyfill we're using for scrollIntoView for nav items does a bunch of DOM reads that cause style recalc
• We also do a bit of DOM reading for TOC, could probably cache something

There are also other things we can investigate later, like

• [a11y] Route Announcements vercel/next.js#20428 (comment) is forcing layout
• We can use memo in a few places
• Can we make Next.js route changes use startTransition?

This PR is just as a reference for future changes.

[github-actions]

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	91.19 KB (🟡 +16 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Eighty-five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	198.59 KB (🟢 -4.56 KB)	289.77 KB
/404	197.69 KB (🟢 -4.56 KB)	288.87 KB
/blog	36.66 KB (🟢 -1.25 KB)	127.85 KB
/blog/2013/06/02/jsfiddle-integration	209.28 KB (🟢 -4.56 KB)	300.47 KB
/blog/2013/06/05/why-react	211.01 KB (🟢 -4.56 KB)	302.2 KB
/blog/2013/06/12/community-roundup	210.71 KB (🟢 -4.56 KB)	301.9 KB
/blog/2013/06/19/community-roundup-2	211.38 KB (🟢 -4.56 KB)	302.57 KB
/blog/2013/06/21/react-v0-3-3	209.43 KB (🟢 -4.56 KB)	300.62 KB
/blog/2013/06/27/community-roundup-3	211.75 KB (🟢 -4.56 KB)	302.93 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	210.04 KB (🟢 -4.56 KB)	301.23 KB
/blog/2013/07/03/community-roundup-4	211.12 KB (🟢 -4.56 KB)	302.31 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	209.91 KB (🟢 -4.57 KB)	301.1 KB
/blog/2013/07/17/react-v0-4-0	210.63 KB (🟢 -4.56 KB)	301.81 KB
/blog/2013/07/23/community-roundup-5	211.51 KB (🟢 -4.56 KB)	302.7 KB
/blog/2013/07/26/react-v0-4-1	209.39 KB (🟢 -4.56 KB)	300.58 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	210 KB (🟢 -4.56 KB)	301.18 KB
/blog/2013/08/05/community-roundup-6	210.8 KB (🟢 -4.56 KB)	301.99 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	210.01 KB (🟢 -4.56 KB)	301.19 KB
/blog/2013/08/26/community-roundup-7	210.97 KB (🟢 -4.56 KB)	302.16 KB
/blog/2013/09/24/community-roundup-8	212.41 KB (🟢 -4.56 KB)	303.59 KB
/blog/2013/10/03/community-roundup-9	211.34 KB (🟢 -4.56 KB)	302.53 KB
/blog/2013/10/16/react-v0.5.0	211.02 KB (🟢 -4.56 KB)	302.21 KB
/blog/2013/10/29/react-v0-5-1	209.38 KB (🟢 -4.56 KB)	300.57 KB
/blog/2013/11/06/community-roundup-10	213 KB (🟢 -4.56 KB)	304.19 KB
/blog/2013/11/18/community-roundup-11	212.08 KB (🟢 -4.56 KB)	303.27 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	209.85 KB (🟢 -4.56 KB)	301.04 KB
/blog/2013/12/19/react-v0.8.0	210.27 KB (🟢 -4.56 KB)	301.46 KB
/blog/2013/12/23/community-roundup-12	211.73 KB (🟢 -4.56 KB)	302.92 KB
/blog/2013/12/30/community-roundup-13	211.52 KB (🟢 -4.56 KB)	302.71 KB
/blog/2014/01/02/react-chrome-developer-tools	209.77 KB (🟢 -4.56 KB)	300.96 KB
/blog/2014/01/06/community-roundup-14	211.11 KB (🟢 -4.56 KB)	302.3 KB
/blog/2014/02/05/community-roundup-15	212.33 KB (🟢 -4.56 KB)	303.51 KB
/blog/2014/02/15/community-roundup-16	212.04 KB (🟢 -4.56 KB)	303.23 KB
/blog/2014/02/16/react-v0.9-rc1	212.45 KB (🟢 -4.56 KB)	303.63 KB
/blog/2014/02/20/react-v0.9	212.89 KB (🟢 -4.56 KB)	304.08 KB
/blog/2014/02/24/community-roundup-17	211.76 KB (🟢 -4.56 KB)	302.94 KB
/blog/2014/03/14/community-roundup-18	212.72 KB (🟢 -4.56 KB)	303.91 KB
/blog/2014/03/19/react-v0.10-rc1	211.03 KB (🟢 -4.56 KB)	302.22 KB
/blog/2014/03/21/react-v0.10	211.05 KB (🟢 -4.56 KB)	302.24 KB
/blog/2014/03/28/the-road-to-1.0	211.16 KB (🟢 -4.56 KB)	302.35 KB
/blog/2014/04/04/reactnet	209.81 KB (🟢 -4.56 KB)	301 KB
/blog/2014/05/06/flux	209.93 KB (🟢 -4.56 KB)	301.12 KB
/blog/2014/05/29/one-year-of-open-source-react	210.15 KB (🟢 -4.56 KB)	301.34 KB
/blog/2014/06/27/community-roundup-19	211.7 KB (🟢 -4.56 KB)	302.89 KB
/blog/2014/07/13/react-v0.11-rc1	212.08 KB (🟢 -4.56 KB)	303.27 KB
/blog/2014/07/17/react-v0.11	213.34 KB (🟢 -4.56 KB)	304.53 KB
/blog/2014/07/25/react-v0.11.1	210.29 KB (🟢 -4.56 KB)	301.48 KB
/blog/2014/07/28/community-roundup-20	211.84 KB (🟢 -4.56 KB)	303.03 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	211.48 KB (🟢 -4.56 KB)	302.66 KB
/blog/2014/08/03/community-roundup-21	211.51 KB (🟢 -4.56 KB)	302.7 KB
/blog/2014/09/03/introducing-the-jsx-specification	209.51 KB (🟢 -4.56 KB)	300.7 KB
/blog/2014/09/12/community-round-up-22	211.99 KB (🟢 -4.56 KB)	303.18 KB
/blog/2014/09/16/react-v0.11.2	210.28 KB (🟢 -4.56 KB)	301.47 KB
/blog/2014/09/24/testing-flux-applications	213.47 KB (🟢 -4.56 KB)	304.65 KB
/blog/2014/10/14/introducing-react-elements	212.42 KB (🟢 -4.56 KB)	303.61 KB
/blog/2014/10/16/react-v0.12-rc1	212.39 KB (🟢 -4.56 KB)	303.58 KB
/blog/2014/10/17/community-roundup-23	212.96 KB (🟢 -4.56 KB)	304.15 KB
/blog/2014/10/27/react-js-conf	209.56 KB (🟢 -4.56 KB)	300.75 KB
/blog/2014/10/28/react-v0.12	212.33 KB (🟢 -4.56 KB)	303.51 KB
/blog/2014/11/24/react-js-conf-updates	209.94 KB (🟢 -4.56 KB)	301.13 KB
/blog/2014/11/25/community-roundup-24	213.19 KB (🟢 -4.56 KB)	304.38 KB
/blog/2014/12/18/react-v0.12.2	209.97 KB (🟢 -4.56 KB)	301.16 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	210.37 KB (🟢 -4.56 KB)	301.55 KB
/blog/2015/01/27/react-v0.13.0-beta-1	211.34 KB (🟢 -4.56 KB)	302.53 KB
/blog/2015/02/18/react-conf-roundup-2015	213.32 KB (🟢 -4.56 KB)	304.51 KB
/blog/2015/02/20/introducing-relay-and-graphql	212.47 KB (🟢 -4.56 KB)	303.66 KB
/blog/2015/02/24/react-v0.13-rc1	211.38 KB (🟢 -4.56 KB)	302.57 KB
/blog/2015/02/24/streamlining-react-elements	213.93 KB (🟢 -4.56 KB)	305.12 KB
/blog/2015/03/03/react-v0.13-rc2	210.71 KB (🟢 -4.56 KB)	301.9 KB
/blog/2015/03/04/community-roundup-25	211.67 KB (🟢 -4.56 KB)	302.86 KB
/blog/2015/03/10/react-v0.13	211.99 KB (🟢 -4.56 KB)	303.18 KB
/blog/2015/03/16/react-v0.13.1	209.81 KB (🟢 -4.56 KB)	301 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	212.57 KB (🟢 -4.56 KB)	303.75 KB
/blog/2015/03/26/introducing-react-native	209.7 KB (🟢 -4.56 KB)	300.89 KB
/blog/2015/03/30/community-roundup-26	211.64 KB (🟢 -4.56 KB)	302.83 KB
/blog/2015/04/17/react-native-v0.4	210.55 KB (🟢 -4.56 KB)	301.74 KB
/blog/2015/04/18/react-v0.13.2	209.89 KB (🟢 -4.56 KB)	301.08 KB
/blog/2015/05/01/graphql-introduction	214.38 KB (🟢 -4.56 KB)	305.56 KB
/blog/2015/05/08/react-v0.13.3	209.77 KB (🟢 -4.56 KB)	300.96 KB
/blog/2015/05/22/react-native-release-process	209.93 KB (🟢 -4.56 KB)	301.11 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	210.38 KB (🟢 -4.56 KB)	301.57 KB
/blog/2015/07/03/react-v0.14-beta-1	211.89 KB (🟢 -4.56 KB)	303.08 KB
/blog/2015/08/03/new-react-devtools-beta	210.49 KB (🟢 -4.56 KB)	301.68 KB
/blog/2015/08/11/relay-technical-preview	210.55 KB (🟢 -4.56 KB)	301.74 KB
/blog/2015/08/13/reacteurope-roundup	212.14 KB (🟢 -4.56 KB)	303.33 KB
/blog/2015/09/02/new-react-developer-tools	209.91 KB (🟢 -4.56 KB)	301.09 KB
/blog/2015/09/10/react-v0.14-rc1	215.6 KB (🟢 -4.56 KB)	306.78 KB
/blog/2015/09/14/community-roundup-27	212.07 KB (🟢 -4.56 KB)	303.25 KB
/blog/2015/10/01/react-render-and-top-level-api	211.04 KB (🟢 -4.56 KB)	302.23 KB
/blog/2015/10/07/react-v0.14	216.08 KB (🟢 -4.56 KB)	307.27 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	211.79 KB (🟢 -4.56 KB)	302.98 KB
/blog/2015/10/28/react-v0.14.1	209.8 KB (🟢 -4.56 KB)	300.99 KB
/blog/2015/11/02/react-v0.14.2	209.83 KB (🟢 -4.56 KB)	301.02 KB
/blog/2015/11/18/react-v0.14.3	209.95 KB (🟢 -4.56 KB)	301.14 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	210.82 KB (🟢 -4.56 KB)	302.01 KB
/blog/2015/12/16/ismounted-antipattern	210.42 KB (🟢 -4.56 KB)	301.61 KB
/blog/2015/12/18/react-components-elements-and-instances	214.35 KB (🟢 -4.56 KB)	305.54 KB
/blog/2015/12/29/react-v0.14.4	209.62 KB (🟢 -4.56 KB)	300.81 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	210.64 KB (🟢 -4.56 KB)	301.83 KB
/blog/2016/01/12/discontinuing-ie8-support	209.45 KB (🟢 -4.56 KB)	300.63 KB
/blog/2016/02/19/new-versioning-scheme	210.83 KB (🟢 -4.56 KB)	302.01 KB
/blog/2016/03/07/react-v15-rc1	213.58 KB (🟢 -4.56 KB)	304.77 KB
/blog/2016/03/16/react-v15-rc2	210.44 KB (🟢 -4.56 KB)	301.63 KB
/blog/2016/03/29/react-v0.14.8	209.57 KB (🟢 -4.56 KB)	300.76 KB
/blog/2016/04/07/react-v15	217.78 KB (🟢 -4.56 KB)	308.97 KB
/blog/2016/04/08/react-v15.0.1	210.33 KB (🟢 -4.56 KB)	301.52 KB
/blog/2016/07/11/introducing-reacts-error-code-system	210.04 KB (🟢 -4.56 KB)	301.23 KB
/blog/2016/07/13/mixins-considered-harmful	218.2 KB (🟢 -4.56 KB)	309.39 KB
/blog/2016/07/22/create-apps-with-no-configuration	213.53 KB (🟢 -4.56 KB)	304.72 KB
/blog/2016/08/05/relay-state-of-the-state	213.57 KB (🟢 -4.56 KB)	304.76 KB
/blog/2016/09/28/our-first-50000-stars	215.02 KB (🟢 -4.56 KB)	306.21 KB
/blog/2016/11/16/react-v15.4.0	212.97 KB (🟢 -4.56 KB)	304.16 KB
/blog/2017/04/07/react-v15.5.0	213.53 KB (🟢 -4.56 KB)	304.72 KB
/blog/2017/05/18/whats-new-in-create-react-app	212.94 KB (🟢 -4.56 KB)	304.13 KB
/blog/2017/06/13/react-v15.6.0	211.55 KB (🟢 -4.56 KB)	302.74 KB
/blog/2017/07/26/error-handling-in-react-16	211.9 KB (🟢 -4.56 KB)	303.09 KB
/blog/2017/09/08/dom-attributes-in-react-16	212.33 KB (🟢 -4.56 KB)	303.52 KB
/blog/2017/09/25/react-v15.6.2	210.67 KB (🟢 -4.56 KB)	301.85 KB
/blog/2017/09/26/react-v16.0	215.79 KB (🟢 -4.56 KB)	306.98 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	213.71 KB (🟢 -4.56 KB)	304.9 KB
/blog/2017/12/07/introducing-the-react-rfc-process	210.25 KB (🟢 -4.56 KB)	301.43 KB
/blog/2017/12/15/improving-the-repository-infrastructure	226.04 KB (🟢 -4.56 KB)	317.23 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	210.2 KB (🟢 -4.56 KB)	301.39 KB
/blog/2018/03/27/update-on-async-rendering	215.45 KB (🟢 -4.56 KB)	306.63 KB
/blog/2018/03/29/react-v-16-3	212.27 KB (🟢 -4.56 KB)	303.45 KB
/blog/2018/05/23/react-v-16-4	212.41 KB (🟢 -4.56 KB)	303.59 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	216.07 KB (🟢 -4.56 KB)	307.26 KB
/blog/2018/08/01/react-v-16-4-2	211.06 KB (🟢 -4.56 KB)	302.25 KB
/blog/2018/09/10/introducing-the-react-profiler	212.67 KB (🟢 -4.56 KB)	303.86 KB
/blog/2018/10/01/create-react-app-v2	213.14 KB (🟢 -4.56 KB)	304.33 KB
/blog/2018/10/23/react-v-16-6	212.34 KB (🟢 -4.56 KB)	303.53 KB
/blog/2018/11/13/react-conf-recap	210.05 KB (🟢 -4.56 KB)	301.24 KB
/blog/2018/11/27/react-16-roadmap	216.25 KB (🟢 -4.56 KB)	307.44 KB
/blog/2018/12/19/react-v-16-7	211.18 KB (🟢 -4.56 KB)	302.37 KB
/blog/2019/02/06/react-v16.8.0	213.44 KB (🟢 -4.56 KB)	304.63 KB
/blog/2019/02/23/is-react-translated-yet	213.01 KB (🟢 -4.56 KB)	304.2 KB
/blog/2019/08/08/react-v16.9.0	215.94 KB (🟢 -4.56 KB)	307.13 KB
/blog/2019/08/15/new-react-devtools	210.55 KB (🟢 -4.56 KB)	301.73 KB
/blog/2019/10/22/react-release-channels	212.36 KB (🟢 -4.56 KB)	303.54 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	217.06 KB (🟢 -4.56 KB)	308.24 KB
/blog/2020/02/26/react-v16.13.0	213.29 KB (🟢 -4.56 KB)	304.48 KB
/blog/2020/08/10/react-v17-rc	219.57 KB (🟢 -4.56 KB)	310.76 KB
/blog/all	52.77 KB (🟢 -1.25 KB)	143.96 KB
/community	198.28 KB (🟢 -4.56 KB)	289.47 KB
/community/acknowledgements	199.47 KB (🟢 -4.56 KB)	290.66 KB
/community/meet-the-team	200 KB (🟢 -4.56 KB)	291.18 KB
/learn	206.98 KB (🟢 -4.56 KB)	298.17 KB
/learn/add-react-to-a-website	203.1 KB (🟢 -4.56 KB)	294.29 KB
/learn/adding-interactivity	204.9 KB (🟢 -4.56 KB)	296.09 KB
/learn/choosing-the-state-structure	210.64 KB (🟢 -4.56 KB)	301.83 KB
/learn/conditional-rendering	202.87 KB (🟢 -4.56 KB)	294.06 KB
/learn/describing-the-ui	202.08 KB (🟢 -4.56 KB)	293.27 KB
/learn/editor-setup	199.36 KB (🟢 -4.56 KB)	290.55 KB
/learn/escape-hatches	197.6 KB (🟢 -4.56 KB)	288.79 KB
/learn/extracting-state-logic-into-a-reducer	208.24 KB (🟢 -4.56 KB)	299.43 KB
/learn/importing-and-exporting-components	201.27 KB (🟢 -4.56 KB)	292.46 KB
/learn/installation	198.92 KB (🟢 -4.56 KB)	290.11 KB
/learn/javascript-in-jsx-with-curly-braces	201.35 KB (🟢 -4.56 KB)	292.54 KB
/learn/keeping-components-pure	205.48 KB (🟢 -4.56 KB)	296.67 KB
/learn/managing-state	204.2 KB (🟢 -4.56 KB)	295.39 KB
/learn/manipulating-the-dom-with-refs	206.11 KB (🟢 -4.56 KB)	297.3 KB
/learn/passing-data-deeply-with-context	205.63 KB (🟢 -4.56 KB)	296.82 KB
/learn/passing-props-to-a-component	205.05 KB (🟢 -4.56 KB)	296.24 KB
/learn/preserving-and-resetting-state	207.87 KB (🟢 -4.56 KB)	299.05 KB
/learn/queueing-a-series-of-state-updates	202.84 KB (🟢 -4.56 KB)	294.03 KB
/learn/react-developer-tools	198.8 KB (🟢 -4.56 KB)	289.99 KB
/learn/reacting-to-input-with-state	207.31 KB (🟢 -4.56 KB)	298.5 KB
/learn/referencing-values-with-refs	204.36 KB (🟢 -4.56 KB)	295.55 KB
/learn/render-and-commit	201.33 KB (🟢 -4.56 KB)	292.52 KB
/learn/rendering-lists	205.4 KB (🟢 -4.56 KB)	296.59 KB
/learn/responding-to-events	204.4 KB (🟢 -4.56 KB)	295.59 KB
/learn/scaling-up-with-reducer-and-context	202.42 KB (🟢 -4.56 KB)	293.61 KB
/learn/sharing-state-between-components	203.13 KB (🟢 -4.56 KB)	294.32 KB
/learn/start-a-new-react-project	199.77 KB (🟢 -4.56 KB)	290.96 KB
/learn/state-a-components-memory	208.57 KB (🟢 -4.56 KB)	299.76 KB
/learn/state-as-a-snapshot	202.39 KB (🟢 -4.56 KB)	293.58 KB
/learn/thinking-in-react	204.28 KB (🟢 -4.56 KB)	295.47 KB
/learn/updating-arrays-in-state	206.47 KB (🟢 -4.56 KB)	297.66 KB
/learn/updating-objects-in-state	206.18 KB (🟢 -4.56 KB)	297.36 KB
/learn/writing-markup-with-jsx	201.27 KB (🟢 -4.56 KB)	292.46 KB
/learn/your-first-component	202.17 KB (🟢 -4.56 KB)	293.36 KB
/reference	198.24 KB (🟢 -4.56 KB)	289.43 KB
/reference/reactdom	198.38 KB (🟢 -4.56 KB)	289.57 KB
/reference/render	199.72 KB (🟢 -4.56 KB)	290.91 KB
/reference/usestate	206.21 KB (🟢 -4.56 KB)	297.39 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.