Lewati ke konten utama
menjadi.dev
Chapter 2.4 Fundamental Web Pemula

Blocking vs Non-Blocking: CSS dan JavaScript

Cara CSS dan JS memperlambat render dan solusinya

Tujuan Pembelajaran

  • Memahami konsep render-blocking dan parser-blocking
  • Bisa mengoptimasi loading CSS dan JS

Analogi

Diagram 

      Blocking = Macet di Jalan Tol:

Jalur A (Blocking):
[Mobil A] → [Mobil B] → [Mobil C]
Semua harus tunggu mobil depan

Jalur B (Non-Blocking):
[Mobil A] [Mobil B] [Mobil C]
Semua jalan bersamaan!

Blocking = satu persatu, non-blocking = bersamaan

Penjelasan Konsep

Bayangkan kamu masuk ke sebuah rumah yang isinya cuma teks — dinding polos, tidak ada lukisan, tidak ada musik, tidak ada TV. Membosankan, kan? Website yang hanya berisi teks dan link juga terasa membosankan. Manusia adalah makhluk visual — kita lebih mudah mengingat informasi yang disajikan dengan gambar, suara, dan video.

Studi menunjukkan bahwa otak manusia memproses gambar 60.000 kali lebih cepat daripada teks!

Itulah mengapa kemampuan menyematkan multimedia adalah keterampilan penting bagi setiap web developer.

Gambar <img>: Menampilkan Visual

Kita sudah singgung <img> di chapter sebelumnya, tapi mari kita bedah lebih dalam.

Tag <img> adalah self-closing tag (tidak perlu </img>).

Attribute penting:

  • src: Lokasi gambar — bisa URL absolut (https://example.com/foto.jpg), URL relatif (/images/foto.jpg), atau data URI
  • alt: Teks alternatif — muncul kalau gambar gagal load,

Dibaca screen reader untuk tunanetra, dan dibaca Google untuk SEO

  • loading="lazy": Teknik lazy loading — gambar baru di-load saat user scroll mendekatinya.

Ini sangat meningkatkan performa halaman!

  • width dan height: Dimensi asli gambar — membantu browser mengalokasikan ruang sebelum gambar selesai load (mencegah layout shift)

Format gambar untuk web:

  • JPEG/JPG: Untuk foto — kompresi bagus, ukuran kecil, tapi tidak transparan
  • PNG: Untuk gambar dengan transparansi — logo, ikon, screenshot
  • GIF: Untuk animasi sederhana — tapi ukuran besar,

Pertimbangkan video sebagai alternatif

  • SVG: Untuk ikon dan logo — berbasis vektor (tidak pecah saat diperbesar), ukuran sangat kecil
  • WebP: Format modern Google — kompresi lebih baik dari JPEG dan PNG, tapi belum semua browser mendukung

Audio <audio>: Menambahkan Suara

Tag <audio> digunakan untuk memutar file audio (MP3, WAV, OGG).

Attribute penting:

  • controls: Menampilkan tombol play/pause/volume
  • autoplay: Memutar otomatis (banyak browser memblokir ini karena mengganggu user)
  • loop: Mengulang terus menerus
  • preload: Strategi preload — auto (load semua), metadata (hanya info), none (tidak preload)

Gunakan tag <source> di dalam <audio> untuk menyediakan beberapa format file,

Browser bisa memilih yang didukung: <audio controls><source src="lagu.mp3" type="audio/mpeg"><source src="lagu.ogg" type="audio/ogg"></audio>

Video <video>: Menampilkan Video

Tag <video> mirip dengan audio tapi untuk file video (MP4, WebM, OGG).

Attribute tambahan:

  • width dan height: Dimensi player
  • poster: Gambar thumbnail sebelum video diputar
  • muted: Mulai dalam keadaan mute (sering dipakai untuk autoplay)
  • playsinline: Memutar inline di iOS (tidak fullscreen otomatis)

Video adalah konten yang paling diminati di internet — YouTube, TikTok, Instagram Reels — semuanya berbasis video.

Menyematkan video sendiri di website memberimu kontrol penuh atas konten dan pengalaman user.

<iframe>: Menyematkan Halaman Lain

iframe (inline frame) seperti jendela di rumahmu yang melihat ke rumah lain. iframe memuat halaman web lain di dalam halamanmu.

Contoh penggunaan umum:

  • Embed Google Maps
  • Embed YouTube video
  • Embed payment gateway (Midtrans, Xendit)
  • Embed social media feeds

Attribute penting iframe:

  • src: URL halaman yang akan dimuat
  • width dan height: Dimensi iframe
  • frameborder: Menghilangkan border (set ke 0)
  • allowfullscreen: Memungkinkan mode fullscreen (untuk video)
  • sandbox: Keamanan tambahan — membatasi apa yang bisa dilakukan konten iframe

Keamanan dengan iframe

Keamanan dengan iframe iframe bisa berisiko kalau tidak dikontrol. Gunakan attribute sandbox untuk membatasi kemampuan iframe — misalnya sandbox="allow-scripts allow-same-origin". Selalu pastikan kamu hanya embed konten dari sumber yang tepercaya.

Kenapa multimedia penting?

Karena web modern adalah pengalaman multisensori. User mengharapkan lebih dari sekadar teks — mereka ingin video tutorial, podcast, infografis interaktif, dan visual yang menarik.

Menyajikan konten dalam format yang beragam juga meningkatkan engagement dan waktu yang dihabiskan user di website-mu. Tapi ingat: selalu optimalkan ukuran file media karena file besar memperlambat loading halaman.

Contoh Kode

html 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="preload" as="style" href="non-critical.css" 
        onload="this.rel='stylesheet'">
</head>
<body>
  <h1>Konten Halaman</h1>
  <script src="app.js"></script>
  <script src="analytics.js" async></script>
  <script src="app.js" defer></script>
</body>
</html>

Penjelasan Kode

Baris 4: CSS default = render blocking. Baris 5-6: Preload untuk CSS non-critical. Baris 9: Script di akhir body. Baris 10: Script async. Baris 11: Script defer.

Prompt AI

Jelaskan bedanya async dan defer pada tag script. Kapan menggunakan masing-masing?

Pertanyaan Reflektif

Inspect website populer. Lihat bagaimana mereka load CSS dan JS.