STATUS IS UPWIKI OPTIMASI SITUS WEB
15Percepat
Desain dan UX / Percepat

Core Web Vitals: Apa yang Harus Diperbaiki Pemilik Situs Terlebih Dahulu

Cara menggunakan bukti dari pengguna nyata untuk memperbaiki pemuatan, responsivitas, dan stabilitas tata letak dalam urutan yang tepat.

Core Web Vitals: Apa yang Harus Diperbaiki Pemilik Situs Terlebih Dahulu — PANDUAN VISUAL
BACA
8 menit
SUMBER
6
VALIDASI ULANG
2027-03-27
ditinjau
Peninjau kinerja web dan aksesibilitas
JAWABAN SINGKAT

Mulai dengan keputusan.

Mulailah dari halaman, perangkat, dan jalur tugas di mana pengalaman pengguna nyata paling lemah. Gunakan data lapangan untuk menentukan apakah masalahnya adalah pemuatan, responsivitas, atau pergeseran tak terduga; gunakan pengujian lab terkontrol untuk mereproduksi penyebabnya. Perbaiki penyebab terkecil yang dapat dibalik yang memengaruhi proporsi kunjungan yang bermakna sebelum mempertimbangkan penulisan ulang platform.

Core Web Vitals adalah Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS). Mereka mengukur aspek pengalaman penting, bukan jaminan hasil pencarian atau bisnis. Ukur baseline, lakukan satu perubahan yang dapat diatribusikan, uji alur kritis, dan konfirmasi hasilnya kembali dengan data lapangan.

PANDUAN VISUAL

Lihat pekerjaan sebagai sebuah sistem.

Gunakan peta ini untuk menghubungkan keputusan dalam artikel sebelum menerapkan taktik individual.

SIUPercepat
01Ketahui apa yang dikatakan masing‑masing ukuran
02Biarkan data lapangan menentukan prioritas dan pengujian lab menjelaskannya
03Triage berdasarkan jangkauan, kerugian tugas, bukti, dan reversibilitas
04Perbaiki LCP dengan mempersingkat jalur ke konten utama
01

Ketahui apa yang dikatakan masing‑masing ukuran

Largest Contentful Paint, atau LCP, mengukur kapan gambar terbesar atau blok teks terbesar di viewport awal dirender. Interaction to Next Paint, atau INP, mengukur responsivitas kunjungan melalui interaksi kualifikasi terleletnya. Cumulative Layout Shift, atau CLS, mengukur pergerakan visual tak terduga selama kunjungan.

Target pengalaman yang dipublikasikan Google adalah LCP pada atau di bawah 2,5 detik, INP pada atau di bawah 200 milidetik, dan CLS pada atau di bawah 0,1. Nilai-nilai ini dinilai pada persentil ke-75 dari pemuatan halaman, terpisah untuk mobile dan desktop. Gunakan target untuk memfokuskan pekerjaan, bukan sebagai jaminan peringkat atau alasan mengabaikan pengunjung yang lebih lambat.

LCP

Konten utama muncul terlambat; selidiki jalur server, penemuan sumber daya, pengunduhan, dan jalur perenderan.

INP

Klik, ketukan, atau penekanan tombol menunggu terlalu lama untuk respons visual; sumbernya bisa berupa frame tersemat.

CLS

Konten bergerak secara tak terduga; berikan perhatian ekstra pada pergeseran di dekat kontrol, formulir, dan posisi baca.

02

Biarkan data lapangan menentukan prioritas dan pengujian lab menjelaskannya

Data lapangan berasal dari kunjungan nyata, termasuk perangkat nyata, jaringan, lokasi, status cache, dan perilaku. Chrome User Experience Report muncul di PageSpeed Insights dan Search Console ketika data memadai. Pemantauan pengguna nyata (real-user monitoring) Anda sendiri dapat menambahkan konteks tampilan halaman; kumpulkan hanya telemetri yang diperlukan dan hindari data yang dimasukkan oleh pelanggan.

