Section ini menyusun materi secara bertahap: kerjakan Chapter dari urutan teratas agar setiap konsep baru selalu berpijak pada konsep sebelumnya. Setiap Chapter menyertakan contoh kode yang telah diuji dan dapat Anda ikuti langsung di editor.

# Ukuran Gambar

Perkecil payload halaman lewat gambar seukuran tampil, kompresi ringkas, dan atribut pencegah layout shift.

Buka → # Format Gambar Modern

Pilih webp, avif, atau svg untuk memangkas byte gambar, lalu susun fallback picture agar browser lama tetap terlayani.

Buka → # Lazy Loading

Tunda unduhan gambar dan iframe di bawah layar dengan loading=lazy, dan ketahui kapan eager lebih tepat untuk LCP.

Buka → # Loading Scripts

Susun head yang ramah performa: strategi defer, async, dan module, serta preconnect untuk script pihak ketiga.

Buka → # Mengurangi Markup yang Tidak Perlu

Pangkas div-soup, nesting berlebih, komentar, dan inline style agar dokumen kecil, cepat diurai, dan ringan diunduh.

Buka → # Dasar Performa Halaman

Kenali metrik LCP, CLS, dan INP, petakan teknik HTML yang menggerakkannya, lalu audit halaman dengan Lighthouse.

Buka →