Merge pull request #5 from briankintz/asset-loading-optimizations

Optimize resource loading order and timing
briankintz · Jul 6, 2023 · 6c0c675 · 6c0c675
2 parents ba5ff0c + cabdc0f
commit 6c0c675
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 48 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -25,8 +25,8 @@
       manifest-src 'self'; \
       img-src 'self' data:; \
       font-src 'self' https://use.typekit.net; \
-      style-src 'self' 'unsafe-inline' https://use.typekit.net https://p.typekit.net; \
-      script-src 'self' 'unsafe-inline' https://kit.fontawesome.com https://netlify-cdp-loader.netlify.app; \
+      style-src 'self' 'unsafe-inline' https://use.typekit.net https://p.typekit.net https://unpkg.com; \
+      script-src 'self' 'unsafe-inline' https://kit.fontawesome.com https://netlify-cdp-loader.netlify.app https://unpkg.com; \
       connect-src 'self' https://ka-p.fontawesome.com; \
       frame-src 'self' https://app.netlify.com; \
     """
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,10 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "aos": "^2.3.4",
     "astro": "^2.7.4"
   },
   "devDependencies": {
-    "@types/node": "^20.3.3"
+    "@types/node": "^20.4.0"
   }
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -20,21 +20,46 @@ import Play from '../components/Play.astro'
       name="description"
       content="DevOps engineer and cloud architect with experience designing and building scalable cloud-native applications and systems."
     />
-    <meta name="generator" content={Astro.generator} />
     <title>Brian Kintz</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
+
+    <link rel="preconnect" href="https://p.typekit.net" />
+    <link rel="preconnect" href="https://use.typekit.net" crossorigin />
+    <link rel="preconnect" href="https://ka-p.fontawesome.com" crossorigin />
+
+    <link
+      rel="preload"
+      href="https://use.typekit.net/ulq6snh.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://use.typekit.net/ulq6snh.css"
+      /></noscript
+    >
+
+    <link
+      rel="preload"
+      href="https://unpkg.com/aos@next/dist/aos.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://unpkg.com/aos@next/dist/aos.css"
+      /></noscript
+    >
+
     <script
+      defer
       src="https://kit.fontawesome.com/34d36e55e2.js"
-      crossorigin="anonymous" defer></script>
-    <script>
-      import AOS from 'aos'
-      AOS.init({
-        once: true,
-      })
-    </script>
+      crossorigin="anonymous"></script>
   </head>
   <body>
     <Header />
@@ -51,5 +76,9 @@ import Play from '../components/Play.astro'
       </Section>
     </main>
     <Footer />
+    <script is:inline src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script is:inline>
+      AOS.init()
+    </script>
   </body>
 </html>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,9 +1,3 @@
-/* Fonts */
-@import url('https://use.typekit.net/ulq6snh.css');
-
-/* AOS */
-@import 'aos/dist/aos.css';
-
 :root {
   --clr-gray-100: rgb(252, 252, 255);
   --clr-gray-200: rgb(239, 239, 244);