diff --git a/public/js/app.js b/public/js/app.js
index 7df6d18..65e78fe 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -845,9 +845,7 @@
           geoIndex: 0,
           symbolSize: 5,
           itemStyle: {
-            color: '#06b6d4',
-            shadowBlur: 3,
-            shadowColor: 'rgba(6, 182, 212, 0.5)'
+            color: '#06b6d4'
           },
           data: []
         }]
@@ -945,9 +943,7 @@
         geoIndex: 0,
         symbolSize: 6,
         itemStyle: {
-          color: '#06b6d4',
-          shadowBlur: 3,
-          shadowColor: 'rgba(6, 182, 212, 0.5)'
+          color: '#06b6d4'
         },
         data: geoData,
         zlevel: 1,
@@ -1047,14 +1043,14 @@
               effect: {
                 show: true,
                 period: period,
-                trailLength: 0.1,
-                color: 'rgba(99, 102, 241, 0.8)',
-                symbol: 'arrow',
-                symbolSize: 6
+                trailLength: 0.05, // Shorter trail = less GPU pixels to process
+                color: 'rgba(99, 102, 241, 0.6)',
+                symbol: 'circle', // Simpler symbol than arrow
+                symbolSize: 4 // Smaller symbol
               },
               lineStyle: {
-                color: 'rgba(99, 102, 241, 0.3)',
-                width: 2,
+                color: 'rgba(99, 102, 241, 0.2)',
+                width: 1.5,
                 curveness: finalCurve
               },
               progressive: 50, // Progressive rendering for GPU offload
diff --git a/public/js/chart.js b/public/js/chart.js
index 31be154..4105fc0 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -64,8 +64,8 @@ class AreaChart {
     // Smoothly transition max value context too
     this.prevMaxVal = this.currentMaxVal || 0;
 
-    // Downsample if data is too dense (target ~1500 points for performance)
-    const MAX_POINTS = 1500;
+    // Downsample if data is too dense (target ~500 points for GPU performance)
+    const MAX_POINTS = 500;
     if (data.timestamps.length > MAX_POINTS) {
       const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
       const downsampled = { timestamps: [], rx: [], tx: [] };
@@ -112,7 +112,7 @@ class AreaChart {
   animate() {
     if (this.animFrame) cancelAnimationFrame(this.animFrame);
     const start = performance.now();
-    const duration = 800;
+    const duration = 400; // Shorter animation = less GPU time
 
     const step = (now) => {
       const elapsed = now - start;
@@ -277,7 +277,7 @@ class AreaChart {
   drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
     if (!values || values.length === 0) return;
 
-    const useSimple = len > 250;
+    const useSimple = len > 80;
     const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
 
     // Fill
@@ -407,7 +407,7 @@ class MetricChart {
   animate() {
     if (this.animFrame) cancelAnimationFrame(this.animFrame);
     const start = performance.now();
-    const duration = 500;
+    const duration = 300; // Snappier and lighter on GPU
     const step = (now) => {
       const elapsed = now - start;
       this.animProgress = Math.min(elapsed / duration, 1);
@@ -560,7 +560,7 @@ class MetricChart {
       });
 
     } else {
-      const useSimple = len > 250;
+      const useSimple = len > 100;
       const prevVals = this.prevData ? this.prevData.values : null;
       const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;