makefaster-dev
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "description": "Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && node scripts/compress-build.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/public/fonts/roboto-latin.woff2 b/public/fonts/roboto-latin.woff2
diff --git a/public/index.html b/public/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-78128848-1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
 
@@ -11,6 +10,15 @@
 
       gtag('js', new Date());
       gtag('config', 'UA-78128848-1');
+
+      // Load analytics after the page has loaded so it does not compete with
+      // render-critical resources for bandwidth.
+      window.addEventListener('load', function () {
+        var script = document.createElement('script');
+        script.async = true;
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-78128848-1';
+        document.head.appendChild(script);
+      });
     </script>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -22,12 +30,62 @@
     <meta property="og:site_name" content="Algorithm Visualizer" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" type="image/png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <style>
+      /* Self-hosted font: avoids two render-blocking cross-origin connections
+         (stylesheet + font host). One variable-width file covers both weights. */
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 400;
+        font-stretch: 100%;
+        src: url(%PUBLIC_URL%/fonts/roboto-latin.woff2) format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 700;
+        font-stretch: 100%;
+        src: url(%PUBLIC_URL%/fonts/roboto-latin.woff2) format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+    </style>
     <title>$TITLE</title>
+    <style>
+      /* Static boot shell: paints the app frame and the home introduction from
+         HTML+CSS so first paint does not wait for the bundle to mount. It is
+         replaced when React renders into #root. */
+      #av-shell { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: #393939; color: #bbbbbb; font-family: 'Roboto', sans-serif; font-size: 12px; overflow: hidden; }
+      #av-shell .shell-header-row { height: 32px; flex: none; border-bottom: 1px solid #505050; display: flex; align-items: center; padding: 0 16px; }
+      #av-shell .shell-title { font-size: 14px; font-weight: bold; }
+      #av-shell .shell-workspace { flex: 1; display: flex; min-height: 0; }
+      #av-shell .shell-nav { flex: 1; border-right: 1px solid #505050; }
+      #av-shell .shell-viewer { flex: 2; background: #242424; overflow: hidden; }
+      #av-shell .shell-viewer-content { padding: 24px; font-size: 14px; }
+      #av-shell .shell-viewer-content h1 { font-size: 2em; margin: 0.67em 0; font-weight: bold; }
+      #av-shell .shell-viewer-content h2 { font-size: 1.5em; margin: 0.83em 0; font-weight: bold; }
+      #av-shell .shell-editor { flex: 2; background: #2d2d2d; border-left: 1px solid #505050; }
+    </style>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
+<div id="root"><div id="av-shell">
+  <div class="shell-header-row"><span class="shell-title">Algorithm Visualizer</span></div>
+  <div class="shell-header-row"></div>
+  <div class="shell-workspace">
+    <div class="shell-nav"></div>
+    <div class="shell-viewer"><div class="shell-viewer-content">
+      <h1>Algorithm Visualizer</h1>
+      <h2>Introduction</h2>
+      <p>Welcome to Algorithm Visualizer, an interactive online platform designed to bring algorithms to life through visualization. Whether you're a student, teacher, or professional, our platform provides an engaging way to explore and understand various algorithms.</p>
+    </div></div>
+    <div class="shell-editor"></div>
+  </div>
+</div></div>
+<script>
+  // The static shell mirrors the home route; hide it when booting a deep link.
+  if (window.location.pathname !== '/') document.getElementById('av-shell').style.display = 'none';
+</script>
 <script>
   window.__PRELOADED_ALGORITHM__ = $ALGORITHM;
 </script>

diff --git a/scripts/compress-build.js b/scripts/compress-build.js
@@ -0,0 +1,37 @@
+/**
+ * Pre-generate gzip and brotli siblings for the text assets in build/ so a
+ * static host can serve compressed responses without re-encoding on the fly
+ * (e.g. nginx `gzip_static`/`brotli_static`, or `http-server -g --brotli`).
+ */
+const fs = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+
+const BUILD_DIR = path.resolve(__dirname, '..', 'build');
+const EXTENSIONS = new Set(['.js', '.css', '.html', '.json', '.svg', '.txt', '.ico']);
+const MIN_SIZE = 1024;
+
+function* walk(dir) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) yield* walk(full);
+    else yield full;
+  }
+}
+
+let count = 0;
+for (const file of walk(BUILD_DIR)) {
+  const ext = path.extname(file);
+  if (!EXTENSIONS.has(ext) || file.endsWith('.map')) continue;
+  const source = fs.readFileSync(file);
+  if (source.length < MIN_SIZE) continue;
+  fs.writeFileSync(file + '.gz', zlib.gzipSync(source, { level: zlib.constants.Z_BEST_COMPRESSION }));
+  fs.writeFileSync(file + '.br', zlib.brotliCompressSync(source, {
+    params: {
+      [zlib.constants.BROTLI_PARAM_QUALITY]: zlib.constants.BROTLI_MAX_QUALITY,
+      [zlib.constants.BROTLI_PARAM_SIZE_HINT]: source.length,
+    },
+  }));
+  count += 1;
+}
+console.log(`compress-build: wrote gzip+brotli siblings for ${count} files`);
diff --git a/src/components/CodeEditor/index.js b/src/components/CodeEditor/index.js
@@ -5,9 +5,12 @@ import { classes, extension } from 'common/util';
 import { actions } from 'reducers';
 import { connect } from 'react-redux';
 import { languages } from 'common/config';
