perf: optimize lighthouse score

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
           npm run build
 
       - name: Deploy 🚀
-        if: github.ref == 'refs/heads/develop'
+        # if: github.ref == 'refs/heads/develop'
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: build

docusaurus.config.ts

@@ -11,6 +11,13 @@ export default {
   trailingSlash: true,
   tagline: "GraphQL platform engineered for scale",
   headTags: [
+    {
+      tagName: "script",
+      attributes: {
+        async: "true",
+        src: "partytown.js",
+      },
+    },
     {
       tagName: "script",
       attributes: {
@@ -28,7 +35,7 @@ export default {
     },
   ],
   url: "https://tailcall.run",
-  baseUrl: "/",
+  baseUrl: "/tailcallhq.github.io/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
   favicon: "images/favicon.ico",
@@ -52,10 +59,6 @@ export default {
       "classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
       {
-        gtag: {
-          trackingID: "G-JEP3QDWT0G",
-          anonymizeIP: false,
-        },
         docs: {
           // docRootComponent: require.resolve("./src/components/docs/Layout.tsx"),
           sidebarPath: require.resolve("./sidebars.ts"),
@@ -86,6 +89,7 @@ export default {
         alt: "My Site Logo",
         src: "icons/companies/taicall.svg",
         height: "2.5rem",
+        width: "150px",
       },
       items: [
         {to: "/", label: "Home", position: "left", activeBaseRegex: "^/$"},
@@ -95,6 +99,7 @@ export default {
         {to: "https://blog.tailcall.run/", label: "Blog", position: "left"},
         {
           href: "https://discord.gg/kRZBPpkgwq",
+          "aria-label": "Discord",
           position: "right",
           className: "header-button header-button-discord",
           html: `      
@@ -122,6 +127,14 @@ export default {
         highlightResult: true,
       },
     ],
+    [
+      require.resolve("./src/plugins/gtag"),
+      {
+        trackingID: "G-JEP3QDWT0G",
+        anonymizeIP: false,
+      },
+    ],
+    // @ts-ignore
     async function myPlugin() {
       return {
         name: "docusaurus-tailwindcss",
@@ -134,4 +147,4 @@ export default {
       }
     },
   ],
-}
+} satisfies Config

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "partytown": "partytown copylib ./build/~partytown/",
+    "build": "docusaurus build && npm run partytown",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -18,13 +19,13 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.1.1",
-    "@docusaurus/plugin-google-gtag": "^3.1.1",
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
     "docusaurus-lunr-search": "^3.3.2",
-    "graphiql": "^3.2.0",
+    "graphiql-tc": "^3.2.3",
+    "lottie-light-react": "^2.4.0",
     "lottie-react": "^2.4.0",
     "postcss": "^8.4.33",
     "prism-react-renderer": "^2.3.1",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/eslint-parser": "^7.23.10",
+    "@builder.io/partytown": "^0.10.2",
     "@docusaurus/eslint-plugin": "^3.1.1",
     "@docusaurus/module-type-aliases": "3.1.1",
     "@docusaurus/tsconfig": "3.1.1",

src/components/about/Founders.tsx

@@ -2,6 +2,7 @@ import React, {useState} from "react"
 
 import {founders} from "@site/src/constants"
 import Link from "@docusaurus/Link"
+import Image from "../shared/Image"
 
 type Founder = {
   founder: {
@@ -20,7 +21,7 @@ type SocialIconProps = {
 const Founder = ({founder}: Founder): JSX.Element => {
   return (
     <div>
-      <img src={founder.image} alt={founder.name} className="h-[300px] sm:h-[366px] object-contain" />
+      <Image src={founder.image} alt={founder.name} className="h-[300px] sm:h-[366px] object-contain" />
 
       <div className="flex flex-col space-y-SPACE_02 items-start">
         <span className="text-content-small font-bold sm:text-title-small">{founder.name}</span>

src/components/about/Hero.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import Heading from "@theme/Heading"
 import SectionTitle from "../shared/SectionTitle"
+import Image from "../shared/Image"
 
 const Hero = (): JSX.Element => {
   return (
@@ -15,8 +16,8 @@ const Hero = (): JSX.Element => {
         </Heading>
       </div>
 
-      <img
-        src={require("@site/static/animations/about-us-visual.gif").default}
+      <Image
+        src={"/images/animations/about-us-visual.gif"}
         alt="about us visual"
         className="h-52 w-60 sm:h-72 sm:w-80 lg:h-fit lg:w-fit"
       />

src/components/about/Investors.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import {investors} from "@site/src/constants"
+import Image from "../shared/Image"
 
 const Investors = (): JSX.Element => {
   return (
@@ -10,22 +11,22 @@ const Investors = (): JSX.Element => {
 
       <div className="flex flex-col sm:flex-row items-center justify-center space-y-SPACE_06 sm:space-y-0 sm:space-x-SPACE_10 mt-SPACE_06 sm:mt-SPACE_09">
         <div className="border border-solid border-tailCall-border-light-500 flex items-center justify-center rounded-xl sm:rounded-2xl p-SPACE_05 sm:p-SPACE_10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100">
-          <img
-            src={require("@site/static/images/about/peakxv.png").default}
+          <Image
+            src={"/images/about/peakxv.png"}
             srcSet={`
-            ${require("@site/static/images/about/peakxv.png").default} 1x,
-            ${require("@site/static/images/about/peakxv-2x.png").default} 2x
+            "/images/about/peakxv.png" 1x,
+            "/images/about/peakxv-2x.png" 2x
             `}
             alt="peak xv"
             className="h-full w-full object-contain"
           />
         </div>
         <div className="border border-solid border-tailCall-border-light-500 flex items-center justify-center rounded-xl sm:rounded-2xl p-SPACE_05 sm:p-SPACE_10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100">
-          <img
-            src={require("@site/static/images/about/tenacity.png").default}
+          <Image
+            src={"/images/about/tenacity.png"}
             srcSet={`
-            ${require("@site/static/images/about/tenacity.png").default} 1x,
-            ${require("@site/static/images/about/tenacity-2x.png").default} 2x
+            "/images/about/tenacity.png" 1x,
+            "/images/about/tenacity-2x.png" 2x
             `}
             alt="tenacity"
           />
@@ -37,7 +38,7 @@ const Investors = (): JSX.Element => {
         <div className="flex flex-wrap lg:flex-nowrap gap-SPACE_12 sm:gap-y-SPACE_06 lg:gap-y-0 items-center flex-start justify-center mt-SPACE_09">
           {investors.map((investor) => (
             <div key={investor.id} className="flex flex-col items-center w-[172px] sm:w-[228px]">
-              <img
+              <Image
                 src={investor.image}
                 srcSet={`${investor.image} 1x,${investor.image2x} 2x`}
                 alt={investor.name}

src/components/about/SocialBuzz.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import SectionTitle from "../shared/SectionTitle"
+import Image from "../shared/Image"
 
 const SocialBuzz = (): JSX.Element => {
   return (
@@ -10,29 +11,23 @@ const SocialBuzz = (): JSX.Element => {
           <span className="text-title-semi-large sm:text-display-small">Social & Buzz</span>
         </div>
 
-        <img
-          src={require("@site/static/images/about/tweet-2.jpg").default}
-          srcSet={`${require("@site/static/images/about/tweet-2.jpg").default} 1x,
-          ${require("@site/static/images/about/tweet-2-2x.jpg").default} 2x
-          `}
+        <Image
+          src="/images/about/tweet-2.jpg"
+          srcSet="/images/about/tweet-2.jpg 1x, /images/about/tweet-2-2x.jpg 2x"
           alt="tweet 2"
           className="rounded-3xl m-SPACE_02 lg:hidden border border-solid border-tailCall-border-light-500"
         />
 
-        <img
-          src={require("@site/static/images/about/tweet-1.jpg").default}
-          srcSet={`${require("@site/static/images/about/tweet-1.jpg").default} 1x,
-          ${require("@site/static/images/about/tweet-1-2x.jpg").default} 2x
-          `}
+        <Image
+          src="/images/about/tweet-1.jpg"
+          srcSet="/images/about/tweet-1.jpg 1x, /images/about/tweet-1-2x.jpg 2x"
           alt=""
           className="border border-solid border-tailCall-border-light-500 rounded-3xl m-SPACE_02"
         />
       </div>
-      <img
-        src={require("@site/static/images/about/tweet-2.jpg").default}
-        srcSet={`${require("@site/static/images/about/tweet-2.jpg").default} 1x,
-          ${require("@site/static/images/about/tweet-2-2x.jpg").default} 2x
-          `}
+      <Image
+        src="/images/about/tweet-2.jpg"
+        srcSet="/images/about/tweet-2.jpg 1x, /images/about/tweet-2-2x.jpg 2x"
         alt="tweet 2"
         className="border border-solid border-tailCall-border-light-500 rounded-3xl m-SPACE_02 lg:block hidden"
       />

src/components/enterprise/EnterpriseFeatures.tsx

@@ -1,21 +1,21 @@
 import React from "react"
 import Heading from "@theme/Heading"
-
+import Image from "../shared/Image"
 import {enterpriseFeatures} from "@site/src/constants"
 
 type EnterpriseFeaturesCardProps = {
   feature: {
     id: number
     title: string
     description: string
-    logo: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    logo: string
   }
 }
 
 const EnterpriseFeaturesCard = ({feature}: EnterpriseFeaturesCardProps): JSX.Element => {
   return (
     <div className="border border-solid border-tailCall-border-light-400 rounded-3xl w-full sm:w-[450px] sm:h-60 p-SPACE_08 flex flex-col items-start space-y-SPACE_04">
-      <feature.logo className="h-5 w-5 sm:h-8 sm:w-8" />
+      <Image src={feature.logo} alt={feature.title} className="h-5 w-5 sm:h-8 sm:w-8" />
       <p className="text-title-tiny sm:text-title-medium">{feature.title}</p>
       <p className="text-content-tiny sm:text-content-small font-normal">{feature.description}</p>
     </div>

src/components/enterprise/MoreEnterpriseFeatures.tsx

@@ -3,13 +3,14 @@ import Heading from "@theme/Heading"
 
 import {additionalEnterpriseFeatures} from "@site/src/constants"
 import CheckCircle from "@site/static/icons/basic/check-circle-broken.svg"
+import Image from "../shared/Image"
 
 const MoreEnterpriseFeatures = (): JSX.Element => {
   return (
     <section className="border border-solid border-tailCall-border-light-300 flex flex-col sm:flex-row items-center justify-center sm:px-SPACE_10 lg:px-40 relative overflow-hidden">
       <div className="w-full h-full p-SPACE_04 sm:py-0 sm:pr-SPACE_10">
-        <img
-          src={require("@site/static/icons/basic/more-feat-grid.png").default}
+        <Image
+          src="/images/icons/basic/more-feat-grid.png"
           alt=""
           className="absolute inset-0 h-full w-full sm:w-[47vw] -z-10"
         />