asset preload

dbushell · Dec 6, 2024 · e6ff3ab · e6ff3ab
1 parent 44df1b6
commit e6ff3ab
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 15 deletions.
diff --git a/components/my-bio.html b/components/my-bio.html
@@ -1,7 +1,7 @@
 <div class="Bio">
   <picture>
     <source srcset="/assets/images/avatar.avif" type="image/avif" />
-    <img alt="Avatar of David Bushell" loading="lazy" src="/assets/images/avatar.png" />
+    <img alt="Avatar of David Bushell" loading="lazy" width="80" height="80" src="/assets/images/avatar.png" />
   </picture>
   <p>I design, build, and consult upon all things web. Based in the UK and coding worldwide. <a href="/contact/">Hire me!</a></p>
 </div>
diff --git a/components/my-layout.html b/components/my-layout.html
@@ -4,9 +4,12 @@
 <meta charset="utf-8">
 <meta name="robots" content="noai, noimageai">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="preload" as="font" crossorigin="anonymous" href="/assets/fonts/komika-title.woff2?v={{deployHash}}" type="font/woff2">
-<link rel="preload" as="font" crossorigin="anonymous" href="/assets/fonts/raleway-variable.woff2?v={{deployHash}}" type="font/woff2">
-<link rel="preload" as="font" crossorigin="anonymous" href="/assets/fonts/comic-neue-bold-italic.woff2?v={{deployHash}}" type="font/woff2">
+<link rel="preconnect" crossorigin href="https://dbushell.com">
+<link rel="preload" as="font" crossorigin type="font/woff2" href="/assets/fonts/komika-title.woff2?v={{deployHash}}">
+<link rel="preload" as="font" crossorigin type="font/woff2" href="/assets/fonts/raleway-variable.woff2?v={{deployHash}}">
+<link rel="preload" as="font" crossorigin type="font/woff2" href="/assets/fonts/comic-neue-bold-italic.woff2?v={{deployHash}}">
+<link rel="preload" as="image" fetchpriority="high" type="image/svg+xml" href="/assets/images/dbushell-for-hire.svg?v={{deployHash}}">
+<link rel="preload" as="image" fetchpriority="high" type="image/svg+xml" href="/assets/images/dbushell-logotype.svg?v={{deployHash}}">
 <link rel="manifest" href="/manifest.webmanifest?v={{deployHash}}">
 <link rel="apple-touch-icon" href="/assets/icons/180x180.png?v={{deployHash}}">
 <link rel="icon" sizes="32x32" href="/favicon.ico?v={{deployHash}}">

diff --git a/components/my-logo.html b/components/my-logo.html
@@ -1,4 +1,9 @@
 <a href="/" class="Logo">
   <span class="Hidden">Homepage</span>
-  <img alt="David Bushell" src="/assets/images/dbushell-logotype.svg?v={{deployHash}}" />
+  <img
+    alt="David Bushell"
+    loading="eager"
+    fetchpriority="high"
+    src="/assets/images/dbushell-logotype.svg?v={{deployHash}}"
+    />
 </a>
diff --git a/components/my-masthead.html b/components/my-masthead.html
@@ -6,8 +6,9 @@
       alt="Get in Touch I’m Available for Hire"
       width="540"
       height="325"
-      loading="lazy"
-      src="/assets/images/dbushell-for-hire.svg"
-    />
+      loading="eager"
+      fetchpriority="high"
+      src="/assets/images/dbushell-for-hire.svg?v={{deployHash}}"
+      />
   </a>
 </div>
diff --git a/public/sw.js b/public/sw.js
@@ -4,6 +4,7 @@ const PRECACHE = [
   "/assets/fonts/komika-title.woff2?v=%DEPLOY_HASH%",
   "/assets/fonts/raleway-variable.woff2?v=%DEPLOY_HASH%",
   "/assets/fonts/comic-neue-bold-italic.woff2?v=%DEPLOY_HASH%",
+  "/assets/images/dbushell-for-hire.svg?v=%DEPLOY_HASH%",
   "/assets/images/dbushell-logotype.svg?v=%DEPLOY_HASH%",
   "/assets/scripts/head.js?v=%DEPLOY_HASH%",
   "/assets/scripts/contact.js?v=%DEPLOY_HASH%",

diff --git a/routes/index.html b/routes/index.html
@@ -32,21 +32,19 @@ <h2 class="Cursive">
       </h2>
       <div class="Prose">
         <p class="Large Balance">
-          I design and build websites with a focus on <em>standards</em>, <em>performance</em>,
-          <em>accessibility</em>, and <em>security</em>. With over 15 years of professional
-          experience I've coded progressive web apps, content managed templates, full-stack
-          frameworks; everything web.
+          I design and build websites with a focus on standards, performance, accessibility, and security.
+          With over 15 years of professional experience I've coded progressive web apps, content managed templates, full-stack frameworks; everything web.
         </p>
         <div class="Crane">
           <picture>
             <source srcset="/assets/images/origami-crane.avif" type="image/avif" />
             <img
               alt="my mascot; green folded origami crane"
-              src="/assets/images/origami-crane.png"
               width="500"
               height="520"
-              loading="lazy"
-            />
+              loading="eager"
+              src="/assets/images/origami-crane.png"
+              />
           </picture>
           <div>
             <ul class="List List--large">