Optimasi Gambar & Font dalam React
Gunakan next/image atau yang dimuat malas dengan dimensi, format (AVIF/WebP), dan font-display yang benar.
Optimasi Gambar & Font dalam React adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.
Mengapa Gambar Sangat Penting
Gambar biasanya merupakan sumber daya terbesar di halaman. Gambar yang tidak dioptimalkan menyebabkan LCP buruk, pemuatan halaman lambat, dan biaya bandwidth tinggi—terutama di perangkat seluler.
Komponen Gambar Next.js
next/image mengoptimalkan gambar secara otomatis: pemuatan malas secara default, srcSet responsif, format modern (WebP/AVIF), dan dimensi yang tepat untuk mencegah CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Pemuatan Malas dalam React Biasa
Tambahkan loading='lazy' ke elemen native <img>. Browser menunda pemuatan gambar di luar layar hingga gambar tersebut hampir masuk ke area pandang saat pengguna menggulir.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Format Gambar Modern
Sajikan WebP atau AVIF, bukan JPEG/PNG. AVIF berukuran 50% lebih kecil daripada JPEG dengan kualitas yang sama. Gunakan elemen <picture> untuk negosiasi format dengan fallback.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Gambar Responsif dengan srcSet
Sediakan beberapa ukuran agar browser memilih resolusi yang sesuai untuk layar, sehingga browser tidak perlu mengunduh gambar 2000px untuk layar seluler berukuran 400px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Placeholder Blurhash / Skeleton
Tampilkan placeholder buram saat gambar dimuat untuk mencegah pergeseran tata letak dan meningkatkan performa yang dirasakan.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Strategi Pemuatan Font
Font dapat memblokir proses render. Gunakan font-display: swap untuk menampilkan font fallback saat font khusus dimuat, sehingga FOIT (Flash of Invisible Text) berkurang.
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Optimasi Font Next.js
next/font memuat Google Fonts saat build, meng-host-nya sendiri, dan menerapkan font-display: optional untuk menghilangkan CLS akibat pergantian font.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Membuat Subset Font
Muat hanya subset karakter yang Anda perlukan. Font Unicode lengkap dapat berukuran lebih dari 1MB; subset Latin biasanya berukuran 30–80KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Memuat Awal Font Kritis
Muat awal font yang digunakan di bagian atas halaman agar font tersebut dimuat secara paralel dengan penguraian HTML, sehingga waktu pemblokiran render berkurang.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN dan Penyimpanan Cache
Sajikan gambar dan font dari CDN dengan TTL cache yang panjang (Cache-Control: max-age=31536000, immutable). Nama file yang mengandung hash konten memastikan file terbaru melewati cache.
Pemeriksaan Cepat
Apa fungsi font-display: swap pada font web?
Ringkasan
Gunakan next/image untuk optimasi otomatis, atau loading='lazy' + srcSet native untuk React biasa. Sajikan AVIF/WebP dengan fallback <picture>. Terapkan font-display: swap untuk font web, gunakan next/font untuk meng-host Google Fonts sendiri, dan muat awal sumber daya penting di bagian atas halaman.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Optimasi Gambar & Font dalam React” gratis?
Ya — teks lengkap “Optimasi Gambar & Font dalam React” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Optimasi Gambar & Font dalam React”?
Gunakan next/image atau yang dimuat malas dengan dimensi, format (AVIF/WebP), dan font-display yang benar. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai React Academy?
Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Optimasi Gambar & Font dalam React” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengukur Core Web Vitals dalam Aplikasi React
- Analisis Bundel & Strategi Pemisahan Kode
- Optimasi Gambar & Font dalam React
- Mengurangi INP: Optimasi Penangan Event