Refactor ad loading logic and update background images

- Updated nitroPay script to defer ad loading until after the page load completes for improved performance.
- Changed background images from 'street2christmas.jpg' to 'street2.webp' across multiple components for better optimization.

Author: codergautam

components/headContent.js

@@ -15,7 +15,7 @@ export default function HeadContent({ text, inCoolMathGames, inCrazyGames = fals
     // document.body.appendChild(scriptAp);
     // end adinplay script
 
-// start nitroPay script - defer to after page is interactive
+// start nitroPay script - defer to after page load completes
 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 = () => {
@@ -26,11 +26,19 @@ window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{win
         document.head.appendChild(script);
       };
 
-      // Defer ad loading until after critical content
-      if ('requestIdleCallback' in window) {
-        requestIdleCallback(loadNitroAds, { timeout: 2000 });
+      // Wait for page load event (ensures fonts/LCP complete), then defer further
+      const scheduleAdLoad = () => {
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(loadNitroAds, { timeout: 3000 });
+        } else {
+          setTimeout(loadNitroAds, 1000);
+        }
+      };
+
+      if (document.readyState === 'complete') {
+        scheduleAdLoad();
       } else {
-        setTimeout(loadNitroAds, 1000);
+        window.addEventListener('load', scheduleAdLoad, { once: true });
       }
 
 // end nitroPay script

components/home.js

@@ -8,7 +8,7 @@ import { useEffect, useState, useRef } from "react";
 import Navbar from "@/components/ui/navbar";
 import GameUI from "@/components/gameUI";
 import BannerText from "@/components/bannerText";
-import findLatLongRandom from "@/components/findLatLong";
+// findLatLongRandom is dynamically imported when needed to avoid loading Google Maps API on page load
 import Link from "next/link";
 import MultiplayerHome from "@/components/multiplayerHome";
 import AccountModal from "@/components/accountModal";
@@ -2091,12 +2091,18 @@ export default function Home({ }) {
             options = options.sort(() => Math.random() - 0.5)
             setOtherOptions(options)
         } else {
-            function defaultMethod() {
-                console.log("[PERF] loadLocation: Calling findLatLongRandom");
+            async function defaultMethod() {
+                console.log("[PERF] loadLocation: Calling findLatLongRandom (dynamic import)");
                 const startTime = performance.now();
-                findLatLongRandom(gameOptions).then((latLong) => {
+                try {
+                    const { default: findLatLongRandom } = await import("@/components/findLatLong");
+                    console.log(`[PERF] findLatLong module loaded in ${(performance.now() - startTime).toFixed(2)}ms`);
+                    const latLong = await findLatLongRandom(gameOptions);
                     setLatLong(latLong);
-                });
+                } catch (err) {
+                    console.error("[ERROR] Failed to load location:", err);
+                    toast(text("errorLoadingMap"), { type: 'error' });
+                }
             }
             function fetchMethod() {
                 //gameOptions.countryMap && gameOptions.offical
@@ -2166,7 +2172,7 @@ export default function Home({ }) {
                         }
                         defaultMethod()
                     }
-                }).catch((e) => {
+                }).catch(() => {
                     toast(text("errorLoadingMap"), { type: 'error' })
                     defaultMethod()
                 });
@@ -2373,7 +2379,7 @@ export default function Home({ }) {
                 msUserSelect: 'none',
                 pointerEvents: 'none',
             }}>
-                <NextImage.default src={'./street2christmas.jpg'}
+                <NextImage.default src={'./street2.webp'}
                     draggable={false}
                     width={1920}
                     height={1080}
@@ -2422,7 +2428,7 @@ export default function Home({ }) {
 
                 {/* Loading overlay - covers iframe with background image to prevent white flicker */}
                 <div className={`loading-overlay ${loading ? 'loading-overlay--visible' : ''}`}>
-                    <NextImage.default src={'./street2christmas.jpg'}
+                    <NextImage.default src={'./street2.webp'}
                         draggable={false}
                         width={1920}
                         height={1080}

components/maps/mapsModal.js

@@ -117,7 +117,7 @@ export default function MapsModal({ gameOptions, mapModalClosing, setGameOptions
 const styles = {
     // Full-viewport modal wrapper - fixed container, no scrolling
     modalShell: {
-        background: `linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 30, 15, 0.6) 100%), url("/street2christmas.jpg")`,
+        background: `linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 30, 15, 0.6) 100%), url("/street2.webp")`,
         backgroundSize: "cover",
         backgroundPosition: "center",
         boxShadow: "none",

components/settingsModal.js

@@ -31,7 +31,7 @@ export default function SettingsModal({ shown, onClose, options, setOptions, inC
                 maxWidth: '500px',
                 textAlign: 'center',
                 position: "absolute",
-                background: `linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 30, 15, 0.5) 100%), url("/street2christmas.jpg")`,
+                background: `linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 30, 15, 0.5) 100%), url("/street2.webp")`,
                 objectFit: "cover",
                 backgroundSize: "cover",
                 backgroundPosition: "center",

pages/user.js

@@ -242,7 +242,7 @@ export default function UserProfilePage() {
             rgba(20, 26, 57, 0.8) 50%,
             rgba(0, 0, 0, 0.9) 100%
           ),
-          url("/street2christmas.jpg");
+          url("/street2.webp");
           background-size: cover;
           background-position: center;
           background-attachment: fixed;

public/street2.webp

@@ -8,7 +8,7 @@
     rgba(20, 26, 57, 0.8) 50%,
     rgba(0, 0, 0, 0.9) 100%
   ),
-  url("/street2christmas.jpg");
+  url("/street2.webp");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;

styles/Leaderboard.module.css

@@ -8,7 +8,7 @@
     rgba(0, 30, 15, 0.8) 50%,
     rgba(0, 0, 0, 0.9) 100%
   ),
-  url("/street2christmas.jpg");
+  url("/street2.webp");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
@@ -481,7 +481,7 @@
       rgba(0, 20, 10, 0.9) 50%,
       rgba(0, 0, 0, 0.95) 100%
     ),
-    url("/street2christmas.jpg");
+    url("/street2.webp");
   }
 }
 

styles/MapPage.module.css

@@ -26,7 +26,7 @@
         rgba(0, 30, 15, 0.8) 50%,
         rgba(0, 0, 0, 0.9) 100%
     ),
-    url("/street2christmas.jpg");
+    url("/street2.webp");
     background-size: cover;
     background-position: center;
     /* Changed from background-attachment: fixed to position: fixed */
@@ -349,7 +349,7 @@
             rgba(0, 20, 10, 0.9) 50%,
             rgba(0, 0, 0, 0.95) 100%
         ),
-        url("/street2christmas.jpg");
+        url("/street2.webp");
         background-size: cover;
         background-position: center;
     }