Belajar HTML - Optimasi Performa HTML dan Aksesibilitas Mobile

#Pendahuluan

Di jaringan seluler, setiap kilobyte dan setiap permintaan bernilai. Episode 21 membahas optimasi performa HTML dan aksesibilitas mobile: preconnect dan preload, pemuatan skrip dengan defer dan async, gambar dengan loading="lazy", serta ukuran teks dan target sentuh yang nyaman.

Halaman yang cepat adalah bagian dari aksesibilitas. Waktu muat yang lama tidak adil bagi pengguna dengan perangkat lama atau jaringan terbatas — mengoptimalkan HTML berarti memperlakukan mereka setara.

#Memuat Aset Lebih Cepat

#preconnect dan preload

preconnect membuka koneksi ke asal pihak ketiga lebih awal, preload mengambil aset penting yang belum diminta:

Preconnect dan preload

<link rel="preconnect" href="https://cdn.contoh.id">
<link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/inter.woff2">

Font adalah kandidat terbaik preload — tanpa itu, teks sering menunggu font dimuat. Jangan preload semua aset; preload hanya untuk yang kritis di atas lipatan layar.

#defer dan async untuk Skrip

Skrip yang memblokir memperlambat render. defer menjalankan skrip setelah dokumen terurai, async menjalankan begitu selesai diunduh:

Memuat skrip tanpa memblokir

<script src="js/analitik.js" async></script>
<script src="js/aplikasi.js" defer></script>

Untuk skrip yang mengubah halaman, pakai defer agar urutannya terjaga. Untuk skrip berdiri sendiri seperti analitik, async lebih cepat. Dua-duanya tidak menunda render HTML.

#Gambar yang Ringan

#loading lazy dan decoding async

Gambar di bawah lipatan layar tidak perlu dimuat saat awal. Tandai agar dimuat saat mendekati viewport:

Gambar lazy

<img src="galeri.png" alt="Karya siswa" loading="lazy" decoding="async" width="640" height="480">

loading="lazy" menunda unduhan sampai gambar nyaris terlihat; decoding="async" mengizinkan browser menyelesaikan render sambil memproses gambar. Sertakan width dan height agar tata letak tidak melompat.

#Menghindari Gambar Raksasa

Gambar 3000 piksel yang ditampilkan 300 piksel menyia-nyiakan data. Siapkan versi sesuai ukuran tampilan dan kombinasikan dengan srcset seperti di episode 20.

#Aksesibilitas di Layar Kecil

#Ukuran Teks Minimum

Teks yang terlalu kecil dipaksa zoom oleh pengguna dan memecah tata letak. Jaga ukuran teks dasar tetap nyaman:

Ukuran teks dasar

html {
  font-size: 100%;
}
 
body {
  font-size: 1rem;
  line-height: 1.5;
}

font-size: 100% menghormati pengaturan ukuran font pengguna; rem mengikuti nilai tersebut. Ini membuat perbesaran pengguna bekerja sebagaimana mestinya.

#Target Sentuh yang Nyaman

Jari jauh lebih besar dari kursor. Target sentuh minimal 44 kali 44 piksel menghindari salah ketuk:

Target sentuh

.tombol {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

Berikan juga jarak antar target agar jari tidak menekan dua tombol sekaligus. Ruang kosong bukan pemborosan — itu kenyamanan.

#Latihan: Audit Halaman Mobile

Periksa header respons halaman produksi lewat terminal:

curl -sI https://contoh.id

Perintah curl -sI https://contoh.id menampilkan header saja. Perhatikan content-type, ukuran konten, dan status respons untuk menilai seberapa ringan halaman yang dilayani.

#Kesalahan Umum dan Solusinya

#Preload yang Berlebihan

Menyematkan banyak preload membuat browser sibuk mengunduh tanpa urutan. Batasi pada dua sampai tiga aset kritis.

#Lazy untuk Gambar di Atas Lipatan

Gambar pertama yang terlihat sebaiknya tidak lazy — itu hanya menunda muatnya. Terapkan loading="lazy" untuk gambar di bawah lipatan.

#Penutup

Episode 21 membuat halaman kalian cepat dan nyaman di ponsel: preconnect dan preload untuk aset penting, defer dan async untuk skrip, gambar lazy, serta teks dan target sentuh yang ramah.

Inti yang harus dibawa pulang:

• preconnect membuka koneksi awal; preload memuat aset kritis.
• defer menjaga urutan skrip; async memuat skrip mandiri.
• loading="lazy" dan decoding="async" meringankan gambar bawah lipatan.
• Ukuran teks dasar memakai rem agar mengikuti pengaturan pengguna.
• Target sentuh minimal 44 piksel mencegah salah ketuk.
• Periksa header respons dengan curl -sI.

Di episode 22 selanjutnya kita akan membahas progressive enhancement dan konten fallback — tiga lapisan web, strategi penurunan fitur, dan cara memastikan konten tetap sampai meski JavaScript atau format baru gagal.