diff --git a/public/app.js b/public/app.js
index 139f0ff..14cd9b9 100644
--- a/public/app.js
+++ b/public/app.js
@@ -64,6 +64,7 @@ async function loadCameras() {
 function renderLiveGrid() {
     const grid = document.getElementById('grid');
     grid.innerHTML = '';
+    const tiles = [];
     for (let i = 0; i < 8; i++) {
         const cam = cameras[i];
         const tile = document.createElement('div');
@@ -71,25 +72,38 @@ function renderLiveGrid() {
         tile.dataset.camId = cam ? cam.id : '';
 
         if (cam && cam.enabled) {
-            // go2rtc snapshot endpoint — refresh every 2 seconds for live preview.
             const snapshotURL = `http://${location.hostname}:1984/api/frame.jpeg?src=${cam.id}_sub`;
             tile.innerHTML = `
-                <img src="${snapshotURL}" class="grid-snap" onerror="this.style.display='none'"
-                     style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0" alt="${cam.name}">
-                <span class="tile-status ${cam.online ? 'online' : 'offline'}"></span>
+                <img src="" class="grid-snap" onerror="this.parentElement.classList.add('offline')"
+                     style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0" alt="${cam.name}" loading="lazy">
+                <span class="tile-status online"></span>
                 <span class="tile-label">${cam.name}</span>
             `;
-            // Auto-refresh snapshot.
-            setInterval(() => {
-                const img = tile.querySelector('img');
-                if (img) img.src = snapshotURL + '&t=' + Date.now();
-            }, 2000);
             tile.addEventListener('click', () => openFocus(cam));
+            tiles.push({ tile, url: snapshotURL, cam });
         } else {
             tile.innerHTML = '<span class="tile-placeholder">No Camera</span>';
         }
         grid.appendChild(tile);
     }
+
+    // Stagger snapshot loading — one every 300ms to avoid flooding go2rtc.
+    let idx = 0;
+    function loadNext() {
+        if (idx >= tiles.length) return;
+        const { tile, url } = tiles[idx];
+        const img = tile.querySelector('img');
+        if (img) {
+            img.src = url + '&t=' + Date.now();
+            // Refresh this tile every 3 seconds (staggered per camera).
+            setInterval(() => {
+                img.src = url + '&t=' + Date.now();
+            }, 3000 + idx * 200);
+        }
+        idx++;
+        setTimeout(loadNext, 300);
+    }
+    loadNext();
 }
 
 // ── Focus Overlay ──