DEV Community: Haris Siddiqui

React Performance Optimization: How I Reduced Load Time by 20%

Haris Siddiqui — Tue, 09 Sep 2025 11:28:39 +0000

The Problem

During my time as a ReactJS Frontend Developer, I inherited a React application that was frustratingly slow. Users were complaining about long loading times, and our bounce rate was climbing. The stakeholders gave me a clear challenge: "Make it faster, or we'll consider a complete rewrite."

The numbers were brutal:

Initial load time: ~4.2 seconds
Time to Interactive (TTI): ~6.8 seconds
Bundle size: 2.1 MB
Lighthouse Performance Score: 34/100

After implementing the strategies I'll share below, we achieved:

Load time: 3.1 seconds (26% improvement)
TTI: 4.9 seconds (28% improvement)
Bundle size: 1.4 MB (33% reduction)
Lighthouse Score: 78/100 (129% improvement)

Let me walk you through exactly how we did it.

Step 1: Measure First, Optimize Second

Before touching any code, I established baseline metrics using multiple tools:

# Install performance monitoring tools
npm install --save-dev webpack-bundle-analyzer
npm install --save-dev lighthouse

Measurement Setup:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other config
  plugins: [
    process.env.ANALYZE && new BundleAnalyzerPlugin()
  ].filter(Boolean)
};

// package.json
{
  "scripts": {
    "analyze": "ANALYZE=true npm run build"
  }
}

Key insight: You can't improve what you don't measure. The bundle analyzer immediately showed that our largest chunk was a charting library we barely used.

Step 2: Code Splitting and Lazy Loading

The biggest win came from splitting our monolithic bundle:

Before:

// App.js - Everything imported upfront
import Dashboard from './components/Dashboard';
import Analytics from './components/Analytics';
import Reports from './components/Reports';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/reports" element={<Reports />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Router>
  );
}

After:

// App.js - Lazy load route components
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./components/Dashboard'));
const Analytics = lazy(() => import('./components/Analytics'));
const Reports = lazy(() => import('./components/Reports'));
const Settings = lazy(() => import('./components/Settings'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div className="loading-spinner">Loading...</div>}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/analytics" element={<Analytics />} />
          <Route path="/reports" element={<Reports />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

Result: Initial bundle size reduced from 2.1MB to 1.2MB immediately.

Step 3: Component-Level Optimizations

Memoization Strategy

I identified components that were re-rendering unnecessarily:

// Before - Re-renders on every parent update
const UserCard = ({ user, onEdit }) => {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <button onClick={() => onEdit(user.id)}>Edit</button>
    </div>
  );
};

// After - Only re-renders when user data changes
const UserCard = React.memo(({ user, onEdit }) => {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <button onClick={() => onEdit(user.id)}>Edit</button>
    </div>
  );
}, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id && 
         prevProps.user.name === nextProps.user.name;
});

useMemo for Expensive Calculations

// Before - Recalculated on every render
const Dashboard = ({ data }) => {
  const processedData = data.map(item => ({
    ...item,
    calculations: heavyCalculation(item)
  }));

  return <Chart data={processedData} />;
};

// After - Only recalculated when data changes
const Dashboard = ({ data }) => {
  const processedData = useMemo(() => 
    data.map(item => ({
      ...item,
      calculations: heavyCalculation(item)
    })), [data]
  );

  return <Chart data={processedData} />;
};

Step 4: Image Optimization

Images were a major bottleneck. Here's what worked:

// Custom hook for progressive image loading
const useProgressiveImage = (src) => {
  const [loading, setLoading] = useState(true);
  const [imgSrc, setImgSrc] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      setImgSrc(src);
      setLoading(false);
    };
    img.src = src;
  }, [src]);

  return { loading, imgSrc };
};

// Component usage
const ImageComponent = ({ src, placeholder, alt }) => {
  const { loading, imgSrc } = useProgressiveImage(src);

  return (
    <div className="image-container">
      {loading ? (
        <img src={placeholder} alt={alt} className="placeholder" />
      ) : (
        <img src={imgSrc} alt={alt} className="loaded" />
      )}
    </div>
  );
};

Step 5: API Call Optimization

Request Deduplication

// Custom hook to prevent duplicate API calls
const useApiCall = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const requestCache = useRef(new Map());

  const fetchData = useCallback(async () => {
    if (requestCache.current.has(url)) {
      return requestCache.current.get(url);
    }

    setLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();

      requestCache.current.set(url, result);
      setData(result);
      return result;
    } catch (error) {
      console.error('API call failed:', error);
    } finally {
      setLoading(false);
    }
  }, [url]);

  return { data, loading, fetchData };
};

Data Prefetching

