Panduan Performa Halaman

Apa Itu Skeleton Loading Sebelum Halaman Tampil?

Ditulis oleh Tim COMTOTO · Diperbarui 15 Agustus 2026

Sebelum konten sepenuhnya tampil, sebagian situs menampilkan kotak-kotak abu-abu berbentuk samar mengikuti pola konten aslinya — bukan lingkaran berputar seperti loading pada umumnya. Pola ini disebut skeleton loading. Halaman ini menjelaskan apa fungsinya dan kenapa makin banyak situs memakainya.

Ilustrasi skeleton loading sebelum halaman tampil COMTOTO

Ringkasnya

Skeleton loading adalah tampilan sementara berupa blok/kotak abu-abu yang meniru bentuk kasar konten asli (judul, gambar, paragraf) selagi data sungguhan masih dimuat. Tujuannya membuat proses menunggu terasa lebih singkat secara psikologis dan mencegah tata letak halaman "meloncat" begitu konten asli akhirnya muncul.

Terakhir ditinjau: 15 Agustus 2026.

Apa Itu Skeleton Loading?

Skeleton loading adalah teknik menampilkan bentuk placeholder (kotak/blok berwarna abu-abu muda) yang meniru garis besar tata letak konten asli — misalnya kotak panjang tipis di posisi judul, kotak persegi di posisi gambar, beberapa baris pendek di posisi paragraf — sementara data sungguhan masih diambil dari server.

Bentuk placeholder sengaja dibuat menyerupai bentuk kasar konten aslinya, bukan sekadar kotak polos generik.
Begitu data asli selesai dimuat, blok skeleton digantikan konten sungguhan di posisi yang sama persis.
Teknik ini berbeda dari sekadar layar kosong putih yang menunggu tanpa indikasi apa pun.

Kenapa Skeleton Dianggap Lebih Nyaman Dibanding Spinner Berputar?

Spinner (ikon lingkaran berputar) dan skeleton sama-sama menandakan "sedang memuat", tapi riset soal pengalaman pengguna menunjukkan skeleton cenderung terasa lebih nyaman karena beberapa alasan:

Skeleton memberi gambaran awal tentang struktur halaman, di mana nanti ada judul, gambar, teks, sedangkan spinner tidak memberi info apa pun soal tata letak yang akan muncul.
Karena bentuknya menyerupai konten asli, transisi dari skeleton ke konten sungguhan terasa lebih halus dibanding transisi dari spinner yang tiba-tiba hilang ke konten yang muncul mendadak.
Secara psikologis, menunggu sesuatu yang terlihat "sedang terbentuk" sering terasa lebih singkat dibanding menunggu animasi abstrak yang tidak memberi gambaran progres.

Skeleton Loading dan Hubungannya dengan Tata Letak yang Tidak "Loncat"

Salah satu manfaat teknis skeleton loading, kalau dirancang dengan ukuran yang tepat, adalah mencegah fenomena yang disebut Cumulative Layout Shift (CLS) — pergeseran tata letak mendadak saat elemen baru selesai dimuat dan mendorong elemen lain di sekitarnya.

Kalau skeleton dibuat dengan ukuran (tinggi, lebar) yang sama persis dengan konten asli yang akan menggantikannya, elemen di sekitarnya tidak perlu bergeser saat konten asli muncul.
Sebaliknya, kalau tidak ada placeholder sama sekali, elemen lain di halaman bisa mendadak terdorong turun/naik — inilah yang disebut CLS, dan bisa membuat pengguna salah klik karena posisi tombol tiba-tiba berpindah.
CLS yang rendah termasuk salah satu indikator pengalaman pengguna yang diperhatikan dalam pengukuran kecepatan/kenyamanan halaman modern.

Pertanyaan umum

Apa beda skeleton loading dengan spinner atau loading berputar biasa?

Spinner adalah ikon animasi abstrak yang cuma menandakan sedang memproses, tanpa memberi gambaran bentuk konten yang akan muncul. Skeleton loading menampilkan blok placeholder yang meniru garis besar bentuk konten aslinya, memberi gambaran awal struktur halaman sebelum data sungguhan tampil.

Apakah skeleton loading mempercepat pemuatan data sungguhan?

Tidak. Skeleton loading tidak mempercepat proses pengambilan data dari server — ia hanya mengubah tampilan selama proses menunggu itu berlangsung, supaya terasa lebih nyaman secara psikologis.

Kenapa bentuk skeleton harus menyerupai bentuk konten aslinya?

Supaya transisi dari tampilan sementara ke konten sungguhan terasa halus, dan supaya ukurannya bisa dipatok sama persis dengan konten asli — ini penting untuk mencegah tata letak halaman bergeser tiba-tiba saat konten muncul.

Apa itu Cumulative Layout Shift, dan apa hubungannya dengan skeleton?

Cumulative Layout Shift (CLS) adalah istilah untuk pergeseran tata letak halaman yang tidak terduga, biasanya terjadi saat elemen baru selesai dimuat dan mendorong elemen di sekitarnya berpindah posisi. Skeleton loading yang ukurannya dipatok sama dengan konten asli membantu mencegah pergeseran ini terjadi.

Apakah semua situs modern menggunakan skeleton loading?

Tidak semua. Skeleton loading lebih umum dipakai di halaman yang datanya dimuat secara dinamis dari server setelah halaman terbuka, sementara halaman yang seluruh kontennya sudah siap sejak awal biasanya tidak memerlukan teknik ini sama sekali.

Sudah paham cara kerjanya?

Halaman siap dijelajahi kapan saja — lanjutkan kalau sudah siap.