Optimization & Performance
Mengoptimalkan aplikasi Next.js untuk kecepatan maksimal dan SEO yang luar biasa.
1. Image Optimization
Komponen <Image /> di Next.js secara otomatis menangani resizing, lazy loading, dan format modern (seperti WebP/AVIF).
import Image from 'next/image'
export default function Banner() {
return (
<Image
src="/hero.jpg"
alt="Hero Banner"
width={1200}
height={600}
priority // Muat lebih awal untuk LCP
className="rounded-xl"
/>
)
}2. Font Optimization
next/font mendownload font Google secara lokal saat build-time. Ini menghilangkan layout shift dan tidak ada request font ke luar.
Zero Layout Shift
Next.js menggunakan variabel CSS untuk memastikan browser tahu ukuran font sebelum font selesai dimuat.
3. Metadata API (SEO)
Next.js mempermudah pengelolaan SEO dengan Metadata API. Cukup export objek metadata di layout.tsx atau page.tsx.
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'My Awesome Site',
description: 'Membangun masa depan dengan Next.js',
openGraph: {
images: ['/og-image.jpg'],
},
}Interactive Demo: Performance Analyzer
Lihat bagaimana teknik optimasi Next.js mempengaruhi skor performa secara langsung.
Optimization Toggles
Masih ada ruang untuk perbaikan. Aktifkan fitur Next.js untuk mempercepat halaman Anda.
Core Web Vitals
Next.js dirancang untuk membantu Anda mendapatkan skor 100 di Lighthouse dengan sedikit usaha. Gunakan alat ini untuk memantau performa Anda.