// Prefetch data for likely next pages
const Dashboard = () => {
  const { data: currentData } = useApiCall('/api/dashboard');

  useEffect(() => {
    // Prefetch analytics data (user likely to visit next)
    const timer = setTimeout(() => {
      fetch('/api/analytics').then(response => response.json());
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  return <DashboardContent data={currentData} />;
};

Step 6: Bundle Optimization

Tree Shaking Improvements

// Before - Importing entire library
import _ from 'lodash';
import moment from 'moment';

// After - Import only what you need
import { debounce, throttle } from 'lodash';
import dayjs from 'dayjs'; // Smaller alternative to moment

Dynamic Imports for Heavy Libraries

// Load heavy chart library only when needed
const ChartComponent = ({ data }) => {
  const [ChartLibrary, setChartLibrary] = useState(null);

  useEffect(() => {
    import('react-chartjs-2').then((module) => {
      setChartLibrary(() => module.Line);
    });
  }, []);

  if (!ChartLibrary) {
    return <div>Loading chart...</div>;
  }

  return <ChartLibrary data={data} />;
};

Step 7: Service Worker Implementation

// public/sw.js - Basic caching strategy
const CACHE_NAME = 'app-v1';
const urlsToCache = [
  '/',
  '/static/css/main.css',
  '/static/js/main.js'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Measuring the Impact

Performance Monitoring Setup:

// utils/performance.js
export const measureComponentPerformance = (componentName) => {
  return function(WrappedComponent) {
    return function MeasuredComponent(props) {
      useEffect(() => {
        const startTime = performance.now();

        return () => {
          const endTime = performance.now();
          console.log(`${componentName} render time: ${endTime - startTime}ms`);
        };
      });

      return <WrappedComponent {...props} />;
    };
  };
};

// Usage
export default measureComponentPerformance('Dashboard')(Dashboard);

The Results

After implementing these optimizations over 3 weeks:

Metric	Before	After	Improvement
Load Time	4.2s	3.1s	26% faster
Time to Interactive	6.8s	4.9s	28% faster
Bundle Size	2.1MB	1.4MB	33% smaller
Lighthouse Score	34/100	78/100	129% better

Key Lessons Learned

Measure everything - You can't optimize what you can't see
Start with the biggest wins - Code splitting gave us immediate 40% bundle reduction
Don't over-optimize - Some micro-optimizations aren't worth the complexity
User experience matters most - Sometimes a loading spinner is better than a frozen UI

Tools That Made the Difference

React DevTools Profiler - Identifying slow components
Webpack Bundle Analyzer - Visualizing bundle composition
Chrome DevTools - Network and performance analysis
Lighthouse CI - Automated performance testing

What's Next?

Implementing React 18's concurrent features
Exploring React Server Components
Adding more sophisticated caching strategies
A/B testing different loading patterns

Performance optimization is a journey, not a destination. The techniques above got us significant improvements, but there's always more to discover.

What performance challenges are you facing in your React apps? Share your experiences in the comments!

Building Smart Web Automation Bots with Playwright and OpenAI

Haris Siddiqui — Mon, 08 Sep 2025 15:53:16 +0000

Building Smart Web Automation Bots with Playwright and OpenAI API

A practical guide to creating AI-powered bots that can understand and interact with web pages intelligently

Introduction

As a Full Stack Developer working with modern web technologies, I've discovered that combining Playwright's powerful browser automation with OpenAI's intelligence creates incredibly versatile bots. In this tutorial, I'll show you how to build an AI bot that can navigate websites, extract information, and make intelligent decisions based on what it "sees."

What We'll Build

By the end of this tutorial, you'll have created a bot that can:

Navigate to any website automatically
Take screenshots and analyze page content
Use AI to understand what's on the page
Make decisions about what actions to take next
Extract specific information intelligently

Prerequisites

Basic knowledge of JavaScript/Node.js
Familiarity with async/await
An OpenAI API key (free tier works fine)

Setting Up the Project

1. Initialize the Project

mkdir ai-playwright-bot
cd ai-playwright-bot
npm init -y

2. Install Dependencies

npm install playwright openai dotenv
npx playwright install

3. Create Environment Variables

Create a .env file:

OPENAI_API_KEY=your_openai_api_key_here

Building the Core Bot

Step 1: Basic Setup

Create bot.js:

const { chromium } = require('playwright');
const OpenAI = require('openai');
require('dotenv').config();

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

class AIBot {
  constructor() {
    this.browser = null;
    this.page = null;
  }

  async initialize() {
    this.browser = await chromium.launch({ headless: false });
    this.page = await this.browser.newPage();
    console.log('🤖 Bot initialized');
  }

  async close() {
    if (this.browser) {
      await this.browser.close();
      console.log('🔴 Bot closed');
    }
  }
}

Step 2: Adding AI Vision

async analyzePageContent(instruction) {
  // Take a screenshot
  const screenshot = await this.page.screenshot({ 
    fullPage: true,
    type: 'png'
  });

  // Get page text content
  const textContent = await this.page.evaluate(() => {
    return document.body.innerText.substring(0, 2000); // Limit for API
  });

  // Send to OpenAI for analysis
  const response = await openai.chat.completions.create({
    model: "gpt-4-vision-preview",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "text",
            text: `Analyze this webpage and ${instruction}. 
                   Here's the text content: ${textContent}`
          },
          {
            type: "image_url",
            image_url: {
              url: `data:image/png;base64,${screenshot.toString('base64')}`
            }
          }
        ]
      }
    ],
    max_tokens: 500
  });

  return response.choices[0].message.content;
}

Step 3: Smart Navigation

async navigateAndAnalyze(url, task) {
  await this.page.goto(url);
  console.log(`📍 Navigated to: ${url}`);

  // Wait for page to load
  await this.page.waitForLoadState('networkidle');

  // Analyze the page
  const analysis = await this.analyzePageContent(task);
  console.log('🧠 AI Analysis:', analysis);

  return analysis;
}

async smartClick(description) {
  // Get all clickable elements
  const elements = await this.page.$$('button, a, [onclick], input[type="submit"]');

  let bestMatch = null;
  let highestScore = 0;

  for (const element of elements) {
    const text = await element.textContent();
    const elementInfo = `Text: "${text}" Tag: ${await element.tagName()}`;

    // Ask AI to score this element
    const prompt = `Rate from 0-10 how well this element matches "${description}": ${elementInfo}. Respond with just the number.`;

    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: prompt }],
      max_tokens: 5
    });

    const score = parseInt(response.choices[0].message.content);

    if (score > highestScore) {
      highestScore = score;
      bestMatch = element;
    }
  }

  if (bestMatch && highestScore > 6) {
    await bestMatch.click();
    console.log(`✅ Clicked element with score: ${highestScore}`);
    return true;
  }

  console.log('❌ No suitable element found');
  return false;
}

