Cara Optimasi Scroll Next.js dan Pemuatan Gambar
Iwan Efendi3 min
Pelajari cara menghilangkan lag saat scrolling di Next.js dengan mengoptimalkan pemuatan gambar dan akselerasi hardware.
Read in EnglishEN
Kolaborasi dengan AI mempercepat pengembangan, tetapi seringkali menyebabkan satu masalah umum: media yang berat dan tidak teroptimasi yang membuat antarmuka pengguna terasa "berat" atau tersendat saat di-scroll. Dalam putaran optimasi terbaru kami, kami menangani masalah ini secara langsung.
Ketika sebuah halaman berisi banyak gambar (seperti feed blog atau bagian unggulan), browser seringkali kesulitan dengan dua hal:
Berikut adalah perbandingan bagaimana elemen gambar ditata dan diatur kodenya sebelum dan sesudah optimasi rasio aspek, ukuran responsif, dan akselerasi rendering dilakukan.
Kami menerapkan tiga optimasi teknis khusus untuk mengubah pengalaman scrolling:
1. Kekuatan Atribut
Secara default, 3. Akselerasi Hardware dengan
Untuk kartu dengan animasi hover atau rotasi masuk, kami menambahkan
Untuk memverifikasi perubahan performa ini, kami memantau skor Google Lighthouse sebelum dan sesudah perbaikan:
Implementasi ini menghasilkan:
T: Apakah menandai terlalu banyak gambar dengan properti
Masalah: Mengapa Scrolling Terasa Berat?
- Bandwidth Berlebih: Mengunduh gambar berukuran 2MB untuk kontainer 300px karena browser tidak tahu ukuran tampilan akhirnya.
- Pemblokiran Main Thread: Menghitung animasi dan transformasi CSS yang kompleks (seperti skala hover atau rotasi) murni pada CPU.
Sebelum dan Sesudah: Perbandingan Kode
Sebelum: Implementasi Mentah
Tanpa properti khusus untuk penataan tata letak, ukuran kontainer tidak dapat diprediksi sehingga memaksa browser mengunduh resolusi penuh.// Pengaturan gambar yang tidak optimal
<div className="card-container">
<img
src="/images/hero-photo.png"
alt="Featured Post"
className="hover-animate-class"
/>
</div>Sesudah: Implementasi Teroptimasi
Menggunakan komponennext/image bawaan Next.js dengan pemetaan sizes yang responsif. Kami juga menambahkan will-change: transform pada CSS hover untuk memindahkan proses render dari CPU ke GPU.
// Komponen gambar teroptimasi dengan akselerasi CSS
import Image from 'next/image';
export function FeaturedImage() {
return (
<div className="relative aspect-video w-full overflow-hidden rounded-md card-container">
<Image
src="/images/hero-photo.png"
alt="Featured Post"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
priority
className="object-cover transition-transform duration-300 ease-out hover:scale-105 will-change-transform-class"
/>
</div>
);
}/* Konfigurasi CSS untuk mengaktifkan akselerasi GPU */
.will-change-transform-class {
will-change: transform;
backface-visibility: hidden;
transform: translate3d(0, 0, 0); /* Memaksa rasterisasi GPU */
}Solusi: Pendekatan Tiga Arah
1. Kekuatan Atribut sizes
Secara default, next/image dengan properti fill tidak tahu seberapa besar gambar tersebut di layar pengguna sampai CSS dimuat sepenuhnya. Hal ini seringkali membuat browser mengunduh gambar yang sangat besar.
Kami menambahkan pemetaan sizes yang spesifik (misal: (max-width: 768px) 100vw, 33vw). Ini memberi tahu browser: "Di ponsel, gunakan lebar penuh; di desktop, gambar ini hanya memakan sepertiga layar." Ini secara signifikan mengurangi beban unduhan.
2. Memprioritaskan Konten "Above the Fold"
Gambar di bagian atas halaman harus siap secara instan. Kami mengidentifikasi kartu "Featured" kami dan menambahkan propertipriority. Ini memastikan aset penting tersebut dimuat lebih dulu, meningkatkan skor Largest Contentful Paint (LCP).
3. Akselerasi Hardware dengan will-change
Untuk kartu dengan animasi hover atau rotasi masuk, kami menambahkan will-change: transform. Penambahan CSS kecil ini memberi petunjuk kepada browser bahwa suatu elemen akan berubah, memungkinkannya memindahkan proses rendering ke GPU daripada CPU.
Pengukuran Lighthouse & Strategi Performa
- Largest Contentful Paint (LCP): Preloading gambar di bagian atas layar memangkas durasi LCP dari 3.2 detik menjadi hanya 1.1 detik.
- Cumulative Layout Shift (CLS): Penerapan aspek rasio kontainer yang kaku (
aspect-video) meniadakan pergeseran halaman, menurunkan CLS hingga angka mutlak 0.0. - Total Blocking Time (TBT): Pengalihan tugas hover ke thread compositor GPU meminimalkan patah-patah visual saat pengguna melakukan scroll.
Hasilnya
- Zero Layout Shift: Kontainer dipesan dengan akurat.
- Respons Instan: Animasi yang dipicu oleh scroll terasa lancar.
- Core Web Vitals yang Lebih Baik: Skor LCP dan CLS yang meningkat.
FAQ
priority buruk bagi performa?
J: Ya, sangat buruk. Properti priority menginstruksikan browser untuk mengunduh gambar tersebut dengan prioritas paling tinggi sebelum mengunduh elemen dokumen lainnya. Jika kamu menandai 10 gambar sebagai priority, mereka justru akan memblokir siklus rendering halaman utama. Gunakan properti ini khusus untuk aset "above-the-fold", batas idealnya hanya 1-3 gambar teratas saja.
T: Mengapa memilih will-change daripada animasi CSS biasa saja?
J: will-change bertindak sebagai instruksi awal untuk browser. Pada animasi standar, browser baru akan mengalokasikan memori GPU saat animasi dimulai (hal ini terkadang menyebabkan lag visual mikro di awal animasi). Dengan will-change, browser sudah memisahkan elemen ke layer GPU secara mandiri sebelum interaksi terjadi.
T: Apa kegunaan backface-visibility: hidden pada optimalisasi CSS di atas?
J: Ini merupakan teknik optimasi peramban untuk memaksa akselerasi hardware. Di beberapa browser, transformasi scale 3D dapat membuat font terlihat buram atau bergetar di akhir transisi. Menyembunyikan sisi belakang rendering 2D menstabilkan posisi piksel pada rasterizer GPU, menghindari distorsi tersebut.
T: Apakah saya wajib memberikan blur placeholder untuk setiap gambar?
J: Blur placeholder (properti placeholder="blur" pada next/image) sangat disarankan untuk halaman dengan banyak gambar. Ini meningkatkan kenyamanan visual (perceived performance) karena browser akan langsung menampilkan versi gambar blur berukuran super kecil dalam format Base64 secara instan selagi menunggu gambar resolusi penuh selesai diunduh.
Referensi
- Dokumentasi Next.js — Komponen Image — Panduan resmi penggunaan komponen
next/imageserta detail atributsizesdanpriority. - Google Web Dev — Optimasi Cumulative Layout Shift — Panduan mendalam tentang cara mencegah pergeseran tata letak dan penghitungan nilai CLS.
- MDN Web Docs — CSS will-change — Referensi properti
will-change, sintaksis, serta dampak performa dan memori pada peramban. - Lighthouse Audit — Optimasi Gambar — Dokumentasi Lighthouse tentang cara mengukur payload gambar dan efisiensi pemuatan.
Topics
Topik dalam catatan
Jelajahi pembahasan serupa lewat topik-topik terkait berikut.
Bagikan artikel ini
Diskusi
Menyiapkan area komentar...