isom-1710 lighthouse performance preconnect to google font (#966)

* add FontPreload

* add FontPreload to Skeleton

packages/components/src/templates/next/components/internal/FontPreload.tsx

@@ -0,0 +1,22 @@
+// The following links are included to improve SEO and Lighthouse performance by optimizing font loading.
+// Preconnecting to fonts.gstatic.com allows the browser to establish a connection early, reducing latency
+// when fetching fonts, which can lead to faster rendering and improved user experience.
+
+export const FontPreload = () => {
+  return (
+    <>
+      <link
+        // Establish an early connection to fonts.gstatic.com
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossOrigin="anonymous" // required when making requests to a different origin
+      />
+      <link
+        // Serve as a fallback for browsers that don't support preconnect
+        // at least allowing early DNS resolution
+        rel="dns-prefetch"
+        href="https://fonts.gstatic.com"
+      />
+    </>
+  )
+}

packages/components/src/templates/next/components/internal/index.ts

@@ -28,3 +28,4 @@ export {
   GoogleTagManagerBody,
 } from "./GoogleTagManager"
 export { BlogCard } from "./BlogCard"
+export { FontPreload } from "./FontPreload"

packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx

@@ -1,6 +1,7 @@
 import type { IsomerPageSchemaType } from "~/engine"
 import {
   DatadogRum,
+  FontPreload,
   Footer,
   GoogleTagManagerBody,
   GoogleTagManagerHeader,
@@ -33,6 +34,8 @@ export const Skeleton = ({
 
   return (
     <>
+      <FontPreload />
+
       {shouldIncludeGTM && (
         <GoogleTagManagerHeader
           siteGtmId={site.siteGtmId}