Data lab adalah pengujian yang dapat diulang di bawah kondisi terpilih. Berguna untuk mengisolasi perubahan rilis dan membaca trace, tetapi tidak bisa mewakili setiap pengunjung. Lighthouse tidak dapat mengukur INP sejati tanpa interaksi nyata, jadi Total Blocking Time adalah proksi diagnostik. Ketika hasil berbeda, gunakan data lapangan untuk memprioritaskan dan data lab untuk menyelidiki.

Bandingkan yang sejenis

Catat apakah data pada level URL atau origin dan apakah untuk mobile atau desktop.

Pertahankan konteks

Simpan tanggal, kelompok halaman, perangkat, distribusi, pengaturan pengujian, dan rilis terakhir bersama baseline.

03

Triage berdasarkan jangkauan, kerugian tugas, bukti, dan reversibilitas

Jangan mulai dari angka terendah di dashboard. Urutkan kandidat berdasarkan kunjungan yang terpengaruh, pentingnya tugas pengunjung, pengulangan di seluruh template, dan apakah perubahan dapat diisolasi dan dikembalikan. Ini menjadikan optimasi Core Web Vitals sebagai remediasi operasional alih-alih sekadar mengejar skor.

Sebuah gambar tanpa dimensi pada template bersama mungkin perbaikan pertama yang lebih baik daripada penulisan ulang front-end yang spekulatif. Interaksi checkout yang kurang umum bisa menjadi prioritas ketika itu menghalangi penyelesaian. Padukan bukti metrik dengan umpan balik dukungan, pengamatan funnel, dan tinjauan aksesibilitas.

Antrian pertama

Masalah yang berulang di lapangan pada template penting dengan solusi jelas dan berisiko rendah.

Antrian nanti

Ide arsitektural tanpa masalah pengguna yang terukur atau jalur rollback; simpan sebagai hipotesis.

04

Perbaiki LCP dengan mempersingkat jalur ke konten utama

Identifikasi elemen LCP untuk halaman dan kelompok perangkat yang terpengaruh. Periksa respons HTML awal, kapan browser menemukan elemen, berapa lama sumber dayanya diunduh, dan apa yang memblokir perenderan. Waktu respons server yang tinggi dapat membuat target LCP tidak praktis bahkan dengan aset hero yang dioptimalkan dengan baik.

Pertahankan konten utama dapat ditemukan lebih awal ketika itu sesuai desain. Jangan lazy-load gambar yang menjadi elemen LCP. Untuk halaman yang dipimpin gambar, gunakan aset yang berukuran dan terenkode sesuai dengan dimensi yang eksplisit. Uji pra‑muat (preload) dan aturan pengiriman: permintaan dini hanya berguna jika tidak bersaing dengan pekerjaan yang lebih penting.

High TTFB

Periksa redirect, pekerjaan server, perilaku cache, dan kedekatan pengiriman; ini mungkin memerlukan kepemilikan aplikasi atau hosting.

Late hero

Periksa apakah rendering klien, skrip, atau CSS menunda penemuan teks atau gambar utama.

05

Buat interaksi responsif dan tata letak dapat diprediksi

Untuk INP, reproduksi alur yang lambat dalam trace browser. Pisahkan delay input, pemrosesan event, dan delay presentasi. Tugas panjang pada benang utama (main thread), handler berat, rendering mahal, dan layout thrashing masing‑masing dapat menunda paint berikutnya. Lakukan pekerjaan visual untuk frame berikutnya terlebih dahulu; tunda penyimpanan yang tidak penting, analitik, atau pembaruan sekunder jika persyaratan produk mengizinkan.

Untuk CLS, temukan elemen yang bergerak alih‑alih menebak dari total. Sisakan ruang untuk gambar, video, iklan, embed, dan frame dengan dimensi atau aspect-ratio CSS. Periksa pemuatan font dan konten yang disuntikkan. Jangan menyembunyikan pesan persetujuan, kesalahan, atau aksesibilitas yang diperlukan hanya untuk memperbaiki skor; beri lokasi yang stabil.

