perf: defer homepage third-party embeds

docusaurus.config.ts

@@ -13,15 +13,6 @@ export default {
   trailingSlash: true,
   tagline: "GraphQL platform engineered for scale",
   headTags: [
-    {
-      tagName: "script",
-      attributes: {
-        id: "chatbotscript",
-        "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
-        "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
-        src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
-      },
-    },
     {
       tagName: "script",
       attributes: {

src/components/home/IntroductionVideo/index.tsx

@@ -1,10 +1,11 @@
-import React, {useRef} from "react"
+import React, {useRef, useState} from "react"
 import {useCookieConsent} from "@site/src/utils/hooks/useCookieConsent"
 import "./style.css"
 
 const IntroductionVideo: React.FC = () => {
   const videoId = "1011521201"
   const videoRef = useRef<HTMLDivElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
   const {getCookieConsent} = useCookieConsent()
   const cookieConsent = getCookieConsent()
 
@@ -15,14 +16,25 @@ const IntroductionVideo: React.FC = () => {
   return (
     <div className="video-wrapper" ref={videoRef}>
       <div className="video-container">
-        <iframe
-          src={`https://player.vimeo.com/video/${videoId}?autoplay=0&badge=0&autopause=0&player_id=0&app_id=58479${handleVimeoAnalytics()}`}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-          className="absolute top-0 left-0 w-full h-full"
-          title="Tailcall Introduction Video"
-          loading="lazy"
-        />
+        {isPlaying ? (
+          <iframe
+            src={`https://player.vimeo.com/video/${videoId}?autoplay=1&badge=0&autopause=0&player_id=0&app_id=58479${handleVimeoAnalytics()}`}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="absolute top-0 left-0 w-full h-full"
+            title="Tailcall Introduction Video"
+            loading="lazy"
+          />
+        ) : (
+          <button
+            className="video-placeholder"
+            type="button"
+            aria-label="Play Tailcall introduction video"
+            onClick={() => setIsPlaying(true)}
+          >
+            <span className="video-play-button" aria-hidden="true" />
+          </button>
+        )}
       </div>
     </div>
   )

src/components/home/IntroductionVideo/style.css

@@ -33,6 +33,48 @@
   background-size: 100%;
 }
 
+.video-placeholder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+}
+
+.video-play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.72);
+  transform: translate(-50%, -50%);
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease;
+}
+
+.video-play-button::before {
+  content: "";
+  display: block;
+  margin-left: 0.25rem;
+  border-top: 0.75rem solid transparent;
+  border-bottom: 0.75rem solid transparent;
+  border-left: 1.125rem solid #fff;
+}
+
+.video-placeholder:hover .video-play-button,
+.video-placeholder:focus-visible .video-play-button {
+  background: rgba(0, 0, 0, 0.86);
+  transform: translate(-50%, -50%) scale(1.06);
+}
+
 .video-background {
   position: absolute;
   top: 0;

src/components/shared/GlobalLayout.tsx

@@ -23,6 +23,32 @@ const GlobalLayout: React.FC = () => {
     }
   }, [cookieConsent])
 
+  useEffect(() => {
+    if (typeof window === "undefined" || !cookieConsent?.accepted || document.getElementById("chatbotscript")) return
+
+    const loadChatbot = () => {
+      const script = document.createElement("script")
+
+      script.id = "chatbotscript"
+      script.dataset.accountid = "CZPG9aVdtk59Tjz4SMTu8w=="
+      script.dataset.websiteid = "75VGI0NlBqessD4BQn2pFg=="
+      script.src = "https://app.robofy.ai/bot/js/common.js"
+      script.async = true
+
+      document.body.appendChild(script)
+    }
+
+    const idleWindow = window as Window & {
+      requestIdleCallback?: (callback: () => void) => number
+    }
+
+    if (idleWindow.requestIdleCallback) {
+      idleWindow.requestIdleCallback(loadChatbot)
+    } else {
+      window.setTimeout(loadChatbot, 1500)
+    }
+  }, [cookieConsent?.accepted])
+
   return (
     <>
       <CookieConsentModal