perf: prioritize the main bundle over <link rel=preload>s

app/client/craco.build.config.js

@@ -116,6 +116,37 @@ module.exports = merge(common, {
         },
       },
     },
+    // Emit the main `script` without a `defer` attribute. This increases its priority
+    // from Low to High (doc: https://addyosmani.com/blog/script-priorities/) and prevents it
+    // from competing with `<link rel="preload"`>s in `index.html`, which are also Low.
+    {
+      plugin: {
+        overrideWebpackConfig: ({ webpackConfig }) => {
+          const htmlWebpackPlugin = webpackConfig.plugins.find(
+            (plugin) => plugin.constructor.name === "HtmlWebpackPlugin",
+          );
+
+          // CRA must include HtmlWebpackPlugin: https://github.com/facebook/create-react-app/blob/d960b9e38c062584ff6cfb1a70e1512509a966e7/packages/react-scripts/config/webpack.config.js#L608-L632
+          // If it doesn’t, perhaps the version of CRA has changed, or plugin names got mangled?
+          assert(
+            htmlWebpackPlugin,
+            "Cannot find HtmlWebpackPlugin in webpack config",
+          );
+
+          // HtmlWebpackPlugin must have the userOptions field: https://github.com/jantimon/html-webpack-plugin/blob/d5ce5a8f2d12a2450a65ec51c285dd54e36cd921/index.js#L34.
+          // If it doesn’t, perhaps the version of HtmlWebpackPlugin has changed?
+          assert(
+            htmlWebpackPlugin.userOptions,
+            "htmlWebpackPlugin.userOptions must be defined",
+          );
+
+          htmlWebpackPlugin.userOptions.inject = "head";
+          htmlWebpackPlugin.userOptions.scriptLoading = "blocking";
+
+          return webpackConfig;
+        },
+      },
+    },
     // Emit dedicated HTML files for edit and view modes. This is done as an optimization (to preload
     // route-specific chunks on the most critical routes) and doesn’t affect the actual app behavior.
     {

app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx

@@ -36,10 +36,6 @@ export type TooltipProps = CommonComponentProps & {
   styles?: any;
 };
 
-const rootElementId = "tooltip-root";
-
-let portalContainer = document.getElementById(rootElementId);
-
 const TooltipWrapper = styled(Tooltip)<
   PropsWithChildren<{
     width?: string;
@@ -65,11 +61,18 @@ const TooltipWrapper = styled(Tooltip)<
   }
 `;
 
-if (!portalContainer) {
-  const tooltipPortalElement = document.createElement("div");
-  tooltipPortalElement.id = rootElementId;
-  document.body.append(tooltipPortalElement);
-  portalContainer = document.getElementById(rootElementId);
+function getPortalContainer() {
+  const rootElementId = "tooltip-root";
+  let portalContainer = document.getElementById(rootElementId);
+
+  if (!portalContainer) {
+    const tooltipPortalElement = document.createElement("div");
+    tooltipPortalElement.id = rootElementId;
+    document.body.append(tooltipPortalElement);
+    portalContainer = tooltipPortalElement;
+  }
+
+  return portalContainer;
 }
 
 function TooltipComponent(props: TooltipProps) {
@@ -97,7 +100,7 @@ function TooltipComponent(props: TooltipProps) {
       popoverClassName={`${GLOBAL_STYLE_TOOLTIP_CLASSNAME} ${
         props.popoverClassName ?? ""
       }`}
-      portalContainer={portalContainer as HTMLDivElement}
+      portalContainer={getPortalContainer()}
       position={props.position}
       transitionDuration={props.transitionDuration || 0}
       underline={props.underline}

app/client/public/index.html

@@ -34,7 +34,8 @@
       }
 
       return chunksToPreload.flatMap(i => [...i.files])
-        .map(url => `<link rel="preload" as="${getPreloadValueForFile(url)}" href="${webpackConfig.output.publicPath + url}" />`)
+        // `fetchpriority="low"` ensures preloads don’t compete for bandwidth with the main script: https://3perf.slack.com/archives/C01SGCF8PM0/p1684511126862229?thread_ts=1684466888.430869&cid=C01SGCF8PM0
+        .map(url => `<link rel="preload" fetchpriority="low" as="${getPreloadValueForFile(url)}" href="${webpackConfig.output.publicPath + url}" />`)
         .join('\n')
 
       function getPreloadValueForFile(fileName) {

app/client/src/index.tsx

@@ -22,10 +22,6 @@ import AppErrorBoundary from "./AppErrorBoundry";
 const shouldAutoFreeze = process.env.NODE_ENV === "development";
 setAutoFreeze(shouldAutoFreeze);
 
-runSagaMiddleware();
-
-appInitializer();
-
 function App() {
   return (
     <Sentry.ErrorBoundary fallback={"An error has occured"}>
@@ -59,7 +55,23 @@ const mapStateToProps = (state: AppState) => ({
 
 const ThemedAppWithProps = connect(mapStateToProps)(ThemedApp);
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const initAndRenderApp = () => {
+  runSagaMiddleware();
+
+  appInitializer();
+
+  ReactDOM.render(<App />, document.getElementById("root"));
+};
+
+// Some code of the app depends on the whole DOM being ready
+if (
+  document.readyState === "interactive" ||
+  document.readyState === "complete"
+) {
+  initAndRenderApp();
+} else {
+  document.addEventListener("DOMContentLoaded", initAndRenderApp);
+}
 
 // expose store when run in Cypress
 if ((window as any).Cypress) {