INP caution

Menunda pekerjaan dapat mengubah timing aplikasi. Uji regresi status, validasi, dan perilaku keyboard.

CLS caution

Gulir area yang dimuat malas dan embed; pengujian hanya pada pemuatan awal bisa melewatkan pergeseran kemudian.

06

Rilis perbaikan dengan aman dan konfirmasi hasilnya

Perubahan performa dapat memengaruhi skrip, caching, rendering, embed, atau konfigurasi pengiriman. Tahapkan perubahan, bandingkan jalur uji yang ditentukan dengan baseline, dan dokumentasikan rollback. Untuk alur pembayaran, akun, atau yang diatur, libatkan peninjau keamanan, kepatuhan, dan aksesibilitas yang tepat sebelum mengubah embed, validasi, atau penanganan data. Ini adalah panduan edukasional, bukan penilaian kepatuhan.

Setelah rilis, bandingkan jalur lab yang sama dan pantau segmen lapangan yang sebanding melalui jendela pelaporan normal mereka. Periksa efek tak terduga seperti error yang tersembunyi atau antarmuka yang tidak terbaca. Status Is UP mendukung optimasi ketersediaan yang proaktif melalui pemeriksaan berkala, kepemilikan remediasi yang jelas, dan kesiapan rollback antar insiden.

Change record

Tautkan setiap perubahan ke kelompok halaman, metrik, pemilik, bukti uji, trade-off, dan instruksi rollback.

Release guardrail

Jangan deklarasikan keberhasilan hanya dari satu lulus sintetis; konfirmasi pola pengguna nyata yang relevan.

TINDAKAN / VERIFIKASI

Panduan tugas praktis Anda.

  1. 01

    Pilih jalur prioritas

    Daftar kelompok halaman penting dan audiens mobile serta desktop yang menggunakannya.

    VERIFIKASI: Daftar yang disetujui pemilik menamai tugas dan tim yang bertanggung jawab.
  2. 02

    Tangkap baseline lapangan

    Catat LCP, INP, dan CLS pada persentil ke-75 menurut perangkat.

    VERIFIKASI: Rekaman memuat tanggal, alat, kelompok halaman, perangkat, dan cakupan URL‑atau‑origin.
  3. 03

    Pilih satu masalah berbasis bukti

    Peringkat berdasarkan jangkauan, kerugian tugas, penyebab berulang, dan cakupan yang dapat dibalik.

    VERIFIKASI: Tim dapat menjelaskan mengapa masalah itu diprioritaskan dibandingkan alternatif.
  4. 04

    Reproduksi alurnya

    Gunakan kondisi representatif dan jalankan path klik, ketukan, dan keyboard nyata.

    VERIFIKASI: Sebuah trace mengidentifikasi bottleneck atau menunjukkan bahwa perlu konteks lapangan lebih lanjut.
  5. 05

    Terapkan perbaikan sempit yang aman

    Persingkat jalur LCP, hapus pekerjaan benang utama yang tidak kritis, atau sisakan ruang untuk komponen akhir.

    VERIFIKASI: Efek metrik dan pengguna yang diharapkan didokumentasikan.
  6. 06

    Uji regresi tugas dan aksesibilitas

    Periksa formulir, pesan kesalahan, fokus, penggunaan keyboard, embed, dan tata letak mobile.

    VERIFIKASI: Alur kritis masih berfungsi; komponen pembayaran atau akun yang diubah menerima tinjauan berkualifikasi.
  7. 07

    Siapkan rollback

    Tunjuk siapa yang dapat mengembalikan versi atau konfigurasi dan kapan.

    VERIFIKASI: Instruksi rollback ada di catatan rilis.
  8. 08

    Validasi setelah rilis

    Bandingkan jalur lab yang sama dan segmen lapangan sebanding selama jendela pelaporan.

    VERIFIKASI: Baseline dan tindak lanjut menggunakan cakupan pengukuran yang sama.
  9. 09

    Ulangi pada titik peluncuran

    Periksa template, kampanye, embed, dan perubahan pengiriman baru.

    VERIFIKASI: Proses peluncuran menetapkan pemeriksaan performa dan pemilik remediasi.
