perf: reduce fetch priority for theme js

bardenHa · Oct 13, 2023 · 686040c · 686040c
1 parent 7983da1
commit 686040c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/lib/layouts/full.astro b/src/lib/layouts/full.astro
@@ -11,7 +11,7 @@ import { constants } from '@/config';
         <a href="/" title="Home">
           <Image src="/h_avatar.svg" alt="Harry Barden's avatar" class="h-12 w-12" />
         </a>
-        <ColorModeSwitcher id="theme-toggle-mobile" class="sm:hidden" client:only />
+        <ColorModeSwitcher id="theme-toggle-mobile" class="sm:hidden" client:idle client:only="solid-js" />
       </div>
       <div class="flex items-center gap-6 sm:justify-center">
         <ul class="flex items-center gap-4">
@@ -25,7 +25,7 @@ import { constants } from '@/config';
             ))
           }
         </ul>
-        <ColorModeSwitcher id="theme-toggle" class="hidden sm:block" client:only />
+        <ColorModeSwitcher id="theme-toggle" class="hidden sm:block" client:idle client:only="solid-js" />
       </div>
     </nav>
   </header>

diff --git a/src/lib/layouts/page.astro b/src/lib/layouts/page.astro
@@ -54,9 +54,19 @@ const title = formatTitle({ title: props.title, name: profile.name, reverse: !!p
     <meta name="twitter:image:alt" content={title} />
     <meta name="view-transition" content="same-origin" />
     {props.date ? <meta property="article:published_time" content={new Date(props.date).toISOString()} /> : null}
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#00a300" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="canonical" href={constants.site + Astro.url.pathname} />
+    <title>{title}</title>
+    <!-- Load Google fonts asynchronously -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <!-- Load Google fonts asynchronously -->
     <link
       rel="preload"
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500;600;700;800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
@@ -71,16 +81,6 @@ const title = formatTitle({ title: props.title, name: profile.name, reverse: !!p
         href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500;600;700;800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
       /></noscript
     >
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#00a300" />
-    <meta name="theme-color" content="#ffffff" />
-    <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="canonical" href={constants.site + Astro.url.pathname} />
-    <title>{title}</title>
   </head>
   <body class="overflow-x-hidden overflow-y-scroll bg-content-neutral-primary">
     <a href="#main-content" class="skip-link"> Skip to content</a>