Improve performance using Partytown to offload Ads and GA scripts to separate thread

codergautam · codergautam · commit 107d2606fed4 · 2026-02-03T22:32:49.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -46,4 +46,6 @@ public/wiki
 /scripts/*.json
 /.claude
 vali-data/*
-mapgens/*
+mapgens/*
+# Partytown (generated from node_modules)
+public/~partytown/
diff --git a/components/headContent.js b/components/headContent.js
@@ -2,7 +2,6 @@ import Head from "next/head";
 import { useEffect } from "react";
 
 export default function HeadContent({ text, inCoolMathGames, inCrazyGames = false }) {
-
   useEffect(() => {
     if (!window.location.search.includes("crazygames") && !process.env.NEXT_PUBLIC_POKI &&
   !process.env.NEXT_PUBLIC_COOLMATH) {
@@ -15,18 +14,20 @@ export default function HeadContent({ text, inCoolMathGames, inCrazyGames = fals
     // document.body.appendChild(scriptAp);
     // end adinplay script
 
-// start nitroPay script - defer to after page load completes
+// start nitroPay script - runs in Web Worker via Partytown
 window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{window.nitroAds.queue.push(["createAd",arguments,e])})},addUserToken:function(){window.nitroAds.queue.push(["addUserToken",arguments])},queue:[]};
 
       const loadNitroAds = () => {
         if (document.querySelector('script[src*="nitropay.com"]')) return;
         const script = document.createElement('script');
         script.src = "https://s.nitropay.com/ads-2071.js";
-        script.async = true;
+        script.type = "text/partytown"; // Run in Web Worker
         document.head.appendChild(script);
+        // Notify Partytown to process dynamically added script
+        window.dispatchEvent(new CustomEvent('ptupdate'));
       };
 
-      // Wait for page load event (ensures fonts/LCP complete), then defer further
+      // Wait for page load event (ensures fonts/LCP complete), then load in worker
       const scheduleAdLoad = () => {
         if ('requestIdleCallback' in window) {
           requestIdleCallback(loadNitroAds, { timeout: 3000 });
@@ -123,21 +124,12 @@ ads.js"></script>*/
 <meta name="google-site-verification" content="7s9wNJJCXTQqp6yr1GiQxREhloXKjtlbOIPTHZhtY04" />
 <meta name="yandex-verification" content="2eb7e8ef6fb55e24" />
 
-{/* Preconnect to font origins for faster loading */}
-<link rel="preconnect" href="https://fonts.googleapis.com"/>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
 
 {/* Preload CrazyGames SDK when on CrazyGames platform */}
 {inCrazyGames && (
   <link rel="preload" href="https://sdk.crazygames.com/crazygames-sdk-v3.js" as="script" />
 )}
 
-{/* Fonts - blocking but with preconnect for speed */}
-{/* <link href="https://fonts.googleapis.com/css2?family=Jockey+One&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet"/> */}
-
-<link href="https://fonts.googleapis.com/css2?family=Jockey+One&family=Lexend:wght@100..900&display=swap" rel="stylesheet"/>
-
 {/* <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script> */}
 
 
diff --git a/components/home.js b/components/home.js
@@ -27,37 +27,29 @@ import 'react-toastify/dist/ReactToastify.css';
 import dynamic from "next/dynamic";
 import NextImage from "next/image";
 import OnboardingText from "@/components/onboardingText";
-// import RoundOverScreen from "@/components/roundOverScreen";
 const RoundOverScreen = dynamic(() => import('@/components/roundOverScreen'), { ssr: false });
 import msToTime from "@/components/msToTime";
 import SuggestAccountModal from "@/components/suggestAccountModal";
-import FriendsModal from "@/components/friendModal";
 import { toast, ToastContainer } from "react-toastify";
-import InfoModal from "@/components/infoModal";
 import { inIframe, isForbiddenIframe } from "@/components/utils/inIframe";
 import MapsModal from "@/components/maps/mapsModal";
-import { useRouter } from "next/router";
-import { fromLonLat } from "ol/proj";
-import { boundingExtent } from "ol/extent";
 
 import countries from "@/public/countries.json";
 import officialCountryMaps from "@/public/officialCountryMaps.json";
 
 import gameStorage from "@/components/utils/localStorage";
 import DiscordModal from "@/components/discordModal";
-import MerchModal from "@/components/merchModal";
 import AlertModal from "@/components/ui/AlertModal";
 import WhatsNewModal from "@/components/ui/WhatsNewModal";
