Ngapikake Performa Aplikasi Web

Performa penting kanggo pengalaman pangguna. Ayo deleng teknik optimasi sing praktis.

Core Web Vitals

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

Optimasi Frontend

Misahake Kode

Muat bagean aplikasi mung nalika dibutuhake:

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

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

Optimasi Gambar

Gunakake komponen gambar kanthi ukuran lan cara muat sing pas:

import Image from 'next/image';

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

Memoization

Ngindhari ngitung maneh yen ora perlu:

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

Optimasi Backend

Cache

Simpen asil sing kerep diwaca supaya ora kudu njupuk bola-bali:

// 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

Tambah indeks supaya panelusuran sing kerep dilakoni dadi luwih cepet:

CREATE INDEX idx_users_email ON users(email);

Monitoring

Gunakake piranti kaya Lighthouse, WebPageTest, New Relic, lan Sentry.

Kesimpulan

Ukur performa dhisik, banjur utamakake perbaikan sing paling gedhe pengaruhe.