[bounty] performance: Get a 100% score for mobile on LightHouse metrics /

docusaurus.config.ts

@@ -20,6 +20,7 @@ export default {
         "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
         "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
         src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
+        defer: "true",
       },
     },
     {
@@ -61,7 +62,7 @@ export default {
     },
   },
   future: {
-    experimental_faster: false, // Required for faster production builds. For reference: https://docusaurus.io/blog/releases/3.6#adoption-strategy
+    experimental_faster: true, // Required for faster production builds. For reference: https://docusaurus.io/blog/releases/3.6#adoption-strategy
   },
   presets: [
     [

src/components/home/IntroductionVideo/index.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from "react"
+import React, {useRef, useState} from "react"
 import {useCookieConsent} from "@site/src/utils/hooks/useCookieConsent"
 import "./style.css"
 
@@ -7,22 +7,47 @@ const IntroductionVideo: React.FC = () => {
   const videoRef = useRef<HTMLDivElement>(null)
   const {getCookieConsent} = useCookieConsent()
   const cookieConsent = getCookieConsent()
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false)
 
   const handleVimeoAnalytics = () => {
     return Boolean(cookieConsent?.accepted) ? "" : "&dnt=1"
   }
 
+  const handlePlayClick = () => {
+    setIsIframeLoaded(true)
+  }
+
   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"
-        />
+        {!isIframeLoaded ? (
+          <div
+            className="absolute top-0 left-0 w-full h-full cursor-pointer bg-gray-900 flex items-center justify-center"
+            onClick={handlePlayClick}
+            style={{
+              backgroundImage: `url(https://vumbnail.com/${videoId}.jpg)`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }}
+          >
+            <svg
+              className="w-20 h-20 text-white opacity-90 hover:opacity-100 transition-opacity"
+              fill="currentColor"
+              viewBox="0 0 84 84"
+            >
+              <circle cx="42" cy="42" r="42" fill="rgba(0,0,0,0.8)" />
+              <path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
+            </svg>
+          </div>
+        ) : (
+          <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"
+          />
+        )}
       </div>
     </div>
   )

src/components/home/LottieContainer.tsxsrc/components/home/LottieContainer.tsx

@@ -1,23 +1,53 @@
-import React, {useEffect, useState} from "react"
+import React, {useEffect, useState, useRef} from "react"
 import BrowserOnly from "@docusaurus/BrowserOnly"
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"
 import type {LottieComponentProps} from "lottie-light-react"
 
 const LottieContainer: React.FC<LottieComponentProps> = ({animationData, loop = true, className = ""}) => {
   const [Lottie, setLottie] = useState<{default: React.FC<LottieComponentProps>} | null>(null)
+  const [isVisible, setIsVisible] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (ExecutionEnvironment.canUseDOM) {
+    if (!ExecutionEnvironment.canUseDOM || !containerRef.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isVisible) {
+            setIsVisible(true)
+            observer.disconnect()
+          }
+        })
+      },
+      {
+        rootMargin: "50px",
+      },
+    )
+
+    observer.observe(containerRef.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isVisible && ExecutionEnvironment.canUseDOM) {
       import("lottie-light-react").then((LottieModule) => {
         setLottie(LottieModule)
       })
     }
-  }, [])
+  }, [isVisible])
 
   return (
-    <BrowserOnly>
-      {() => (Lottie ? <Lottie.default animationData={animationData} loop={loop} className={className} /> : <></>)}
-    </BrowserOnly>
+    <div ref={containerRef} className={className}>
+      <BrowserOnly>
+        {() =>
+          Lottie && isVisible ? <Lottie.default animationData={animationData} loop={loop} className={className} /> : <></>
+        }
+      </BrowserOnly>
+    </div>
   )
 }
 

src/components/home/TrustedByMarquee.tsx

@@ -35,10 +35,10 @@ const TrustedByMarquee: React.FC<TrustedByMarqueeProps> = ({
     <div key={partner.name} className="h-20">
       {partner.link ? (
         <a href={partner.link} target="_blank" rel="noopener noreferrer">
-          <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+          <img src={partner.logo} alt={partner.name} className="max-w-[152px]" loading="lazy" />
         </a>
       ) : (
-        <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />
+        <img src={partner.logo} alt={partner.name} className="max-w-[152px]" loading="lazy" />
       )}
     </div>
   )

src/pages/index.tsx

@@ -24,6 +24,7 @@ const Home = (): JSX.Element => {
           referrerPolicy="no-referrer-when-downgrade"
           src="https://static.scarf.sh/a.png?x-pxid=45ec365f-ab8a-4848-a6a9-bd4ffecfe72e"
           alt="pixel"
+          loading="lazy"
         />
       )}
     </Layout>