Performance Issues Troubleshooting

# Test your internet speed
ping google.com
# Should show < 100ms latency for optimal performance

# Test bandwidth
curl -o /dev/null -w "%{speed_download}\n" http://speedtest.tele2.net/10MB.zip
# Should show > 5 Mbps for good performance

// Open browser developer tools (F12)
// Go to Network tab and reload page
// Look for:
// - Long TTFB (Time to First Byte) > 1s
// - Large asset sizes > 1MB
// - Failed requests (red entries)

// In browser console, run:
performance.getEntriesByType('navigation')[0].domContentLoadedEventEnd
// Should be < 3000ms for good performance

-- Example of optimized vs unoptimized queries
-- Slow: SELECT * FROM tenders WHERE description LIKE '%keyword%'
-- Fast: SELECT * FROM tenders WHERE MATCH(description) AGAINST('keyword')

// Enable query logging in development
console.time('tender-search');
await searchTenders({ query: 'construction' });
console.timeEnd('tender-search');
// Should complete in < 2s for typical searches

// Check memory usage
console.log('Used JS Heap:', performance.memory.usedJSHeapSize / 1048576, 'MB');
console.log('Total JS Heap:', performance.memory.totalJSHeapSize / 1048576, 'MB');

// Monitor for memory leaks
setInterval(() => {
  console.log('Memory:', performance.memory.usedJSHeapSize / 1048576, 'MB');
}, 5000);

// Take heap snapshots in browser dev tools
// Compare snapshots over time
// Look for:
// - Increasing object counts
// - Large detached DOM trees
// - Uncleared event listeners

// Use dynamic imports for large components
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Implement route-based code splitting
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./Dashboard'))
  }
];

<!-- Use appropriate image formats -->
<img 
  src="image.webp" 
  loading="lazy"
  width="800"
  height="600"
  alt="Description"
/>

<!-- Use srcset for responsive images -->
<img 
  srcset="image-320w.jpg 320w,
          image-640w.jpg 640w,
          image-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 50vw"
  src="image-640w.jpg"
  alt="Description"
/>

// Use React.memo for expensive components
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* expensive computation */}</div>;
});

// Use useMemo for expensive calculations
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(data);
}, [data]);

// Use useCallback for stable function references
const handleClick = useCallback(() => {
  doSomething(data);
}, [data]);

-- Use indexes effectively
CREATE INDEX idx_tenders_date ON tenders(closing_date);
CREATE INDEX idx_tenders_category ON tenders(category_id);

-- Optimize JOIN operations
SELECT t.*, c.name as category_name
FROM tenders t
INNER JOIN categories c ON t.category_id = c.id
WHERE t.closing_date > NOW()
ORDER BY t.created_at DESC
LIMIT 50;

// Implement Redis caching
const redis = require('redis');
const client = redis.createClient();

// Cache frequently accessed data
async function getCachedTenders() {
  const cacheKey = 'tenders:recent';
  const cached = await client.get(cacheKey);
  
  if (cached) {
    return JSON.parse(cached);
  }
  
  const tenders = await fetchTendersFromDB();
  await client.setex(cacheKey, 300, JSON.stringify(tenders)); // 5 min cache
  return tenders;
}

// Enable performance monitoring
window.performanceMonitoring = true;

// View performance metrics
console.log('Page Load Time:', performance.timing.loadEventEnd - performance.timing.navigationStart);
console.log('DOM Ready Time:', performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart);