Optimasi Performa Aplikasi Web

Performa penting untuk pengalaman pengguna. Mari bahas teknik optimasi yang praktis.

Core Web Vitals

• LCP (Largest Contentful Paint): kurang dari 2,5 detik.
• FID (First Input Delay): kurang dari 100 milidetik.
• CLS (Cumulative Layout Shift): kurang dari 0,1.

Optimasi Frontend

Pemisahan Kode

Muat bagian aplikasi hanya saat diperlukan:

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}

Optimasi Gambar

Gunakan komponen gambar dengan ukuran serta pemuatan yang sesuai:

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  loading="lazy"
/>

Memoization

Hindari perhitungan ulang yang tidak perlu:

const MemoizedComponent = memo(function ExpensiveComponent({ data }) {
  return <div>{processData(data)}</div>;
});

Optimasi Backend

Cache

Simpan hasil yang sering dibaca agar tidak perlu mengambilnya berulang kali:

// Redis cache example
async function getUser(id: string) {
  const cached = await redis.get(`user:${id}`);
  if (cached) return JSON.parse(cached);

  const user = await db.users.find(id);
  await redis.set(`user:${id}`, JSON.stringify(user), 'EX', 3600);
  return user;
}

Indeks Database

Tambahkan indeks untuk mempercepat pencarian yang sering dilakukan:

CREATE INDEX idx_users_email ON users(email);

Pemantauan

Gunakan alat seperti Lighthouse, WebPageTest, New Relic, dan Sentry.

Kesimpulan

Ukur performa terlebih dahulu, lalu prioritaskan perbaikan yang dampaknya paling besar.