Website Anda loading lambat? Pengunjung kabur sebelum halaman selesai muncul? PageSpeed Insights bisa membantu Anda menemukan masalahnya secara spesifik, bukan cuma menebak-nebak. Berikut panduan lengkap memakai tool gratis dari Google ini, dari cara baca skor sampai cara memperbaiki temuannya.
Apa itu PageSpeed Insights?
**PageSpeed Insights (PSI)** adalah tool gratis dari Google yang mengukur kecepatan dan kualitas pengalaman pengguna sebuah halaman web, baik di versi mobile maupun desktop. Di baliknya, PSI menjalankan **Lighthouse** — engine audit open-source milik Google — untuk mensimulasikan pemuatan halaman lalu memberi skor 0-100 beserta daftar rekomendasi konkret.
Anda bisa mengaksesnya gratis di **pagespeed.web.dev**, cukup masukkan URL, tanpa perlu install apa pun.
Data Lab vs Data Lapangan (CrUX)
Satu hal yang sering bikin bingung: PSI sebenarnya menampilkan **dua jenis data sekaligus**, dan keduanya bisa berbeda cukup jauh.
Data Lab (Lighthouse)
Ini hasil simulasi terkontrol — Google "membuka" halaman Anda dari server mereka dengan kondisi jaringan dan perangkat yang disimulasikan. Datanya konsisten dan mudah didiagnosis karena tidak dipengaruhi variasi koneksi pengguna asli, tapi belum tentu mencerminkan pengalaman nyata pengunjung Anda.
Data Lapangan (CrUX / Chrome UX Report)
Ini data agregat dari pengguna Chrome sungguhan yang pernah membuka halaman Anda, dikumpulkan dalam rentang 28 hari terakhir. Data lapangan inilah yang **benar-benar dipakai Google untuk penilaian Core Web Vitals di ranking pencarian** — bukan skor Lighthouse. Jika trafik website Anda masih kecil, PSI kadang tidak punya cukup data lapangan dan hanya menampilkan hasil lab saja.
Mengapa Kecepatan Website Penting?
1. Pengaruh ke SEO (Google Ranking)
Google secara resmi menjadikan Core Web Vitals sebagai bagian dari sinyal Page Experience dalam algoritma ranking-nya. Website yang lambat dan tidak stabil punya peluang lebih kecil bersaing di halaman pertama, terutama saat kualitas kontennya setara dengan kompetitor.
2. Pengalaman Pengunjung
Riset Google/SOASTA menemukan bahwa lebih dari separuh pengunjung mobile meninggalkan halaman yang butuh lebih dari 3 detik untuk loading. Untuk UMKM dan bisnis lokal di Indonesia yang mayoritas trafiknya dari HP dengan koneksi seluler, ini artinya calon pelanggan kabur sebelum sempat melihat produk Anda.
3. Konversi Penjualan
Amazon pernah melaporkan bahwa setiap penambahan 100ms waktu loading bisa menurunkan penjualan sekitar 1%. Angka persisnya bisa berbeda tiap bisnis, tapi polanya konsisten di banyak studi: makin lambat halaman, makin banyak calon pembeli yang batal checkout.
Metrik yang Diukur PageSpeed Insights
PSI menampilkan enam metrik performa utama. Tiga di antaranya — LCP, INP, dan CLS — disebut **Core Web Vitals** dan jadi fokus utama Google.
LCP (Largest Contentful Paint)
Mengukur berapa lama elemen konten terbesar di layar (biasanya gambar hero, banner, atau blok teks utama) selesai dirender. Target: **baik di bawah 2.5 detik**, 2.5-4 detik perlu perbaikan, di atas 4 detik buruk.
INP (Interaction to Next Paint)
Sejak Maret 2024, metrik ini menggantikan First Input Delay (FID) sebagai Core Web Vital resmi. INP mengukur responsivitas halaman terhadap semua interaksi pengguna sepanjang kunjungan (klik, tap, input keyboard), bukan cuma interaksi pertama. Target: **baik di bawah 200ms**, 200-500ms perlu perbaikan, di atas 500ms buruk.
CLS (Cumulative Layout Shift)
Mengukur seberapa banyak elemen di halaman "loncat" posisi tanpa diminta pengguna, misalnya tombol yang tiba-tiba bergeser saat gambar baru muncul. Target: **baik di bawah 0.1**, 0.1-0.25 perlu perbaikan, di atas 0.25 buruk.
FCP (First Contentful Paint)
Waktu sampai elemen pertama (teks, gambar, atau border) muncul di layar. Target baik: **di bawah 1.8 detik**.
TBT (Total Blocking Time)
Total waktu thread utama browser "terkunci" oleh JavaScript sehingga tidak bisa merespons input pengguna. Target baik: **di bawah 200ms**. TBT versi lab ini berkorelasi kuat dengan INP di data lapangan.
SI (Speed Index)
Mengukur seberapa cepat konten halaman terlihat mengisi layar secara visual selama proses loading. Target baik: **di bawah 3.4 detik**.
Cara Menggunakan PageSpeed Insights
Memahami Skor PageSpeed
Skor 0-100 ini dihitung oleh Lighthouse berdasarkan kombinasi berbobot dari metrik-metrik di atas, dengan LCP, TBT, dan CLS punya bobot terbesar.
Skor 0-49 (Merah): Buruk
Website sangat lambat dan butuh perbaikan segera, biasanya karena gambar berat, JavaScript berlebihan, atau server yang lambat merespons.
Skor 50-89 (Oranye): Perlu Perbaikan
Website cukup jalan tapi masih ada bottleneck yang bisa dioptimasi, sering kali render-blocking resource atau gambar yang belum terkompresi optimal.
Skor 90-100 (Hijau): Bagus
Website sudah cepat dan optimal berdasarkan standar Lighthouse. Tapi tetap cek data lapangan (CrUX) untuk memastikan pengguna asli juga merasakan hal yang sama.
Opportunities vs Diagnostics: Apa Bedanya?
Setelah skor, PSI menampilkan dua daftar rekomendasi yang sering tertukar maknanya.
**Opportunities** berisi saran spesifik yang punya estimasi penghematan waktu langsung, misalnya "Serve images in next-gen formats — potensi hemat 1.2 detik". Ini prioritas utama untuk diperbaiki.
**Diagnostics** berisi informasi tambahan yang tidak secara langsung dihitung ke skor tapi tetap memengaruhi pengalaman nyata, seperti jumlah request JavaScript, ukuran DOM yang terlalu besar, atau penggunaan library pihak ketiga yang berat.
Penyebab Umum Skor PageSpeed Rendah
Dari pengalaman menangani puluhan website klien, ini penyebab paling sering muncul di laporan PSI:
Gambar terlalu besar
Foto produk atau banner yang diunggah langsung dari HP/kamera tanpa kompresi bisa berukuran 3-8MB. Solusinya konversi ke format **WebP atau AVIF**, resize sesuai ukuran tampil sebenarnya, dan kompres lossy secukupnya sebelum upload.
CSS dan JavaScript yang memblokir rendering
Jika file CSS/JS dimuat secara blocking di `<head>`, browser harus menunggu file itu selesai sebelum menampilkan apa pun. Solusinya: pisahkan CSS kritis (inline di atas fold), gunakan atribut `defer` atau `async` untuk script yang tidak wajib dieksekusi lebih dulu.
Tidak ada lazy loading
Semua gambar di halaman dimuat sekaligus saat page load, padahal yang di bawah fold belum tentu langsung dilihat pengunjung. Tambahkan `loading="lazy"` pada gambar di luar viewport pertama.
Server lambat atau tidak pakai CDN
Time to First Byte (TTFB) yang lambat — sering karena hosting murah tanpa caching atau server jauh dari lokasi pengunjung — bikin semua metrik lain ikut tertunda. Pakai CDN agar file statis disajikan dari server terdekat ke pengunjung.
Layout shift karena gambar tanpa dimensi
Kalau tag `<img>` tidak punya atribut `width` dan `height` (atau CSS `aspect-ratio`), browser tidak tahu berapa ruang yang harus disiapkan sebelum gambar selesai dimuat, sehingga konten di sekitarnya "loncat" begitu gambar muncul — inilah penyebab utama CLS tinggi.
Berapa Skor yang Ideal?
Untuk kebutuhan bisnis, target realistis adalah **90+ untuk desktop** dan **80+ untuk mobile**, dengan syarat ketiga Core Web Vitals (LCP, INP, CLS) lulus di data lapangan — bukan cuma skor lab yang tinggi. Anda bisa cek gratis kondisi website Anda saat ini lewat halaman [/check/](/check/) di KayFreyTech.
Website Cepat Standar dari KayFreyTech
Kenapa repot optimasi sendiri kalau bisa langsung dapat website cepat sejak awal? Di **KayFreyTech**, setiap website yang kami bangun sudah dioptimasi dengan standar tinggi sebelum serah terima ke klien:
**Jaminan kualitas kami:**
Kami menggunakan teknologi modern (React, Vite, Tailwind) dengan teknik optimasi seperti lazy loading, code splitting, dan kompresi gambar otomatis sejak fase development, bukan tambal sulam setelah website jadi.
**Hasil nyata:** 13+ website sudah live dengan skor PageSpeed konsisten 95+. [Cek portfolio →](/portfolio)
Kesimpulan
PageSpeed Insights adalah tool wajib untuk siapa pun yang serius mengelola website, bukan sekadar untuk lihat angka skor tapi untuk memahami bottleneck nyata yang menahan konversi dan ranking. Fokus pada data lapangan (CrUX) dan perbaiki dulu temuan dengan estimasi penghematan terbesar di bagian Opportunities.
**Mau website yang sudah cepat dari awal, tanpa perlu optimasi manual berulang kali?** [Hubungi KayFreyTech](/contact) untuk konsultasi gratis dan dapatkan website dengan PageSpeed 95+ dijamin!