Seluruh teknik section ini — gambar seukuran tampil, format modern, lazy loading, script tertib, dan markup ramping — bermuara pada satu pertanyaan: seberapa cepat halaman benar-benar tampil dan merespons? Menjawab pertanyaan itu butuh metrik yang disepakati, bukan kesan pribadi. Chapter ini memperkenalkan tiga metrik inti yang dirujuk industri, memetakan teknik HTML yang menggerakkannya, lalu menutup section dengan contoh audit.

Tiga Metrik Inti #

  • LCP (Largest Contentful Paint) — mengukur waktu hingga elemen konten terbesar pada layar pertama selesai dirender.
  • CLS (Cumulative Layout Shift) — mengukur besarnya total pergeseran tata letak yang dialami halaman selama dibuka.
  • INP (Interaction to Next Paint) — mengukur waktu respons halaman, dari interaksi pengunjung hingga layar memberi balikan visual.

web.dev menamai ketiganya Core Web Vitals dan menetapkan ambang yang dianggap sehat: LCP di bawah 2,5 detik, CLS di bawah 0,1, dan INP di bawah 200 milidetik. Ketiganya diukur pada halaman nyata, tetapi arah perbaikannya konsisten: kurangi byte, cegah pergeseran, dan jangan menahan browser saat halaman dibentuk — dan HTML mengendalikan porsi besar dari ketiga arah itu.

Yang Dapat Dikendalikan dari Sisi HTML #

Teknik dari chapter sebelumnyaMetrik yang dituju
Resize, kompresi, dan format modern (Ch 1–2)LCP — elemen terbesar selesai diunduh lebih cepat
width dan height pada img (Ch 1)CLS — ruang tersedia sejak awal
Hero tanpa lazy; lazy untuk below the fold (Ch 3)LCP — gambar utama tidak tertunda, bandwidth bebas
Script defer atau type="module" (Ch 4)LCP dan INP — parsing dan interaksi tidak tertahan
preconnect untuk pihak ketiga (Ch 4)LCP — koneksi siap sebelum dipakai
Markup ramping dan semantik (Ch 5)LCP — dokumen kecil, parsing lebih cepat

Alat Ukur: Lighthouse #

Lighthouse adalah alat audit yang terpasang di Chrome DevTools: alat ini membuka halaman, menjalankan pemeriksaan performa, aksesibilitas, dan praktik terbaik, lalu melaporkan skor beserta saran yang terurut menurut dampak. Panel Performance melengkapi audit dengan rekaman aktivitas halaman; dasar penggunaan DevTools telah dibahas pada chapter View Source dan Inspector. Ukurlah setiap perubahan, karena optimasi tanpa pengukuran hanya memindahkan dugaan.

Contoh Audit Satu Halaman Sederhana #

File berikut adalah hasil perbaikan halaman daftar produk toko Budi setelah satu putaran audit — gabungan pola dari seluruh section; file banner-toko.webp, foto-*, dan aplikasi.js bersifat hipotetis.

html contoh-audit-performa.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi - Daftar Produk</title>
  <script src="aplikasi.js" defer></script>
</head>
<body>
  <h1>Toko Budi</h1>
  <img src="banner-toko.webp" alt="Banner tulisan Toko Budi" width="1200" height="400">
  <p>Perlengkapan dapur dan rumah tangga, Jl. Melati No. 10.</p>

  <h2>Produk Terlaris</h2>
  <img src="foto-wajan-600.webp" alt="Wajan besi diameter 26 cm" loading="lazy" width="600" height="450">
  <img src="foto-cangkir-600.webp" alt="Cangkir keramik warna hijau" loading="lazy" width="600" height="450">
  <p>Harga berlaku bulan ini; katalog lengkap diurus oleh aplikasi.js.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Saat halaman dibuka:
  - banner-toko.webp segera diunduh (eager, kandidat LCP) dengan
    ruang 1200x400 tersedia sejak awal
  - Parsing tidak pernah tertahan; aplikasi.js dieksekusi setelah
    dokumen selesai
  - Dua gambar produk baru diunduh saat mendekati viewport

Mari kita telaah peran setiap bagian:

  1. Baris 7 (script defer): unduhan paralel, eksekusi setelah parsing; konten tidak pernah menunggu script.
  2. Baris 11 (img banner): kandidat LCP tanpa loading="lazy", lengkap dengan width dan height pencegah layout shift.
  3. Baris 15–16 (img produk): below the fold, sehingga layak membawa loading="lazy".
  4. Format webp di semua gambar: byte turun dibanding jpeg; fallback picture siap ditambahkan bila perlu.

Angka audit berikut berupa ilustrasi pola temuan dan perbaikannya:

Temuan audit awalPerbaikan yang diterapkanHasil (ilustrasi)
LCP 4,1 detik — banner 3.400 KBResize ke 1200 px, format webpLCP 1,3 detik
CLS 0,19 — img tanpa dimensiwidth dan height pada semua imgCLS 0,02
Parsing tertahan script classicdefer pada scriptKonten tampil sebelum script

Checklist Performa HTML #

  • Semua img membawa alt, width, dan height.
  • Gambar diresize ke ukuran tampil dan dikompresi; format modern disusun dengan fallback picture.
  • Gambar dan iframe di bawah lipatan memakai loading="lazy"; gambar utama tetap eager.
  • script memakai defer atau type="module", ditempatkan di head.
  • preconnect hanya untuk origin pihak ketiga yang dipakai segera.
  • Markup memakai elemen semantik, tanpa pembungkus div yang tidak perlu.
  • Setiap perubahan diukur ulang dengan Lighthouse.

Performa menentukan seberapa cepat halaman sampai ke pengunjung; keamanan menentukan seberapa aman halaman itu diterima. Section berikutnya membahas keamanan HTML — mulai dari link eksternal, iframe, hingga risiko HTML dari input pengguna.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

contoh-audit-performa.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 - Daftar Produk</title>
  <script src="aplikasi.js" defer></script>
</head>
<body>
  <h1>Toko Budi</h1>
  <img src="banner-toko.webp" alt="Banner tulisan Toko Budi" width="1200" height="400">
  <p>Perlengkapan dapur dan rumah tangga, Jl. Melati No. 10.</p>

  <h2>Produk Terlaris</h2>
  <img src="foto-wajan-600.webp" alt="Wajan besi diameter 26 cm" loading="lazy" width="600" height="450">
  <img src="foto-cangkir-600.webp" alt="Cangkir keramik warna hijau" loading="lazy" width="600" height="450">
  <p>Harga berlaku bulan ini; katalog lengkap diurus oleh aplikasi.js.</p>
</body>
</html>