Dokumen HTML berupa teks biasa: setiap byte-nya diunduh, lalu diurai baris demi baris hingga menjadi DOM. Makin gemuk markup, makin besar unduhannya dan makin lama parser membentuk struktur — beban yang ditanggung setiap kunjungan, tanpa terkecuali pengunjung dengan jaringan lambat. Chapter ini memangkas kegemukan tersebut dari sumber yang paling sering ditemui: div tanpa makna, nesting berlebihan, komentar dan inline style yang menumpuk, serta elemen kosong untuk layout semu.

Apa yang Dibayar untuk Setiap Node #

Parser tidak melewatkan apa pun: setiap elemen, setiap blok teks, dan setiap komentar menjadi node pada DOM — struktur objek yang dibangun browser saat membaca dokumen, sebagaimana dibahas pada chapter DOM Overview. DOM yang membesar menaikkan dua biaya sekaligus: dokumen yang lebih berat untuk diunduh, dan lebih banyak node untuk dibuat, disimpan di memori, serta ditelusuri oleh CSS dan JavaScript. Dokumen 100 KB dengan ribuan node nyata-nyata memperlambat halaman pada perangkat kelas bawah, sekalipun tampilannya sederhana. Dari sudut performa, markup ramping bukan sekadar kerapian kode.

Markup Gemuk versus Markup Ramping #

Contoh berikut menampilkan banner toko dan satu kartu produk dengan gaya penulisan yang gemuk: div bertumpuk, inline style berulang, dan komentar penanda:

html Versi gemuk — isi sama, struktur bertumpuk 
<!-- Mulai banner -->
<div class="banner">
  <div style="background-color: #1a6b54; color: #ffffff; padding: 16px; text-align: center;">
    <div style="font-size: 24px; font-weight: bold;">Toko Budi</div>
    <div style="font-size: 14px;">Perlengkapan dapur dan rumah tangga</div>
  </div>
</div>
<!-- Akhir banner -->
<!-- Mulai daftar produk -->
<div class="daftar">
  <div class="kartu">
    <div style="font-weight: bold;">Wajan besi 26 cm</div>
    <div>Rp85.000</div>
  </div>
</div>
<!-- Akhir daftar produk -->

Versi ramping berikut menampilkan isi yang sama persis dengan elemen semantik dari section Semantic HTML:

html contoh-markup-ramping.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi</title>
</head>
<body>
  <header>
    <h1>Toko Budi</h1>
    <p>Perlengkapan dapur dan rumah tangga</p>
  </header>
  <main>
    <section>
      <h2>Daftar Produk</h2>
      <article>
        <h3>Wajan besi 26 cm</h3>
        <p>Rp85.000</p>
      </article>
    </section>
  </main>
</body>
</html>

Ukurannya terlihat jelas: versi gemuk utuh menyerap 714 byte, sedangkan versi ramping — boilerplate termasuk — hanya 455 byte, selisih sekitar 36 persen untuk isi yang sama. Selisih ini membesar seiring jumlah kartu produk, karena inline style diulang pada setiap kartu sedangkan versi ramping tinggal menambah article pendek.

Mari kita telaah peran setiap bagian versi ramping:

  1. Baris 9–12 (header): banner dan judul toko; maknanya tersampaikan tanpa satu pun div.
  2. Baris 13 (main): menandai konten utama halaman; pengganti div class="daftar" yang tidak bermakna.
  3. Baris 14–20 (section dan article): satu kartu produk; heading h3 menggantikan div ber-font-weight: bold.
  4. Tanpa komentar penanda: struktur heading dan elemen semantik menjelaskan dirinya sendiri.

Perbedaannya bukan pada byte semata. Versi ramping memberi makna pada struktur: header, main, section, dan article dapat dibaca browser, screen reader, dan search engine, sedangkan tumpukan div menyembunyikan semuanya. Inline style yang berulang juga berpindah ke satu aturan CSS — satu tempat pengaturan alih-alih puluhan penulisan ulang.

Pola Pemborosan yang Sering Muncul #

  • Nesting yang tidak perlu — div yang hanya membungkus satu anak untuk keperluan styling semu; aturan CSS dapat menarget anak langsung tanpa pembungkus tambahan.
  • Komentar penanda yang menumpuk — catatan <!-- Mulai banner --> dan <!-- Akhir banner --> mengulang apa yang kelihatan dari elemennya; simpan komentar untuk penjelasan yang memang tidak tertulis di kode.
  • Inline style berulang — nilai yang sama ditulis puluhan kali; pindahkan ke satu class pada CSS agar dokumen mengecil dan perubahan cukup dilakukan satu tempat.
  • Elemen kosong untuk layout semu — div kosong sebagai spacer digantikan margin dan padding pada CSS; elemen kosong tidak membawa makna apa pun.
  • Atribut yang mengulang nilai bawaan — penulisan yang nilainya sama dengan bawaan browser hanya menambah byte; tulis bila ingin menegaskan nilai tersebut, hapus bila tidak.

Minifikasi untuk Produksi #

Setelah naskah ramping, langkah terakhir biasanya dikerjakan alat build: minifikasi menghapus spasi, baris baru, dan komentar saat situs dipublikasikan, sehingga byte yang dikirim mengecil lagi tanpa mengubah tampilan. Hasil minifikasi tidak nyaman dibaca manusia; karena itu simpan dan sunting sumber yang rapi, lalu biarkan alat build menghasilkan versi produksinya. Proses ini berada di luar HTML murni — yang penting dipahami di sini, markup rapi yang kita tulis adalah bahan bakunya.

Gambar yang ramping, script yang tertib, dan markup yang hemat kini bekerja pada sisi masing-masing. Untuk menilai hasil gabungannya, kita butuh angka; chapter penutup section ini memperkenalkan metrik performa halaman.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-markup-ramping.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi</title>
</head>
<body>
  <header>
    <h1>Toko Budi</h1>
    <p>Perlengkapan dapur dan rumah tangga</p>
  </header>
  <main>
    <section>
      <h2>Daftar Produk</h2>
      <article>
        <h3>Wajan besi 26 cm</h3>
        <p>Rp85.000</p>
      </article>
    </section>
  </main>
</body>
</html>