LCP, CLS dan INP dalam Bahasa Sederhana
Pernahkah Anda membuka sebuah website di ponsel, lalu merasa kesal karena gambarnya tidak kunjung muncul, atau tiba-tiba salah pencet tombol karena tata letaknya bergeser? Pengalaman menyebalkan ini bukan sekadar masalah koneksi internet Anda yang sedang tidak stabil, melainkan akibat dari performa teknis website yang kurang optimal. Untuk menilai kenyamanan sebuah situs, para ahli menggunakan tiga ukuran utama yang mudah dipahami lewat analogi sehari-hari: LCP, CLS, dan INP.
Di Maxim4D, kami percaya bahwa memahami performa website tidak harus membuat kepala pusing dengan istilah pemrograman yang rumit. Melalui artikel ini, mari kita bedah ketiga metrik tersebut satu per satu agar Anda bisa mengenali mana website yang benar-benar dirancang dengan sehat dan mana yang hanya membuang-buang kuota data Anda.
---
Mengapa Kecepatan Website Bukan Sekadar "Loading" Selesai?
Dahulu, orang mengukur kecepatan website hanya dari satu pertanyaan: "Berapa detik sampai seluruh halaman selesai diunduh?" Namun, cara ukur lama ini sudah tidak relevan lagi. Ponsel modern dan jaringan internet saat ini bekerja dengan cara yang berbeda. Sebuah halaman website bisa saja sudah selesai mengunduh seluruh datanya di latar belakang, tetapi layar ponsel Anda masih kosong melongpong. Sebaliknya, ada website yang sudah bisa Anda baca dan klik, padahal di latar belakangnya masih ada gambar-gambar kecil yang sedang dimuat.
Oleh karena itu, lahirlah konsep penilaian pengalaman pengguna yang lebih nyata. Kita tidak lagi melihat angka statistik "kapan data selesai dikirim", melainkan "kapan pengguna merasa situs tersebut siap digunakan". Untuk memahami pondasi dasar dari kenyamanan berselancar ini, Anda bisa membaca panduan dasar mengenai apa itu core web vitals yang menjadi standar global saat ini.
Secara umum, kenyamanan kita saat membaca artikel atau berbelanja online di ponsel dipengaruhi oleh tiga faktor utama: seberapa cepat konten utama terlihat (LCP), seberapa tenang atau stabil posisi tombol dan teks di layar (CLS), dan seberapa cepat website merespons ketukan jari kita (INP). Mari kita bahas satu per satu dengan analogi yang sederhana.
---
LCP (Largest Contentful Paint): Seberapa Cepat Panggung Utama Terbuka?
Metrik pertama adalah LCP. Sederhananya, LCP adalah waktu yang dibutuhkan oleh website untuk menampilkan objek terbesar dan paling penting di layar Anda. Objek terbesar ini biasanya berupa gambar utama di bagian atas artikel, spanduk promo, atau blok teks berita utama.
Analogi Panggung Teater
Bayangkan Anda sedang menonton pertunjukan teater. Begitu tirai dibuka, panggung kosong. Anda tentu tidak ingin menunggu terlalu lama sampai aktor utama keluar dan mulai berbicara. Jika dekorasi latar belakang sudah lengkap tetapi aktor utamanya baru muncul setelah lima menit, Anda pasti akan merasa bosan dan ingin pulang.
Pada website, "aktor utama" ini adalah konten yang ingin Anda lihat pertama kali. Jika Anda membuka situs berita, aktor utamanya adalah judul dan paragraf pertama. Jika Anda membuka toko online, aktor utamanya adalah foto produk.
- Skor Bagus (Lancar): Jika aktor utama muncul di layar dalam waktu kurang dari 2,5 detik sejak Anda mengetuk alamat situs.
- Skor Buruk (Lambat): Jika layar ponsel Anda tetap putih atau hanya menampilkan warna abu-abu selama lebih dari 4 detik.
Mengapa LCP Bisa Lambat?
Biasanya, LCP yang lambat disebabkan oleh ukuran file gambar yang terlalu besar (belum diperkecil atau tidak dikompres) atau server website yang letaknya sangat jauh dari posisi Anda. Akibatnya, data harus berjalan memutar melewati banyak "pipa internet" sebelum akhirnya sampai ke layar ponsel Anda.
---
CLS (Cumulative Layout Shift): Jangan Biarkan Tombol "Melompat" Sendiri
Pernahkah Anda mengalami kejadian menyebalkan seperti ini: Anda ingin menekan tombol "Batal", tetapi tepat satu milidetik sebelum jari Anda menyentuh layar, sebuah iklan tiba-tiba muncul di bagian atas, mendorong tombol "Batal" ke bawah, dan jari Anda justru menekan tombol "Beli Sekarang"? Kejadian ini adalah contoh nyata dari CLS yang buruk.
CLS mengukur stabilitas visual sebuah halaman web. Metrik ini menghitung seberapa sering elemen-elemen di layar bergeser atau "melompat-lompat" secara tidak terduga saat halaman sedang dimuat.
Analogi Membaca Koran di Hari Berangin
Bayangkan Anda sedang membaca koran fisik di luar ruangan saat angin berembus kencang. Setiap kali Anda ingin membaca satu kalimat, halaman koran tersebut terlipat atau bergeser tertiup angin, sehingga Anda harus terus-menerus mencari di mana baris kalimat terakhir yang Anda baca. Sangat melelahkan, bukan?
Website dengan CLS yang buruk memberikan sensasi melelahkan yang sama. Tulisan yang sedang Anda baca tiba-tiba turun ke bawah karena ada gambar baru yang selesai dimuat di bagian atas.
- Skor Bagus (Stabil): Halaman langsung terbuka dengan tata letak yang kokoh. Gambar dan teks langsung menempati "kotak" mereka masing-masing tanpa menggeser elemen lain.
- Skor Buruk (Labil): Elemen halaman terus bergeser selama beberapa detik, membuat Anda harus menunggu hingga seluruh halaman benar-benar diam sebelum berani menyentuh layar.
Mengapa CLS Bisa Terjadi?
Penyebab utama CLS adalah pembuat website tidak memesan "tempat parkir" untuk gambar atau iklan. Ketika browser ponsel Anda memuat teks, browser langsung menampilkannya. Namun, ketika gambar yang berukuran besar selesai diunduh belakangan, browser terpaksa membuka ruang baru secara mendadak, sehingga mendorong teks yang sudah ada ke bawah.
---
INP (Interaction to Next Paint): Ketika Sentuhan Jari Terasa Diabaikan
INP adalah metrik terbaru yang digunakan untuk mengukur responsivitas sebuah website. INP memantau berapa lama waktu yang dibutuhkan website untuk memperbarui tampilan layar setelah Anda melakukan interaksi, seperti mengetuk menu, memilih tombol, atau mengetik di kolom pencarian.
Sebelumnya, metrik yang digunakan adalah FID (First Input Delay), namun INP dinilai jauh lebih akurat karena memantau seluruh interaksi Anda dari awal hingga Anda menutup halaman tersebut, bukan hanya ketukan pertama saja.
Analogi Remote TV yang Rusak
Pernahkah Anda menekan tombol volume pada remote TV, tetapi volumenya tidak langsung naik? Karena mengira tombolnya tidak tertekan, Anda menekannya berulang kali. Tiba-tiba, dua detik kemudian, suara TV Anda langsung melesat menjadi sangat keras karena TV baru merespons semua ketukan Anda secara sekaligus.
Di website, INP yang buruk terasa seperti remote TV yang rusak tersebut. Anda mengetuk tombol menu tiga garis di pojok atas ponsel, tetapi tidak ada reaksi apa pun. Layar tetap diam. Anda mengetuknya lagi, dan barulah menu tersebut terbuka dengan lambat.
- Skor Bagus (Responsif): Begitu jari Anda menyentuh tombol, layar langsung memberikan reaksi (misalnya warna tombol berubah atau menu langsung terbuka) dalam waktu kurang dari 200 milidetik (seperlima detik).
- Skor Buruk (Patah-patah): Butuh waktu lebih dari 500 milidetik bagi website untuk merespons ketukan Anda, membuat navigasi terasa berat dan macet.
Mengapa INP Bisa Lambat?
Penyebab utama INP yang buruk adalah beban kerja mesin ponsel Anda yang terlalu berat. Website modern sering kali mengirimkan file kode (JavaScript) yang sangat rumit. Ponsel Anda, terutama ponsel kelas menengah ke bawah, harus bekerja keras menerjemahkan kode tersebut sehingga tidak memiliki sisa tenaga untuk langsung merespons ketukan jari Anda.
---
Tabel Perbandingan Gejala Performa Website di Ponsel Anda
Untuk memudahkan Anda mengenali apakah website yang sering Anda kunjungi masuk dalam kategori sehat atau tidak, kami telah menyusun panduan ringkas berikut. Anda juga bisa mencocokkannya dengan checklist pengalaman website milik Anda sendiri saat menjelajahi internet hari ini.
| Nama Metrik | Apa yang Diukur? | Gejala Website yang Buruk (Merah) | Gejala Website yang Sehat (Hijau) |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Kecepatan pemuatan konten utama di layar. | Layar putih polos dalam waktu lama; gambar utama muncul sepotong demi sepotong seperti mengunduh file zaman dulu. | Konten utama berupa teks penting atau gambar spanduk langsung muncul secara utuh dalam hitungan kejap. |
| CLS (Cumulative Layout Shift) | Stabilitas posisi gambar dan tombol di layar. | Tombol bergeser sendiri saat akan diklik; teks naik-turun mendadak karena ada iklan atau gambar baru yang muncul belakangan. | Tata letak sejak awal sudah rapi. Area gambar atau iklan sudah memiliki ruang kosong khusus sehingga tidak menabrak teks lain. |
| INP (Interaction to Next Paint) | Kecepatan respons website terhadap ketukan jari. | Menu lambat terbuka setelah diketuk; ketikan teks di kolom pencarian muncul terlambat (patah-patah). | Setiap sentuhan, geseran, atau ketukan langsung menghasilkan perubahan instan di layar tanpa jeda yang mengganggu. |
---
Cara Sederhana Memeriksa Kesehatan Website untuk Pengguna Awam
Anda tidak perlu menjadi seorang ahli IT atau membuka konsol pemrograman yang rumit untuk mengetahui apakah sebuah situs web memiliki performa yang baik. Cukup gunakan kepekaan indra Anda saat berselancar menggunakan ponsel dengan melakukan tiga tes mandiri berikut:
- Tes Hitung Detik (Untuk LCP):
Saat Anda mengetuk sebuah tautan, mulailah berhitung dalam hati: "Satu, dua, tiga..." Jika pada hitungan ketiga area informasi utama sudah terbaca dengan jelas, maka situs tersebut memiliki LCP yang sangat baik. Jika Anda harus menghitung hingga angka lima atau lebih, situs tersebut tergolong lambat.
- Tes Tangan Diam (Untuk CLS):
Buka halaman website, lalu gulir layar ke bawah dengan cepat, kemudian lepaskan jari Anda. Perhatikan apakah tulisan atau gambar di layar bergoyang-goyang atau melompat-lompat untuk menyesuaikan diri. Website yang stabil secara visual akan langsung menampilkan konten di posisinya yang pas tanpa gerakan tambahan yang tidak perlu.
- Tes Ketukan Beruntun (Untuk INP):
Cari tombol menu atau bagian pertanyaan yang bisa diklik untuk membuka jawaban (akordeon). Ketuk tombol tersebut, lalu perhatikan seberapa cepat transisi visualnya terjadi. Jika ada jeda yang membuat Anda ragu apakah tombol tersebut sudah terketuk atau belum, maka nilai INP situs tersebut dipastikan kurang optimal.
Dengan memahami ketiga metrik ini, kita sebagai pengguna internet dewasa di Indonesia kini bisa lebih cerdas dalam menilai sebuah layanan digital. Website yang dikelola dengan serius pasti akan memprioritaskan kenyamanan pengunjungnya dengan menjaga LCP tetap cepat, tata letak CLS tetap stabil, dan respons INP tetap tangkas.
---
Maxim4D: Permainan berbasis keberuntungan mengandung risiko kehilangan uang. Tetapkan anggaran dan batas waktu, dan jangan pernah mengejar kerugian. Konten ini hanya untuk pembaca dewasa 18+. Baca panduan responsible gaming.
Pertanyaan Umum
Pertanyaan Umum
Mengapa website terasa cepat saat dibuka di komputer, tetapi sangat lambat di ponsel saya?
Komputer biasanya memiliki prosesor yang jauh lebih kuat dan terhubung ke jaringan internet yang lebih stabil (seperti kabel LAN atau Wi-Fi rumah). Sebaliknya, ponsel harus bekerja dengan prosesor yang lebih hemat daya serta mengandalkan sinyal seluler yang kekuatannya sering berubah-ubah di jalanan, sehingga metrik seperti LCP dan INP akan terasa jauh lebih berat di ponsel.
Apakah penggunaan kuota internet saya akan lebih boros jika sebuah website memiliki CLS yang buruk?
Secara tidak langsung, ya. CLS yang buruk sering disebabkan oleh gambar atau elemen iklan berukuran besar yang tidak dioptimalkan yang dimuat belakangan secara mendadak. Proses memuat file-file besar secara tidak teratur ini memaksa browser ponsel Anda terus bekerja keras mengunduh data tambahan, yang ujung-ujungnya menguras kuota internet Anda lebih cepat.
Bagaimana cara paling mudah bagi pemilik website pemula untuk memperbaiki nilai LCP?
Langkah awal dan paling berdampak yang bisa dicoba adalah dengan selalu memperkecil (kompres) ukuran file gambar sebelum mengunggahnya ke website. Gambar yang memiliki ukuran file kecil akan jauh lebih cepat terkirim melalui jaringan internet ponsel, sehingga "aktor utama" di layar pengunjung bisa langsung muncul tanpa perlu menunggu lama.
Apakah baterai ponsel yang cepat panas ada hubungannya dengan nilai INP sebuah website?
Ya, sangat berhubungan. INP yang buruk biasanya menandakan bahwa website tersebut menjalankan terlalu banyak kode instruksi (JavaScript) yang rumit di latar belakang ponsel Anda. Ketika prosesor ponsel dipaksa bekerja keras tanpa henti untuk menerjemahkan kode-kode tersebut, suhu komponen di dalam ponsel akan meningkat dengan cepat dan membuat daya baterai Anda terkuras habis dalam waktu singkat.