Step 4: Putting It All Together

async runBot() {
  try {
    await this.initialize();

    // Example: Analyze a news website
    const analysis = await this.navigateAndAnalyze(
      'https://news.ycombinator.com',
      'find the most interesting tech story and summarize it'
    );

    console.log('Final Analysis:', analysis);

  } catch (error) {
    console.error('Bot error:', error);
  } finally {
    await this.close();
  }
}

// Usage
const bot = new AIBot();
bot.runBot();

Real-World Use Cases

1. Content Monitoring Bot

Monitor competitor websites for changes:

async monitorCompetitor(url) {
  const analysis = await this.navigateAndAnalyze(url, 
    'identify any new products, pricing changes, or important announcements'
  );

  // Store results, send alerts, etc.
  return analysis;
}

2. Form Filling Bot

Intelligently fill out forms:

async smartFillForm(formData) {
  const fields = await this.page.$$('input, select, textarea');

  for (const field of fields) {
    const fieldInfo = await field.getAttribute('name') || 
                     await field.getAttribute('placeholder') ||
                     await field.getAttribute('id');

    // Ask AI which data field matches this form field
    const matchingData = await this.findMatchingData(fieldInfo, formData);

    if (matchingData) {
      await field.fill(matchingData);
    }
  }
}

Performance Optimization Tips

Cache AI responses for similar page elements
Use text analysis before image analysis when possible
Implement retry logic for network failures
Set reasonable timeouts for page operations

Error Handling Best Practices

async safeExecute(operation, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await operation();
    } catch (error) {
      console.log(`Attempt ${i + 1} failed:`, error.message);
      if (i === maxRetries - 1) throw error;
      await this.page.waitForTimeout(1000 * (i + 1)); // Exponential backoff
    }
  }
}

Ethical Considerations

Always respect robots.txt files
Implement reasonable delays between requests
Don't overload servers with rapid requests
Respect website terms of service
Use for legitimate automation, not malicious purposes

Next Steps

Add support for multiple AI models
Implement more sophisticated decision trees
Create a web dashboard for monitoring bots
Add database integration for storing results
Build in natural language command processing

Conclusion

Combining Playwright with AI creates powerful automation possibilities. This approach opens up new ways to interact with the web programmatically, making bots that can adapt and think rather than just follow rigid scripts.

The key is starting simple and gradually adding intelligence. As you build more bots, you'll discover patterns that can be abstracted into reusable components.

What kind of AI-powered automation are you excited to build? Share your ideas in the comments!