Startup optimizations (#226)

* Startup optimisations

* I hate this file

* Inline main script

* Reverting change to do a fairer perf comparison

* Inlining again. Weeeeee!

* Lockfile

global.d.ts

@@ -1,4 +1,5 @@
 declare const __webpack_public_path__: string;
+declare const PRERENDER: boolean;
 
 declare interface NodeModule {
   hot: any;
@@ -11,6 +12,9 @@ declare interface Window {
 declare namespace JSX {
   interface Element { }
   interface IntrinsicElements { }
+  interface HTMLAttributes {
+    decoding?: string;
+  }
 }
 
 declare module 'classnames' {

package.json

@@ -34,6 +34,7 @@
     "clean-webpack-plugin": "^0.1.19",
     "comlink": "^3.0.3",
     "copy-webpack-plugin": "^4.5.3",
+    "critters-webpack-plugin": "^2.0.1",
     "css-loader": "^0.28.11",
     "exports-loader": "^0.7.0",
     "file-drop-element": "0.0.7",
@@ -44,12 +45,13 @@
     "if-env": "^1.0.4",
     "linkstate": "^1.1.1",
     "loader-utils": "^1.1.0",
-    "mini-css-extract-plugin": "^0.3.0",
-    "node-sass": "^4.9.4",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
     "pointer-tracker": "^2.0.3",
     "minimatch": "^3.0.4",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.4",
+    "optimize-css-assets-webpack-plugin": "^4.0.3",
     "preact": "^8.3.1",
+    "prerender-loader": "^1.2.0",
     "pretty-bytes": "^5.1.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",

src/components/intro/index.tsx

@@ -90,7 +90,7 @@ export default class Intro extends Component<Props, State> {
         <div>
           <div class={style.logoSizer}>
             <div class={style.logoContainer}>
-              <img src={logo} class={style.logo} alt="Squoosh" />
+              <img src={logo} class={style.logo} alt="Squoosh" decoding="async" />
             </div>
           </div>
           <p class={style.openImageGuide}>
@@ -111,7 +111,7 @@ export default class Intro extends Component<Props, State> {
                   <div class={style.demo}>
                     <div class={style.demoImgContainer}>
                       <div class={style.demoImgAspect}>
-                        <img class={style.demoIcon} src={demo.iconUrl} alt=""/>
+                        <img class={style.demoIcon} src={demo.iconUrl} alt="" decoding="async" />
                         {fetchingDemoIndex === i &&
                           <div class={style.demoLoading}>
                             <loading-spinner class={style.demoLoadingSpinner}/>

src/components/intro/style.scss

@@ -2,6 +2,7 @@
   font-family: 'intro-text';
   font-style: normal;
   font-weight: 300;
+  font-display: block;
   // This only contains the chars for "Drag & drop or"
   src: url('data:font/woff2;base64,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') format('woff2');
 }
@@ -10,6 +11,7 @@
   font-family: 'intro-text';
   font-style: normal;
   font-weight: 500;
+  font-display: block;
   // Only contains the chars for "select an image"
   src: url('data:font/woff2;base64,d09GMgABAAAAAAXMAA4AAAAACwQAAAV5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbg1IcMAZgAGwRCAqJUId/CxoAATYCJAMwBCAFgnAHIBskCcjEh6dNff8Ou/9Tj9VZGnUhJeqFzWGiVVOkxkTthr9f6kWkRdsBbkIj3YuLaloFZWr7aBg22z7IOoWqBWCW5cZU3GBrh0n+dAcBYAUlzYHAzWTYchqKXEyAT0zOLIS1qqm+B8q2ur4OhEMy0PHHUH8KklaSr8T0mp/EU7kRvXlI1E09HXA1qLN8Djxa0AsSDOg3cJARb9mtQJoSK3gvEn372/gcAigg/gOnbsT/MYv491GTReW4rJC5LA+h5FFclF6QQgoZ5Kx7GbsuGeytUgFClkOomY2Gdake3m9HegkHieAx/a0hBTALsy4jvpxBcnFXUnjC+2ZS5zHnDeEaJVwi+ZWqzOm4Uvgy4k6kGv4kFDVkfjk1gkVRRkk2zlo42PBbRJmG30cClJQjak7BnfQqHza4ITKftQZ/ZMUaEiyy1+mYCh4clKhDA5rQglZ0oG9jw+qiNvT+SfxIXCeuFdeIq8VV4gpxyRaGOl0JiChiCocfc7e93DwZIPvWgPiZJLcJugxyjW7UQyl4TJk6dWqYU7Cn0WQiWnNJCdGeprqjW63fpVS3mKy4YGZ6I3ya4nbIVgM1mwkpNEBzixlNxfPmH7owvdE4973OM9quvk11dwvnzDUy/Zn5S5Ywpn/PeqXBQI2m4lna05CRtsI6+GIENjS9K4jWRHUGYA2ozdZm2Smmf0DI3aqpeNbsJfxe7YdFmcZAn5gXLCFa2/Umqiu017APFhMZ0rfQp4sJX0ZrJ+n9UtAljr5VYWb6oj1MrpvX3qe6u8WRJg0bj7aPkDOa7m+E0Oa9Y8eY/gbRbr+efH7hcO49bMd28fbDVHcUmm3XkozQGKjeBHSJ4TQnI879LIFmF2v/BJuEQlffJPfE9oKayS/PsPE44fvM4MsBESxbuEEV39d5pw6oW4vD6S1WQC3UpSbHNbK0Jikl0bphSs+0CGW8Ew4Kzw7zarmcVz873JHTFhKYay18R8vY0ozPiHPAGyROAqlW5fLj5+HbWBn9TpgekKsOy8N+4dlFfL9i/Nk3+gY1bwzZUAvLVNiFpvqHRenetSoVrgn2obGtPsltEVxEeHJAQFhyBIcHT9rDvTJm06e0TLgase2gd2RffGJNg0o1zrdRyi9s1bYE5bi85cK+o/nUwvBR5+jweEBaSMoCub29fEFISmib9Dn5yl5kVFpoGrPQSmZhafQ7WimttNCH7Cktohb6kFpoEfIsdDF7SgvZTbaY3mKFyLXQh+wpzWE3mUNQQkWnR+lgiW9Afkunej49Nz3sYlI8XFTRdkNhUR5d6h4oOpJc8OjcItMXVqoHW2fSW6ycWuiM8NDYoICouLAZ9BYrwwmhycvKlt4Q8hUlCV5nZ7vOm2ut2rizcFpuWpSrT3K1Z3xinbuHnXBTyGAljV/XzHZaNGu6y7vLDziMpIyUdOBBRXXlxznUQiOoheZsZk9njG8er1mNmz2eOCQ3x9BbLP+Zxt+VrbEz9aWxmimRvyl4/sumyoM/nw+LNzV4/uP0/9T/P5f08cvhl38USAS/xTYs2fL/VNFF0vd+SVsRB/khPwW4SCi5SHhx8fDgVPAiAqIJRQL/EuK5bsRzNnAiezD1i7u2VyHHAKRU+E2YUaA5DUsE2ZfbApAmsJcxjBwmQ2Xk4Y2BqZJ+oxSzsNEogz1O3/xkBMKEBHSiC8PoQStaoEIflPCHL/wQBCUKoUITlMhHP+olt5ojykUPOrEQTWgY+f449KMPKnSiB72jGrLQhEZO24925LtbkG5DndTkD2/4um+NQBEyUIJsRBxX24tcDGmbWtGJjq05jhzTaMgCcR+6EA4f+KAXDay5u6RsL7xJsm3w3mzvFvggB8nI/AYBdVnxNvx/2wA=') format('woff2');
 }
@@ -49,7 +51,7 @@
 }
 
 .open-image-guide {
-  font: 300 11vw intro-text;
+  font: 300 11vw intro-text, sans-serif;
   margin-bottom: 0;
 
   @media (min-width: 460px) {

src/index.html

@@ -7,11 +7,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#673ab8">
     <link rel="shortcut icon" href="/assets/favicon.ico">
+    <meta name="theme-color" content="#f78f21">
     <link rel="manifest" href="/manifest.json">
   </head>
   <body>
-    <div id="app"></div>
   </body>
 </html>

src/init-app.tsx

@@ -4,10 +4,11 @@ import './style';
 import App from './components/App';
 
 // Find the outermost Element in our server-rendered HTML structure.
-let root = document.querySelector('#app') || undefined;
+let root = document.getElementById('app_root') as Element;
 
 // "attach" the client-side rendering to it, updating the DOM in-place instead of replacing:
 root = render(<App />, document.body, root);
+root.setAttribute('id', 'app_root');
 
 if (process.env.NODE_ENV !== 'production') {
   // Enable support for React DevTools and some helpful console warnings:

src/manifest.json

@@ -5,7 +5,7 @@
   "display": "standalone",
   "orientation": "portrait",
   "background_color": "#fff",
-  "theme_color": "#673ab8",
+  "theme_color": "#f78f21",
   "icons": [
     {
       "src": "/assets/icon-large.png",

webpack.config.js

@@ -14,6 +14,7 @@ const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const WorkerPlugin = require('worker-plugin');
 const AutoSWPlugin = require('./config/auto-sw-plugin');
+const CrittersPlugin = require('critters-webpack-plugin');
 
 function readJson (filename) {
   return JSON.parse(fs.readFileSync(filename));
@@ -229,7 +230,7 @@ module.exports = function (_, env) {
       // For now we're not doing SSR.
       new HtmlPlugin({
         filename: path.join(__dirname, 'build/index.html'),
-        template: 'src/index.html',
+        template: '!!prerender-loader?string!src/index.html',
         minify: isProd && {
           collapseWhitespace: true,
           removeScriptTypeAttributes: true,
@@ -238,14 +239,14 @@ module.exports = function (_, env) {
           removeComments: true
         },
         manifest: readJson('./src/manifest.json'),
-        inject: true,
+        inject: 'body',
         compile: true
       }),
 
       new AutoSWPlugin({}),
 
       new ScriptExtHtmlPlugin({
-        defaultAttribute: 'async'
+        inline: ['first']
       }),
 
       // Inline constants during build, so they can be folded by UglifyJS.
@@ -277,6 +278,22 @@ module.exports = function (_, env) {
         analyzerMode: 'static',
         defaultSizes: 'gzip',
         openAnalyzer: false
+      }),
+
+      // Inline Critical CSS (for the intro screen, essentially)
+      isProd && new CrittersPlugin({
+        // use <link rel="stylesheet" media="not x" onload="this.media='all'"> hack to load async css:
+        preload: 'media',
+        // inline all styles from any stylesheet below this size:
+        inlineThreshold: 2000,
+        // don't bother lazy-loading non-critical stylesheets below this size, just inline the non-critical styles too:
+        minimumExternalSize: 4000,
+        // don't emit <noscript> external stylesheet links since the app fundamentally requires JS anyway:
+        noscriptFallback: false,
+        // inline the tiny data URL fonts we have for the intro screen:
+        inlineFonts: true,
+        // (and don't lazy load them):
+        preloadFonts: false
       })
     ].filter(Boolean), // Filter out any falsey plugin array entries.