TOPIK DISKUSI

Bandingkan kompromi, bukan data pribadi.

Gunakan prompt ini dengan tim Anda atau komunitas pemilik situs. Bagikan metode dan pelajaran, tetapi jangan pernah menempelkan kredensial, data pelanggan, atau detail infrastruktur yang tidak bersifat publik.

  1. 01

    Template halaman mana yang mengungkapkan penyebab yang paling jelas dan dapat direproduksi dari pengalaman yang lambat atau tidak stabil, dan bukti apa yang membantu tim Anda memprioritaskannya?

  2. 02

    Bagaimana Anda membedakan sinyal regresi lab yang berguna dari masalah data lapangan yang pantas mendapat pekerjaan segera dalam proses rilis Anda?

  3. 03

    Praktik rollback atau review apa yang membuat perubahan performa lebih aman bagi tim Anda tanpa memperlambat setiap rilis rutin?

SUMBER POPULER / TERPERCAYA

Buka materi sumber.

Google Search CentralUnderstanding Core Web Vitals and Google search results ↗

Definisi resmi, target pengalaman yang dipublikasikan, dan tautan alat pengukuran.

Ditinjau 2026-09-27
web.devWeb Vitals ↗

Menjelaskan penilaian persentil ke-75 dan peran berbeda data lapangan dan lab.

Ditinjau 2026-09-27
web.devOptimize Largest Contentful Paint ↗

Panduan resmi untuk identifikasi elemen LCP dan diagnosis jalur pemuatan.

Ditinjau 2026-09-27
web.devOptimize Interaction to Next Paint ↗

Diagnosis INP berbasis lapangan resmi dan panduan penanganan delay interaksi.

Ditinjau 2026-09-27
web.devOptimize Cumulative Layout Shift ↗

Penyebab umum pergeseran dan solusi tata letak yang stabil.

Ditinjau 2026-09-27
web.devWhy lab and field data can be different and what to do about it ↗

Mengapa hasil terkontrol dan hasil pengguna nyata bisa berbeda dan cara menggunakan keduanya.

Ditinjau 2026-09-27

Kebijakan sumber. Klaim tentang definisi, target, batasan pengukuran, dan remediasi menggunakan sumber resmi Google Search Central dan web.dev yang tercantum di sini. Tautan internal bersifat navigasi, bukan bukti.

PENJELASAN SINGKAT

Pertanyaan umum.

Haruskah saya memperbaiki LCP, INP, atau CLS terlebih dahulu?

Perbaiki masalah yang memiliki bukti lapangan jelas pada jalur penting dan solusi yang proporsional. Masalah CLS pada template bersama mungkin didahulukan; interaksi checkout yang lebih lambat tetapi menghalangi penyelesaian bisa lebih penting. Jangan memutuskan hanya dari skor terendah.

Mengapa PageSpeed Insights berbeda dengan tes lokal saya?

Pengujian lab memakai kondisi terkontrol. Data lapangan mencerminkan perangkat nyata, jaringan, cache, dan perilaku, dan mungkin mengidentifikasi elemen LCP yang berbeda atau interaksi/tata letak yang muncul kemudian. Prioritaskan bukti lapangan dan gunakan lab untuk mendiagnosis.

Apakah lulus Core Web Vitals akan meningkatkan peringkat saya?

Jangan menganggap lulus sebagai jaminan peringkat. Tujuan praktisnya adalah menghadirkan pengalaman yang lebih cepat, lebih responsif, dan lebih stabil bagi pengunjung.

Status Is UP Editorial Team · Editor Pemberdayaan Ketersediaan (Uptime Enablement Editors)

Ditinjau oleh Peninjau kinerja web dan aksesibilitas. Diterbitkan 2026-09-27; diperbarui 2026-09-30.