-import MapGuessrModal from "@/components/mapGuessrModal";
+const MapGuessrModal = dynamic(() => import("@/components/mapGuessrModal"), { ssr: false });
 import changelog from "@/components/changelog.json";
 import clientConfig from "@/clientConfig";
 import { useGoogleLogin } from "@react-oauth/google";
-import haversineDistance from "./utils/haversineDistance";
+// import haversineDistance from "./utils/haversineDistance";
 import StreetView from "./streetview/streetView";
 import Stats from "stats.js";
 // import SvEmbedIframe from "./streetview/svHandler"; // REMOVED: Using direct StreetView instead of double-iframe setup
-import HomeNotice from "./homeNotice";
-import getTimeString, { getMaintenanceDate } from "./maintenanceTime";
+// import getTimeString, { getMaintenanceDate } from "./maintenanceTime";
 // import MaintenanceBanner from "./MaintenanceBanner";
 import Ad from "./bannerAdNitro";
 import PendingNameChangeModal from "./pendingNameChangeModal";
@@ -2153,11 +2145,10 @@ export default function Home({ }) {
                             setLatLong(loc)
                             if (data.name) {
 
-                                // calculate extent (for openlayers)
-                                const mappedLatLongs = data.locations.map((l) => fromLonLat([l.long, l.lat], 'EPSG:4326'));
-                                let extent = boundingExtent(mappedLatLongs);
-                                console.log("extent", extent)
-                                // convert extent from EPSG:4326 to EPSG:3857 (for openlayers)
+                                // calculate extent - simple bounding box [minLng, minLat, maxLng, maxLat]
+                                const lngs = data.locations.map(l => l.long);
+                                const lats = data.locations.map(l => l.lat);
+                                const extent = [Math.min(...lngs), Math.min(...lats), Math.max(...lngs), Math.max(...lats)];
 
                                 setGameOptions((prev) => ({
                                     ...prev,
@@ -2304,24 +2295,17 @@ export default function Home({ }) {
         <>
             <HeadContent text={text} inCoolMathGames={inCoolMathGames} inCrazyGames={inCrazyGames} />
 
-            <AccountModal inCrazyGames={inCrazyGames} shown={accountModalOpen} session={session} setSession={setSession} setAccountModalOpen={setAccountModalOpen}
+            {accountModalOpen && <AccountModal inCrazyGames={inCrazyGames} shown={true} session={session} setSession={setSession} setAccountModalOpen={setAccountModalOpen}
                 eloData={eloData} accountModalPage={accountModalPage} setAccountModalPage={setAccountModalPage}
                 ws={ws} canSendInvite={
-                    // send invite if in a private multiplayer game, dont need to be host or in game waiting just need to be in a Party
                     multiplayerState?.inGame && !multiplayerState?.gameData?.public
                 } sendInvite={sendInvite} options={options}
-
-            />
-            <SetUsernameModal shown={session && session?.token?.secret && !session.token.username} session={session} />
-            <SuggestAccountModal shown={showSuggestLoginModal} setOpen={setShowSuggestLoginModal} />
-            <DiscordModal shown={showDiscordModal && (typeof window !== 'undefined' && window.innerWidth >= 768)} setOpen={setShowDiscordModal} />
-            {/* <MerchModal shown={merchModal} onClose={() => setMerchModal(false)} session={session} /> */}
-            <MapGuessrModal isOpen={mapGuessrModal} onClose={() => setMapGuessrModal(false)} />
-            <PendingNameChangeModal
-                session={session}
-                isOpen={pendingNameChangeModal}
-                onClose={() => setPendingNameChangeModal(false)}
-            />
+            />}
+            {session?.token?.secret && !session.token.username && <SetUsernameModal shown={true} session={session} />}
+            {showSuggestLoginModal && <SuggestAccountModal shown={true} setOpen={setShowSuggestLoginModal} />}
+            {showDiscordModal && typeof window !== 'undefined' && window.innerWidth >= 768 && <DiscordModal shown={true} setOpen={setShowDiscordModal} />}
+            {mapGuessrModal && <MapGuessrModal isOpen={true} onClose={() => setMapGuessrModal(false)} />}
+            {pendingNameChangeModal && <PendingNameChangeModal session={session} isOpen={true} onClose={() => setPendingNameChangeModal(false)} />}
             {ChatboxMemo}
             <ToastContainer pauseOnFocusLoss={false} />
 
@@ -2799,8 +2783,7 @@ export default function Home({ }) {
                         </div>
                     </div>
                 }
-                <InfoModal shown={false} />
-                <MapsModal shown={mapModal || gameOptionsModalShown} session={session} onClose={() => {
+                {(mapModal || gameOptionsModalShown) && <MapsModal shown={true} session={session} onClose={() => {
                     if (mapModalClosing) return;
                     setMapModalClosing(true);
                     setTimeout(() => {
@@ -2816,12 +2799,12 @@ export default function Home({ }) {
                     } : null}
                     showAllCountriesOption={(gameOptionsModalShown && screen === "singleplayer")}
                     showOptions={screen === "singleplayer"}
-                    gameOptions={gameOptions} setGameOptions={setGameOptions} />
+                    gameOptions={gameOptions} setGameOptions={setGameOptions} />}
 
-                <SettingsModal inCrazyGames={inCrazyGames} options={options} setOptions={setOptions} shown={settingsModal} onClose={() => setSettingsModal(false)} />
+                {settingsModal && <SettingsModal inCrazyGames={inCrazyGames} options={options} setOptions={setOptions} shown={true} onClose={() => setSettingsModal(false)} />}
 
-                <AlertModal
-                    isOpen={connectionErrorModalShown}
+                {connectionErrorModalShown && <AlertModal
+                    isOpen={true}
                     onClose={() => setConnectionErrorModalShown(false)}
                     title={multiplayerState.connecting ? text("multiplayerConnecting") : text("multiplayerNotConnected")}
                     message={multiplayerState.connecting
@@ -2832,7 +2815,7 @@ export default function Home({ }) {
                         : text("multiplayerConnectionErrorMessage")
                     }
                     type={multiplayerState.connecting ? "warning" : "error"}
-                />
+                />}
 
 
 
@@ -2972,11 +2955,6 @@ document.addEventListener(
             }
 }, 1000);
 
-    (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "ndud94nvsg");
 
   	window.aiptag = window.aiptag || {cmd: []};
 	aiptag.cmd.display = aiptag.cmd.display || [];
diff --git a/components/ui/navbar.js b/components/ui/navbar.js
@@ -79,7 +79,7 @@ export default function Navbar({ maintenance, joinCodePress, inCrazyGames, inCoo
                     {!inGame && showAccBtn && !inCoolMathGames && !accountModalOpen && !mapModalOpen && (<AccountBtn inCrazyGames={inCrazyGames} session={session} navbarMode={screen !== "home"} openAccountModal={openAccountModal} />)}
 
                     {session?.token?.secret && !accountModalOpen && !gameOptionsModalShown && !mapModalOpen && !["getready", "guess"].includes(multiplayerState?.gameData?.state) && (
-                        <button className={`gameBtn friendBtn ${screen === "home" ? "friendBtnFixed" : ""}`} onClick={onFriendsPress} disabled={!multiplayerState?.connected}>
+                        <button className={`gameBtn friendBtn ${screen === "home" ? "friendBtnFixed" : ""}`} onClick={onFriendsPress} disabled={!multiplayerState?.connected} aria-label="Friends">
                             <FaUserFriends size={40} className={`friendBtnIcon ${screen === "home" ? "friendBtnIconFixed" : ""}`} />
                         </button>
                     )}
diff --git a/components/utils/sendEvent.js b/components/utils/sendEvent.js
@@ -1,9 +1,7 @@
 export default function sendEvent(name, params={}) {
-  const windowAny = window;
   try {
-    // gtag events
-    windowAny.gtag("event",name,params)
+    window.gtag("event", name, params);
   } catch (e) {
-    console.log("error sending gtag event",e)
+    console.log("error sending gtag event", e);
   }
 }
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "postinstall": "mkdir -p public/~partytown && cp -r node_modules/@qwik.dev/partytown/lib/* public/~partytown/ || true",
     "dev": "node welcome.js && npx concurrently \"cross-env NODE_OPTIONS='--no-warnings' UWS_HTTP_MAX_HEADERS_SIZE=16384 nodemon ws/ws --quiet --signal SIGTERM --exec \"node --no-warnings=ExperimentalWarning\" --watch ws/ws.js\" \"cross-env NODE_OPTIONS='--no-warnings' nodemon server.js --quiet --exec \"node --no-warnings=ExperimentalWarning\" --watch server.js\" \"cross-env NODE_OPTIONS='--no-warnings' nodemon cron.js --quiet --exec \"node --no-warnings=ExperimentalWarning\" --watch cron.js\" \"npx next dev\"",
     "devclient": "node welcome.js && npx concurrently \"cross-env NODE_OPTIONS='--no-warnings' nodemon server.js --quiet --exec \"node --no-warnings=ExperimentalWarning\" --watch server.js\" \"cross-env NODE_OPTIONS='--no-warnings' nodemon cron.js --quiet --exec \"node --no-warnings=ExperimentalWarning\" --watch cron.js\" \"npx next dev\"",
     "build": "cross-env next build",
@@ -13,6 +14,7 @@
     "heroku-postbuild": "cross-env  next build"
   },
   "dependencies": {
+    "@qwik.dev/partytown": "^0.11.2",
     "@googlemaps/js-api-loader": "^1.16.6",
     "@osm_borders/maritime_10m": "^1.1.0",
     "@react-oauth/google": "^0.12.1",
diff --git a/pages/_app.js b/pages/_app.js
@@ -4,17 +4,39 @@ import "@/styles/accountModal.css";
 import "@/styles/mapModal.css";
 import '@/styles/duel.css';
 
-import { GoogleAnalytics } from "nextjs-google-analytics";
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
 import { useEffect } from "react";
 
 import '@smastrom/react-rating/style.css'
 
 function App({ Component, pageProps }) {
+  useEffect(() => {
+    const handleError = (event) => {
+      window.gtag?.('event', 'exception', {
+        description: event.message || 'Unknown error',
+        fatal: false,
+      });
+    };
+
+    const handleRejection = (event) => {
+      window.gtag?.('event', 'exception', {
+        description: event.reason?.message || 'Unhandled promise rejection',
+        fatal: false,
+      });
+    };
+
+    window.addEventListener('error', handleError);
+    window.addEventListener('unhandledrejection', handleRejection);
+
+    return () => {
+      window.removeEventListener('error', handleError);
+      window.removeEventListener('unhandledrejection', handleRejection);
+    };
+  }, []);
+
   return (
     <>
-      <GoogleAnalytics trackPageViews gaMeasurementId="G-KFK0S0RXG5" />
       { process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID  ? (
       <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}>
       <Component {...pageProps} />
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,10 +1,35 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import React, { useEffect } from "react";
+import { Partytown } from '@qwik.dev/partytown/react';
 
 export default function Document() {
   return (
     <Html lang="en" style={{ backgroundColor: '#000000' }}>
       <Head>
+        {/* Font preconnects and stylesheets */}
+        <link rel="preconnect" href="https://fonts.googleapis.com"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
+        <link href="https://fonts.googleapis.com/css2?family=Jockey+One&family=Lexend:wght@100..900&family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+
+        <Partytown
+          debug={process.env.NODE_ENV === 'development'}
+          forward={['nitroAds', 'nitroAds.createAd', 'nitroAds.queue', 'nitroAds.addUserToken', 'dataLayer.push', 'gtag']}
+        />
+        {/* Google Analytics - gtag must be defined on main thread for forwarding to work */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              window.gtag = function(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'G-KFK0S0RXG5');
+            `,
+          }}
+        />
+        {/* Load gtag.js in web worker via Partytown */}
+        <script
+          type="text/partytown"
+          src="https://www.googletagmanager.com/gtag/js?id=G-KFK0S0RXG5"
+        />
         <style dangerouslySetInnerHTML={{
           __html: `
             html, body {
diff --git a/pages/leaderboard/index.js b/pages/leaderboard/index.js
@@ -65,13 +65,7 @@ const Leaderboard = ({ }) => {
         <title>{text("leaderboard")}</title>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
-          rel="stylesheet"
-        />
-        <script src="https://unpkg.com/@phosphor/icons"></script>
+                <script src="https://unpkg.com/@phosphor/icons"></script>
         <style>
           {`
           body {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/cmlogo.png b/public/cmlogo.png
diff --git a/styles/globals.scss b/styles/globals.scss

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,7 @@`
`1`	`1`	`export default function sendEvent(name, params={}) {`
`2`		`- const windowAny = window;`
`3`	`2`	`try {`
`4`		`- // gtag events`
`5`		`- windowAny.gtag("event",name,params)`
	`3`	`+ window.gtag("event", name, params);`
`6`	`4`	`} catch (e) {`
`7`		`- console.log("error sending gtag event",e)`
	`5`	`+ console.log("error sending gtag event", e);`
`8`	`6`	`}`
`9`	`7`	`}`