Optimasi Website Nuxt: Dari Lambat Menjadi Ngebut

Ukur Dulu, Optimasi Kemudian

Jangan menebak-nebak. Pasang dulu alat ukur:

• Lighthouse (bawaan Chrome DevTools) untuk skor overall
• PageSpeed Insights untuk data lapangan nyata (field data)
• WebPageTest untuk waterfall request

Optimasi tanpa pengukuran itu seperti minum obat tanpa diagnosis. Kadang sembuh, kadang tambah parah.

Target sehat: LCP < 2,5 detik, INP < 200 ms, dan CLS < 0,1.

Lazy Load Semua yang Bisa

Komponen berat yang tidak langsung terlihat sebaiknya dimuat belakangan. Di Nuxt cukup awali nama komponen dengan Lazy:

<template>
  <div>
    <HeroSection />
    <!-- Baru dimuat saat mendekati viewport -->
    <LazyHeavyChart v-if="showChart" />
  </div>
</template>

Untuk gambar, selalu gunakan atribut loading="lazy" dan tetapkan width/height supaya layout tidak bergeser:

<img src="/screenshot.png" width="1200" height="630" loading="lazy" alt="Contoh" />

Pisahkan Kode Pihak Ketiga

Script pihak ketiga sering jadi penyumbang terbesar JavaScript di halaman. Beberapa aturan mainnya:

Muat Setelah Interaksi

Widget chat, analitik, atau embed video tidak perlu ikut bundle awal. Muat saat pengguna mulai berinteraksi atau setelah halaman tenang (requestIdleCallback).

Gunakan Partytown Jika Perlu

Script berat seperti tag manager bisa dipindahkan ke web worker lewat Partytown sehingga main thread tetap lega.

Manfaatkan Caching Maksimal

Di Nitro, caching route semudah menambahkan properti routeRules:

export default defineNuxtConfig({
  routeRules: {
    '/artikel/**': { swr: 3600 },
    '/images/**': { headers: { 'cache-control': 'public, max-age=31536000, immutable' } }
  }
})

Checklist Akhir

Sebelum deploy, pastikan semua ini sudah diceklis:

1. Font pakai font-display: swap
2. Gambar hero format modern (WebP/AVIF)
3. Tidak ada CSS yang belum dipakai (purge otomatis Tailwind membantu)
4. Bundle analyzer menunjukkan tidak ada dependency raksasa
5. Skor Lighthouse mobile minimal 90+

Optimasi adalah marathon, bukan sprint. Lakukan sedikit-sedikit tapi konsisten di setiap rilis.