From b7f73e2d298826b16e7d8d5e0677bb89ea4bb668 Mon Sep 17 00:00:00 2001
From: Adrian Goh Jun Wei <adriangohjw@gmail.com>
Date: Sun, 29 Dec 2024 18:13:49 +0800
Subject: [PATCH] isom-1710 lighthouse performance preconnect to google font
 (#966)

* add FontPreload

* add FontPreload to Skeleton
---
 .../next/components/internal/FontPreload.tsx  | 22 +++++++++++++++++++
 .../next/components/internal/index.ts         |  1 +
 .../next/layouts/Skeleton/Skeleton.tsx        |  3 +++
 3 files changed, 26 insertions(+)
 create mode 100644 packages/components/src/templates/next/components/internal/FontPreload.tsx

diff --git a/packages/components/src/templates/next/components/internal/FontPreload.tsx b/packages/components/src/templates/next/components/internal/FontPreload.tsx
new file mode 100644
index 0000000000..80d4a19fb9
--- /dev/null
+++ b/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"
+      />
+    </>
+  )
+}
diff --git a/packages/components/src/templates/next/components/internal/index.ts b/packages/components/src/templates/next/components/internal/index.ts
index 02d7f29924..cfdcdf0d9b 100644
--- a/packages/components/src/templates/next/components/internal/index.ts
+++ b/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"
diff --git a/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx b/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx
index 04a644174b..7b67a6459e 100644
--- a/packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx
+++ b/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}