further optimisations: optimise riki sitting, and put non-critical stylesheets at the end

template/_doc.hbs

@@ -13,13 +13,14 @@
     {{~> components/_doc.hbs }}
     {{~> components/_pink_space.hbs }}
 
-    <th-overlays></th-overlays>
     <th-command-line></th-command-line>
 
     {{#each page.styles}}
     <link rel="stylesheet" href="{{ asset (cat 'css/' this) }}">
     {{/each}}
 
+    {{!-- Non-blocking section --}}
+    {{> components/_nonblocking.hbs }}
     <script type="module">
         {{!-- Go through the import map for each script. --}}
         {{#each page.scripts}}

template/_tree.hbs

@@ -36,8 +36,10 @@
     {{~> components/_tree.hbs }}
     {{~> components/_pink_space.hbs }}
 
-    <th-overlays></th-overlays>
     <th-command-line></th-command-line>
+
+    {{!-- Non-blocking section --}}
+    {{> components/_nonblocking.hbs }}
 </body>
 
 </html>

template/components/_head.hbs

@@ -4,10 +4,8 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<!-- -->
 <link rel="preload" href="{{ asset 'font/recursive-title.woff2' }}" as="font" type="font/woff2" crossorigin fetchpriority="high">
 <link rel="preload" href="{{ asset 'font/recursive-crit.woff2' }}" as="font" type="font/woff2" crossorigin>
-<!-- -->
 
 <style>
     @font-face {
@@ -45,8 +43,6 @@
 </style>
 <style>{{{ include_static 'css/base.css' }}}</style>
 <style>{{{ include_static 'css/critical.css' }}}</style>
-<link rel="stylesheet" href="{{ asset 'css/noncritical.css' }}">
-<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
 
 {{!--
 Import maps currently don't support the src="" attribute. Unless we come up with something
@@ -54,14 +50,6 @@ clever to do while browser vendors figure that out, we'll just have to do a cach
 --}}
 <script type="importmap">{{{ import_map }}}</script>
 
-{{#if dev}}
-<script type="module">
-    import "treehouse/dev/live-reload.js";
-    import "treehouse/dev/picture-upload.js";
-</script>
-<link rel="stylesheet" href="{{ asset 'css/dev.css' }}">
-{{/if}}
-
 <script>
     const TREEHOUSE_DEV = {{ dev }};
     const TREEHOUSE_SITE = `{{ config.site }}`;
@@ -74,9 +62,6 @@ clever to do while browser vendors figure that out, we'll just have to do a cach
         haku: `{{{ asset 'syntax/haku.json' }}}`,
     };
 </script>
-<script type="module" async>
-    import "treehouse/command-line.js";
-</script>
 
 <meta property="og:site_name" content="{{ config.user.title }}">
 <meta property="og:title" content="{{ page.title }}">

template/components/_nonblocking.hbs

@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="{{ asset 'css/noncritical.css' }}">
+<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
+
+{{#if dev}}
+<script type="module">
+    import "treehouse/dev/live-reload.js";
+    import "treehouse/dev/picture-upload.js";
+</script>
+<link rel="stylesheet" href="{{ asset 'css/dev.css' }}">
+{{/if}}
+
+<script type="module" async>
+    import "treehouse/command-line.js";
+</script>

template/components/_sidebar.hbs

@@ -2,7 +2,14 @@
     <aside class="sidebar">
         <a href="/">
             <header class="floof">
-                <img alt="riki sitting in pink space" src="{{ asset 'character/riki/sitting.png' }}" width="2223" height="1796" style="height: 40.39586145rem;">
+                <picture>
+                    <source srcset="{{ asset 'character/riki/sitting.webp' }}" type="image/webp">
+                    <img
+                        alt="riki sitting in pink space"
+                        src="{{ asset 'character/riki/sitting.png' }}"
+                        width="2223" height="1796"
+                        style="height: 40.39586145rem;">
+                </picture>
                 <h1>
                     <span class="rikis">riki's</span>
                     <span class="fluffy-little-house">