Optimalisasi PageSpeed — Buat Website Anda Lebih Cepat di 2026

Mengapa Kecepatan Merupakan Faktor Peringkat

Google telah mengonfirmasi bahwa kecepatan halaman mempengaruhi peringkat. Halaman yang lambat membuat pengguna frustrasi, dan Google ingin memberikan pengalaman terbaik. Data dari Google menunjukkan kemungkinan pengguna meninggalkan halaman meningkat sebesar 32% ketika waktu muat meningkat dari 1 ke 3 detik.

Namun, ini bukan hanya tentang peringkat. Kecepatan secara langsung mempengaruhi kinerja bisnis Anda:

Konversi — Setiap detik tambahan waktu muat mengurangi konversi hingga 7%
Tingkat pentalan — 53% pengguna seluler meninggalkan halaman yang memuat lebih dari 3 detik
Pengalaman pengguna — Halaman cepat terasa profesional dan dapat dipercaya

Core Web Vitals — Metrik Kecepatan Google

Google mengukur kecepatan melalui tiga metrik Core Web Vitals:

LCP — Largest Contentful Paint

Mengukur kapan elemen terbesar yang terlihat (biasanya sebuah gambar atau judul) selesai dimuat.

Baik: Di bawah 2,5 detik
Perlu perbaikan: 2,5 — 4,0 detik
Buruk: Di atas 4,0 detik

INP — Interaction to Next Paint

Mengukur seberapa cepat halaman bereaksi saat pengguna berinteraksi (mengklik, mengetik, menggulir).

Baik: Di bawah 200ms
Perlu perbaikan: 200 — 500ms
Buruk: Di atas 500ms

CLS — Cumulative Layout Shift

Mengukur seberapa banyak tata letak bergerak selama pemuatan. Anda tahu rasanya — Anda ingin mengklik sesuatu, tetapi tiba-tiba kontennya bergerak dan Anda mengklik yang lain.

Baik: Di bawah 0,1
Perlu perbaikan: 0,1 — 0,25
Buruk: Di atas 0,25

10 Tips Optimalisasi Konkrit

1. Optimalisasi Gambar

Gambar biasanya merupakan penyebab terbesar. Gunakan format modern seperti WebP atau AVIF, yang dapat mengurangi ukuran file hingga 30-50% tanpa kehilangan kualitas yang terlihat.

Kompres semua gambar sebelum diunggah
Gunakan loading="lazy" pada gambar yang tidak terlihat pada pemuatan awal
Selalu tentukan width dan height untuk menghindari CLS
Gunakan gambar responsif dengan srcset untuk berbagai ukuran layar

2. Minify CSS dan JavaScript

Hapus kode yang tidak terpakai, ruang kosong, dan komentar dari file CSS dan JS Anda. Kebanyakan alat pengembangan melakukan ini secara otomatis, tetapi pastikan ini benar-benar terjadi di lingkungan produksi.

3. Aktifkan Kompresi

Pastikan server Anda mengirimkan file dengan kompresi Gzip atau Brotli. Ini dapat mengurangi ukuran file hingga 70%.

4. Gunakan Cache Browser

Atur header Cache-Control sehingga browser menyimpan file statis (CSS, JS, gambar) secara lokal. Ketika pengguna mengunjungi kembali, file ini tidak perlu diunduh lagi.

5. Kurangi Waktu Respons Server

Waktu respons server Anda (Time to First Byte, TTFB) harus di bawah 200ms. Solusi:

Gunakan penyedia hosting yang cepat
Aktifkan caching sisi server
Optimalkan kueri database
Gunakan CDN untuk menyajikan file statis dari server yang dekat dengan pengguna

6. Tunda JavaScript Non-Kritis

JavaScript yang tidak diperlukan untuk tampilan awal harus dimuat secara asinkron dengan async atau defer. Ini biasanya mencakup analitik, widget obrolan, dan embed media sosial.

7. Preload Sumber Daya Kritis

Gunakan untuk font, CSS, dan gambar yang dibutuhkan untuk tampilan awal. Ini memberi tahu browser untuk memprioritaskan file-file ini.

8. Hapus Sumber Daya yang Menghalangi Rendering

CSS dan JavaScript dalam menghalangi rendering halaman. Pindahkan CSS non-kritis ke bagian bawah, dan sertakan CSS yang dibutuhkan untuk tampilan awal (CSS kritis).

9. Gunakan CDN

Jaringan Pengiriman Konten mendistribusikan file Anda di server di seluruh dunia. Pengguna mengunduh dari server terdekat, secara signifikan mengurangi latensi.

10. Optimalisasi Font Web

Font kustom dapat memperlambat tampilan teks:

Gunakan font-display: swap sehingga teks muncul dengan font cadangan saat font kustom dimuat
Subset font Anda hanya untuk karakter yang Anda gunakan
Preload font yang paling penting
Pertimbangkan font sistem untuk teks tubuh

Cara Menguji Kecepatan Anda

Google PageSpeed Insights

Alat resmi dari Google. Memberikan Anda data lab (simulasi) dan data lapangan (pengguna nyata) beserta saran perbaikan konkret.

Chrome DevTools

Buka DevTools (F12), pergi ke panel "Performance" dan rekam pemuatan halaman. Anda dapat melihat dengan tepat apa yang memakan waktu dan dalam urutan apa file dimuat.

WebPageTest

Alat pengujian lanjutan yang memungkinkan Anda menguji dari lokasi dan kecepatan koneksi yang berbeda. Memberikan diagram air terjun yang mendetail.

Prioritisasi — Mulailah dari Sini

Jika Anda perlu memilih tiga hal untuk difokuskan:

Gambar — Kompres dan konversi ke WebP. Dampak terbesar dengan usaha paling sedikit.
Caching — Atur header Cache-Control yang benar. Penyiapan satu kali.
JavaScript — Tunda segala sesuatu yang non-kritis. Kurangi skrip pihak ketiga.

Ingin tahu seberapa baik kinerja situs Anda? Jalankan audit gratis dan lihat Core Web Vitals serta skor kecepatan Anda.