-import { Button, Ellipsis, FoldableAceEditor } from 'components';
+import { Button, Ellipsis } from 'components';
 import styles from './CodeEditor.module.scss';
 
+// Loaded lazily so the editor (and its syntax modes) stays off the first-load bundle.
+const FoldableAceEditor = React.lazy(() => import('components/FoldableAceEditor'));
+
 class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -16,7 +19,7 @@ class CodeEditor extends React.Component {
   }
 
   handleResize() {
-    this.aceEditorRef.current.resize();
+    if (this.aceEditorRef.current) this.aceEditorRef.current.resize();
   }
 
   render() {
@@ -36,7 +39,8 @@ class CodeEditor extends React.Component {
 
     return (
       <div className={classes(styles.code_editor, className)}>
-        <FoldableAceEditor
+        <React.Suspense fallback={<div className={styles.ace_editor}/>}>
+          <FoldableAceEditor
           className={styles.ace_editor}
           ref={this.aceEditorRef}
           mode={mode}
@@ -55,6 +59,7 @@ class CodeEditor extends React.Component {
             _key: lineIndicator.cursor,
           }] : []}
           value={editingFile.content}/>
+        </React.Suspense>
         <div className={classes(styles.contributors_viewer, className)}>
           <span className={classes(styles.contributor, styles.label)}>Contributed by</span>
           {

diff --git a/src/components/index.js b/src/components/index.js
@@ -5,7 +5,6 @@ export { default as CodeEditor } from './CodeEditor';
 export { default as Divider } from './Divider';
 export { default as Ellipsis } from './Ellipsis';
 export { default as ExpandableListItem } from './ExpandableListItem';
-export { default as FoldableAceEditor } from './FoldableAceEditor';
 export { default as Header } from './Header';
 export { default as ListItem } from './ListItem';
 export { default as Navigator } from './Navigator';

diff --git a/src/core/renderers/ChartRenderer/index.js b/src/core/renderers/ChartRenderer/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import { Bar } from 'react-chartjs-2';
 import { Array1DRenderer } from 'core/renderers';
 import styles from './ChartRenderer.module.scss';
 
+// Loaded lazily so the charting library stays off the first-load bundle: it is
+// only fetched when a chart visualization actually renders.
+const Bar = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Bar })));
+
 class ChartRenderer extends Array1DRenderer {
   renderData() {
     const { data: [row] } = this.props.data;
@@ -15,7 +18,8 @@ class ChartRenderer extends Array1DRenderer {
       }],
     };
     return (
-      <Bar data={chartData} options={{
+      <React.Suspense fallback={null}>
+        <Bar data={chartData} options={{
         scales: {
           yAxes: [{
             ticks: {
@@ -28,6 +32,7 @@ class ChartRenderer extends Array1DRenderer {
         responsive: true,
         maintainAspectRatio: false
       }} />
+      </React.Suspense>
     );
   }
 }

diff --git a/src/core/renderers/ScatterRenderer/index.js b/src/core/renderers/ScatterRenderer/index.js
@@ -1,7 +1,10 @@
 import React from 'react'
-import {Scatter} from 'react-chartjs-2'
 import Array2DRenderer from '../Array2DRenderer'
 
+// Loaded lazily so the charting library stays off the first-load bundle: it is
+// only fetched when a scatter visualization actually renders.
+const Scatter = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Scatter })))
+
 const convertToObjectArray = ([x, y]) => ({ x, y })
 const colors = ['white', 'green', 'blue', 'red', 'yellow', 'cyan']
 
@@ -21,7 +24,7 @@ class ScatterRenderer extends Array2DRenderer {
       datasets,
     }
 
-    return <Scatter data={chartData} options={{
+    return <React.Suspense fallback={null}><Scatter data={chartData} options={{
       legend: false,
       animation: false,
       layout: {
@@ -46,7 +49,7 @@ class ScatterRenderer extends Array2DRenderer {
             },
           }],
       },
-    }}/>
+    }}/></React.Suspense>
   }
 }