perf directory

Author: aelmanaa

astro.config.ts

@@ -110,6 +110,7 @@ export default defineConfig({
   vite: {
     plugins: [yaml()],
     build: {
+      target: "es2020",
       // Optimize CSS delivery
       cssMinify: true,
       // Increase the threshold for inlining assets
@@ -121,6 +122,9 @@ export default defineConfig({
       //   }
       // },
     },
+    esbuild: {
+      target: "es2020",
+    },
     css: {
       devSourcemap: false,
     },

src/components/CCIP/Search/Search.tsx

@@ -52,21 +52,22 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
   const [lanesResults, setLanesResults] = useState<typeof lanes>([])
   const searchRef = useRef<HTMLDivElement>(null)
   const workerRef = useRef<Worker | null>(null)
+  const workerReadyRef = useRef(false)
 
-  // Initialize Web Worker
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      // Import the worker as a URL that Vite will process
-      workerRef.current = new Worker(new URL("~/workers/data-worker.ts", import.meta.url), { type: "module" })
-
-      workerRef.current.onmessage = (event: MessageEvent<WorkerResponse>) => {
-        const { networks, tokens: workerTokens, lanes: workerLanes } = event.data
-        setNetworksResults(networks || [])
-        setTokensResults(workerTokens || [])
-        setLanesResults(workerLanes || [])
-      }
+  // Lazily initialize Web Worker on first interaction
+  const ensureWorker = () => {
+    if (workerReadyRef.current || typeof window === "undefined") return
+    workerRef.current = new Worker(new URL("~/workers/data-worker.ts", import.meta.url), { type: "module" })
+    workerRef.current.onmessage = (event: MessageEvent<WorkerResponse>) => {
+      const { networks, tokens: workerTokens, lanes: workerLanes } = event.data
+      setNetworksResults(networks || [])
+      setTokensResults(workerTokens || [])
+      setLanesResults(workerLanes || [])
     }
+    workerReadyRef.current = true
+  }
 
+  useEffect(() => {
     return () => {
       if (workerRef.current) {
         workerRef.current.terminate()
@@ -92,6 +93,8 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
       return
     }
 
+    // Ensure worker exists before posting message
+    if (!workerReadyRef.current) ensureWorker()
     if (workerRef.current) {
       const message: WorkerMessage = {
         search: debouncedSearch,
@@ -114,7 +117,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
     }
   }, [debouncedSearch])
 
-  useClickOutside(searchRef, () => setOpenSearchMenu(false))
+  useClickOutside(searchRef, () => setOpenSearchMenu(false), { enabled: openSearchMenu })
 
   const generateExplorerUrl = (lane): ExplorerInfo => {
     const directory = directoryToSupportedChain(lane.sourceNetwork.key)
@@ -146,7 +149,10 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
           placeholder="Network/Token/Lane"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          onFocus={() => setIsActive(true)}
+          onFocus={() => {
+            setIsActive(true)
+            ensureWorker()
+          }}
           onBlur={() => setIsActive(false)}
         />
         {openSearchMenu && (

src/components/HeadCommon.astro

@@ -32,13 +32,7 @@ const { title } = Astro.props
 <link rel="preconnect" href="https://js.usemessages.com" crossorigin />
 
 <!-- Preload critical fonts -->
-<link
-  rel="preload"
-  href="https://smartcontract.imgix.net/fonts/Inter-VariableFont_opsz,wght.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin
-/>
+<!-- Remove heavy TTF preload to cut ~1.7MB; rely on system fonts or WOFF2 subsets -->
 <link
   rel="preload"
   href="https://smartcontract.imgix.net/fonts/TASAOrbiterDisplay-SemiBold.woff"
@@ -50,20 +44,41 @@ const { title } = Astro.props
 <!-- Scrollable a11y code helper - defer to not block render -->
 <script src="/make-scrollable-code-focusable.js" defer></script>
 
-<!-- Google Tag Manager -->
+<!-- Preconnects to speed GTM/GA when they load -->
+<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
+<link rel="preconnect" href="https://www.google-analytics.com" crossorigin />
+
+<!-- Google Tag Manager (lazy init on first interaction or idle) -->
 <script type="text/javascript">
   ;(function (w, d, s, l, i) {
     w[l] = w[l] || []
     w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" })
-    var f = d.getElementsByTagName(s)[0],
-      j = d.createElement(s),
-      dl = l != "dataLayer" ? "&l=" + l : ""
-    j.async = true
-    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl
-    f.parentNode.insertBefore(j, f)
+    function loadGTM() {
+      if (w.__gtmLoaded) return
+      w.__gtmLoaded = true
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != "dataLayer" ? "&l=" + l : ""
+      j.async = true
+      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl
+      f.parentNode.insertBefore(j, f)
+    }
+    function onFirstInput() {
+      loadGTM()
+      ;["pointerdown", "keydown", "wheel", "touchstart"].forEach((evt) =>
+        d.removeEventListener(evt, onFirstInput, { passive: true })
+      )
+    }
+    ;["pointerdown", "keydown", "wheel", "touchstart"].forEach((evt) =>
+      d.addEventListener(evt, onFirstInput, { passive: true })
+    )
+    if ("requestIdleCallback" in w) {
+      requestIdleCallback(loadGTM, { timeout: 3000 })
+    } else {
+      setTimeout(loadGTM, 3000)
+    }
   })(window, document, "script", "dataLayer", "GTM-N6DQ47T")
 </script>
-<!-- End Google Tag Manager -->
 
 <meta name="algolia-site-verification" content="5C6E2FAC077D2F49" />
 

src/features/utils/index.ts

@@ -132,11 +132,11 @@ const transformTokenName = (token: string): string => {
     .replace(/\+/g, "%2B") // Step 3: Replace plus signs with %2B
 }
 
-export const getTokenIconUrl = (token: string, size = 80) => {
+export const getTokenIconUrl = (token: string, size = 40) => {
   if (!token) return ""
   // Request appropriately sized images from CloudFront
   // For 40x40 display, request 80x80 for retina displays (2x)
-  return `https://d2f70xi62kby8n.cloudfront.net/tokens/${transformTokenName(token)}.webp?auto=compress%2Cformat&w=${size}&h=${size}&fit=cover`
+  return `https://d2f70xi62kby8n.cloudfront.net/tokens/${transformTokenName(token)}.webp?auto=compress%2Cformat&q=60&w=${size}&h=${size}&fit=cover`
 }
 
 export const fallbackTokenIconUrl = "/assets/icons/generic-token.svg"

src/hooks/useClickOutside.tsx

@@ -2,20 +2,23 @@ import { RefObject, useEffect } from "react"
 
 export const useClickOutside = <T extends HTMLElement>(
   ref: RefObject<T | null>,
-  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void
+  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void,
+  options?: { enabled?: boolean }
 ) => {
   useEffect(() => {
+    if (options?.enabled === false) return
+
     const listener = (event: MouseEvent | TouchEvent) => {
       if (!ref.current || ref.current.contains(event.target as Node)) {
         return
       }
       handleOnClickOutside(event)
     }
-    document.addEventListener("mousedown", listener)
-    document.addEventListener("touchstart", listener)
+    document.addEventListener("mousedown", listener, { passive: true })
+    document.addEventListener("touchstart", listener, { passive: true })
     return () => {
       document.removeEventListener("mousedown", listener)
       document.removeEventListener("touchstart", listener)
     }
-  }, [ref, handleOnClickOutside])
+  }, [ref, handleOnClickOutside, options?.enabled])
 }