Cara Practice Performance Optimization dengan Claude Code

Practice Performance Optimization with Claude Code

Performance issues in web applications are hard to diagnose and require specialized knowledge to fix. Claude Code handles everything from code analysis to concrete improvement suggestions and implementation.

Frontend Optimization

Bundle Size Analysis and Reduction

> Analyze the bundle size and identify large packages.
> Remove unnecessary imports and optimize tree-shaking.

// Sebelum fix: importing the entire library
import _ from "lodash";
const result = _.groupBy(data, "category");

// Setelah fix: import only the needed function
import groupBy from "lodash/groupBy";
const result = groupBy(data, "category");

React Re-Render Optimization

> Identify and fix unnecessary re-renders in this component.

// Sebelum fix: a new object is created on every render
function Dashboard({ userId }: { userId: string }) {
  const filters = { userId, status: "active" };
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

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

// Setelah fix: stabilize the reference with useMemo
function Dashboard({ userId }: { userId: string }) {
  const filters = useMemo(
    () => ({ userId, status: "active" as const }),
    [userId]
  );
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

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

Image Optimization

> Optimize image loading.
> Apply Next.js Image component, lazy loading,
> and appropriate sizing.

import Image from "next/image";

// Sebelum fix
<img src="/hero.png" />

// Setelah fix
<Image
  src="/hero.png"
  alt="Hero image"
  width={1200}
  height={600}
  priority  // Use priority for above-the-fold images
  sizes="(max-width: 768px) 100vw, 1200px"
/>

Backend Optimization

Eliminating N+1 Queries

> Analyze the database queries and fix N+1 problems.

// Sebelum fix: N+1 queries
const posts = await prisma.post.findMany();
for (const post of posts) {
  post.author = await prisma.user.findUnique({
    where: { id: post.authorId },
  });
  post.comments = await prisma.comment.findMany({
    where: { postId: post.id },
  });
}

// Setelah fix: eager loading
const posts = await prisma.post.findMany({
  include: {
    author: { select: { id: true, name: true, avatar: true } },
    comments: {
      take: 5,
      orderBy: { createdAt: "desc" },
    },
    _count: { select: { comments: true } },
  },
});

Implementing a Cache Strategy

> Add a Redis cache layer.
> Apply it to frequently accessed endpoints.

import Redis from "ioredis";

const redis = new Redis(process.env.REDIS_URL);

async function getCachedData<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttlSeconds = 300
): Promise<T> {
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  const data = await fetcher();
  await redis.set(key, JSON.stringify(data), "EX", ttlSeconds);
  return data;
}

// Usage example
app.get("/api/popular-posts", async (req, res) => {
  const posts = await getCachedData(
    "popular-posts",
    () => prisma.post.findMany({
      orderBy: { viewCount: "desc" },
      take: 20,
    }),
    600 // 10-minute cache
  );
  res.json({ data: posts });
});

Algorithm Improvement

> Analyze the time complexity of this function and improve it.

// Sebelum fix: O(n^2)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  return arr1.filter(item => arr2.includes(item));
}

// Setelah fix: O(n + m)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  const set2 = new Set(arr2);
  return arr1.filter(item => set2.has(item));
}

Improving Core Web Vitals

> Identify and implement the changes needed
> to improve Core Web Vitals (LCP, FID, CLS).

For debugging-oriented analysis techniques, see the Complete Debugging Guide. For React-specific optimizations, also check out How to Supercharge React Development.

Setting Performance Rules in CLAUDE.md

## Performance Rules
- Do not write N+1 queries (use include)
- Do not import all of lodash (use individual imports only)
- Use next/image for images
- Set cache headers on API responses

For general productivity tips, also see 10 Tips to Triple Your Productivity.

Summary

Claude Code can handle everything from analyzing performance issues to implementing concrete improvements. Whether it’s reducing frontend bundle sizes, optimizing backend queries, or implementing caching strategies, take a multi-faceted approach to achieve faster performance.

For performance measurement details, refer to web.dev. For Claude Code, see the official Anthropic documentation.