Optimization & Deploy · Modul 20 dari 23

Optimasi Media: Image, Font, Script & Dynamic Imports

Mencapai nilai Core Web Vitals 100 dengan next/image, next/font, next/script, dan Code Splitting dynamic().

🎯 Poin-Poin Utama Modul Ini:

Komponen <Image> otomatis mengubah format ke AVIF/WebP, resizing, & mencegah Layout Shift (CLS)
next/font mengunduh Google Fonts secara otomatis saat waktu build (Zero Cumulative Layout Shift)
dynamic() untuk Lazy Loading komponen berat berbasis Client

🚀 Teknik Optimasi Performa Next.js 16

Next.js menyediakan komponen optimasi otomatis untuk memastikan skor Google Lighthouse (LCP, CLS, INP) mencapai hasil terbaik.

💻 Contoh Lazy Loading dengan dynamic()

components/EventMap.tsx

import dynamic from "next/dynamic";

// Memuat komponen peta berat hanya di sisi client saat dibutuhkan
const LeafletMap = dynamic(() => import("@/components/LeafletMap"), {
  ssr: false,
  loading: () => <p>Memuat Peta...</p>,
});

export default function EventLocation() {
  return <LeafletMap />;
}