Langkah Optimasi
Cara optimasi Core Web Vitals WordPress 2026
Ikuti langkah-langkah berikut secara berurutan. Setiap langkah memiliki dampak nyata yang dapat diukur melalui PageSpeed Insights atau Google Search Console.
1
Ukur kondisi awal dengan PageSpeed Insights
Sebelum mengoptimasi, catat skor LCP, INP, dan CLS halaman utama serta beberapa halaman penting lainnya seperti artikel dan halaman produk. Buka pagespeed.web.dev, masukkan URL, lalu simpan hasil skor sebagai patokan. Uji juga melalui Google Search Console di menu Core Web Vitals untuk melihat data lapangan dari pengguna nyata.
Uji minimal 3–5 halaman berbeda, bukan hanya halaman depan. Setiap tipe halaman seperti beranda, artikel, dan halaman produk bisa memiliki skor yang sangat berbeda.
2
Gunakan hosting yang cepat dengan server LiteSpeed atau NVMe
Hosting adalah pondasi semua metrik Core Web Vitals. Server yang lambat menyebabkan TTFB (Time to First Byte) tinggi yang langsung memperburuk LCP. Pastikan hosting menggunakan teknologi LiteSpeed atau server NVMe SSD. Jika saat diuji di PageSpeed Insights bagian “Reduce server response time” muncul sebagai masalah, pertimbangkan untuk upgrade hosting terlebih dahulu sebelum melakukan optimasi lainnya.
TTFB idealnya di bawah 600ms. Jika server response time melebihi angka ini, optimasi plugin dan gambar tidak akan memberikan hasil maksimal tanpa memperbaiki hosting terlebih dahulu.
3
Pasang plugin caching: WP Rocket atau LiteSpeed Cache
Plugin caching adalah salah satu intervensi paling efektif untuk WordPress. Plugin ini menyimpan halaman dalam bentuk file statis sehingga tidak perlu memproses ulang setiap kali pengunjung datang. Pilih salah satu plugin berikut sesuai kondisi hosting:
Gratis
LiteSpeed Cache
Membutuhkan server LiteSpeed
Sangat powerful jika hosting menggunakan server LiteSpeed. Menangani caching, minifikasi, lazy load, dan critical CSS secara otomatis dalam satu plugin.
Premium $59/tahun
WP Rocket
Bekerja di semua hosting
Plugin caching terbaik untuk semua jenis hosting. Pengaturan sederhana dan langsung meningkatkan LCP, INP, serta CLS secara signifikan dengan konfigurasi minimal.
Gratis
W3 Total Cache
Semua hosting
Alternatif gratis yang cukup lengkap, namun membutuhkan konfigurasi lebih teknis dibanding WP Rocket atau LiteSpeed Cache.
Aktifkan fitur Page Caching, Browser Caching, Minify CSS/JS, dan Defer JavaScript di pengaturan plugin caching. Keempat fitur ini memberikan dampak terbesar terhadap skor Core Web Vitals.
4
Optimalkan gambar: kompres, konversi ke WebP, dan atur lazy loading
Gambar adalah penyebab terbesar LCP yang buruk. Sekitar 80% masalah LCP pada WordPress berasal dari gambar yang tidak dioptimasi. Terapkan keempat langkah berikut:
- Kompres gambar dan konversi ke format WebP menggunakan plugin ShortPixel atau Imagify. Format WebP 25–35% lebih kecil dari JPEG dengan kualitas visual yang setara.
- Aktifkan lazy loading pada gambar yang berada di luar area tampilan layar (below the fold). Gambar hero utama jangan diberi lazy loading karena justru akan memperlambat LCP.
- Selalu tambahkan atribut
widthdanheightpada setiap tag gambar agar browser dapat memesan ruang sebelum gambar dimuat sehingga mencegah CLS. - Untuk gambar hero yang menjadi elemen LCP utama, tambahkan atribut
fetchpriority="high"agar browser memprioritaskan pemuatannya dibanding aset lainnya.
<img src="hero.webp"
width="1200" height="630"
fetchpriority="high"
loading="eager"
alt="Deskripsi gambar">
<img src="thumbnail.webp"
width="600" height="400"
loading="lazy"
alt="Deskripsi gambar">
5
Gunakan CDN (Content Delivery Network)
CDN menyimpan salinan file website di server yang tersebar di berbagai lokasi geografis. Ketika pengunjung mengakses website, file dikirim dari server CDN terdekat secara fisik. Cara ini sangat membantu meningkatkan LCP terutama untuk pengunjung dari luar kota atau luar negeri.
- Cloudflare (gratis) adalah pilihan yang sudah sangat memadai untuk sebagian besar website WordPress. Aktifkan melalui cloudflare.com lalu arahkan nameserver domain ke Cloudflare.
- BunnyCDN adalah alternatif premium dengan harga terjangkau sekitar $1 per 100GB. Tersedia lebih banyak lokasi server dibanding paket gratis Cloudflare.
- Plugin caching seperti WP Rocket memiliki integrasi CDN bawaan yang memudahkan proses setup tanpa perlu konfigurasi manual di luar WordPress.
6
Kurangi JavaScript yang tidak perlu untuk meningkatkan INP
INP (Interaction to Next Paint) mengukur seberapa cepat halaman merespons klik atau sentuhan pengguna. JavaScript yang berat adalah penyebab utama INP yang buruk karena memblokir main thread browser. Terapkan langkah-langkah berikut untuk menguranginya:
- Audit plugin aktif dan nonaktifkan yang tidak digunakan. Rata-rata WordPress memiliki 20–30 plugin aktif dan setiap plugin menambah beban JavaScript di halaman.
- Gunakan plugin Perfmatters ($24.95/tahun) untuk menonaktifkan script per halaman. Misalnya, script WooCommerce dapat dinonaktifkan di halaman blog yang tidak membutuhkannya.
- Aktifkan fitur “Defer JavaScript” di plugin caching agar script non-kritis dimuat setelah konten utama selesai ditampilkan di layar.
- Hindari tema WordPress yang memuat CSS dan JavaScript berlebihan untuk fitur-fitur yang tidak digunakan di website.
Di PageSpeed Insights, periksa bagian “Reduce unused JavaScript” dan “Avoid long main-thread tasks” untuk mengetahui script mana yang paling banyak menyumbang masalah INP.
7
Perbaiki CLS: tetapkan ukuran eksplisit pada semua elemen media
CLS terjadi ketika elemen halaman bergeser secara tak terduga saat halaman dimuat, misalnya tombol yang tiba-tiba bergerak ke bawah karena iklan atau gambar dimuat di atasnya. Untuk menghilangkan layout shift, terapkan langkah-langkah berikut:
- Selalu tambahkan atribut
widthdanheightpada setiap tag<img>,<video>, dan<iframe>agar browser dapat memesan ruang sebelum elemen dimuat. - Untuk video YouTube yang disematkan, bungkus iframe dengan div wrapper dan terapkan teknik CSS aspect-ratio agar ukurannya proporsional dan stabil.
- Jika menggunakan Google Ads atau jaringan iklan lain, tetapkan ukuran slot iklan secara eksplisit agar ruang tersedia sebelum iklan selesai dimuat.
- Font kustom yang dimuat terlambat bisa menyebabkan CLS. Tambahkan
font-display: swappada deklarasi@font-faceuntuk mencegah teks tidak terlihat saat font sedang dimuat.
/* Wrapper iframe YouTube - mencegah CLS */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* rasio 16:9 */
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
/* Font kustom - cegah teks tidak terlihat saat loading */
@font-face {
font-family: 'NamaFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
8
Minifikasi CSS/JS dan aktifkan preload resource kritis
Minifikasi menghapus spasi, komentar, dan karakter yang tidak perlu dari file CSS dan JavaScript sehingga mengurangi ukuran file hingga 20–40%. Langkah ini tersedia di hampir semua plugin caching WordPress dengan satu klik. Selain itu, gunakan <link rel="preload"> untuk memberi tahu browser agar mengunduh resource kritis lebih awal sebelum parsing HTML selesai.
<!-- Preload font kritis agar tidak memblokir render -->
<link rel="preload"
href="/fonts/namaFont.woff2"
as="font"
type="font/woff2"
crossorigin>
<!-- Preload gambar LCP (hero image) -->
<link rel="preload"
href="/images/hero.webp"
as="image">
WP Rocket memiliki fitur “Preload” bawaan yang menangani ini secara otomatis. Aktifkan melalui menu Settings kemudian Preload di dalam panel WP Rocket.
Mengapa Penting
Manfaat optimasi Core Web Vitals WordPress
Core Web Vitals bukan sekadar angka teknis. Di balik setiap metrik ada dampak nyata terhadap SEO, konversi, dan pengalaman pengguna.
Peringkat Google lebih tinggi
Sejak 2021, Google menjadikan Core Web Vitals sebagai salah satu faktor pemeringkatan. Ketika dua halaman memiliki kualitas konten serupa, skor CWV yang lebih baik dapat menjadi pembeda posisi di hasil pencarian.
Bounce rate lebih rendah
53% pengguna mobile meninggalkan halaman yang memuat lebih dari 3 detik. Halaman dengan LCP yang cepat dan layout yang stabil membuat pengunjung bertahan lebih lama.
Konversi meningkat
Setiap 100ms perbaikan LCP dapat meningkatkan konversi rata-rata 1–3%. Website yang bergerak dari skor “Poor” ke “Good” umumnya mengalami peningkatan konversi hingga 25%.
Prioritas mobile-first indexing
Google menggunakan versi mobile sebagai dasar penilaian website. Mengoptimasi Core Web Vitals berarti memastikan performa yang baik untuk mayoritas pengguna smartphone.
Lebih mudah muncul di AI Overviews
Google AI Overviews cenderung mengutip halaman yang memiliki performa teknis baik. Website yang memenuhi standar CWV memiliki peluang lebih besar untuk disertakan sebagai sumber referensi AI.
Kepercayaan pengguna meningkat
Layout yang stabil (CLS rendah) dan respons cepat terhadap klik (INP rendah) membuat website terasa profesional dan terpercaya, terutama bagi pengunjung yang baru pertama kali datang.
Referensi Istilah
Penjelasan istilah yang digunakan
Kumpulan definisi istilah teknis yang muncul dalam panduan optimasi di atas, dijelaskan dalam bahasa yang mudah dipahami.
Largest Contentful Paint
LCP
≤ 2.5s = Baik
2.5–4s = Perlu perbaikan
> 4s = Buruk
Waktu yang dibutuhkan untuk menampilkan elemen konten terbesar yang terlihat di layar, biasanya gambar hero, video, atau blok teks besar. LCP mengukur kapan pengguna merasakan halaman sudah selesai dimuat. Semakin cepat LCP, semakin cepat pula pengguna dapat mengakses konten utama.
Interaction to Next Paint
INP
≤ 200ms = Baik
200–500ms = Perlu perbaikan
> 500ms = Buruk
Waktu yang dibutuhkan halaman untuk memberikan respons visual setelah pengguna melakukan interaksi seperti klik tombol, sentuhan menu, atau mengetik di kolom pencarian. INP menggantikan FID (First Input Delay) sejak Maret 2024 dan mengukur semua interaksi selama pengguna berada di halaman, bukan hanya interaksi pertama. INP yang buruk membuat website terasa lambat meski secara teknis sudah termuat.
Cumulative Layout Shift
CLS
≤ 0.1 = Baik
0.1–0.25 = Perlu perbaikan
> 0.25 = Buruk
Ukuran seberapa besar elemen halaman bergeser secara tak terduga saat halaman sedang dimuat. Contoh CLS yang buruk: pengguna akan mengklik tombol “Baca selengkapnya” namun sebuah gambar muncul di atasnya sehingga tombol itu bergeser ke bawah dan klik mengenai gambar yang salah. CLS dihitung dari perkalian fraksi dampak dan fraksi jarak pergeseran elemen.
Time to First Byte
TTFB
Target: < 600ms
Waktu yang dibutuhkan dari saat browser mengirim permintaan ke server hingga byte pertama respons diterima. TTFB mencerminkan kecepatan server dan infrastruktur hosting. TTFB yang tinggi lebih dari 600ms adalah sinyal bahwa hosting perlu di-upgrade atau CDN perlu diaktifkan karena kondisi ini mempengaruhi semua metrik Core Web Vitals lainnya.
Caching
Page / Browser Cache
Teknik menyimpan salinan halaman atau file seperti CSS, JS, dan gambar agar tidak perlu diproses ulang setiap kali diminta. Page caching menyimpan halaman HTML yang sudah jadi di server sehingga WordPress tidak perlu menjalankan query database setiap kali ada pengunjung. Browser caching menyimpan file di perangkat pengunjung sehingga kunjungan berikutnya jauh lebih cepat.
Content Delivery Network
CDN
Jaringan server yang tersebar di berbagai lokasi geografis yang menyimpan dan melayani file website. Ketika pengguna mengakses website, CDN secara otomatis mengarahkan permintaan ke server CDN yang paling dekat secara fisik dengan pengguna. Cara ini mengurangi latensi jaringan dan mempercepat pemuatan semua aset statis seperti gambar, CSS, dan JavaScript.
Render-blocking resources
Blocking Resources
File CSS atau JavaScript yang mencegah browser menampilkan konten halaman sampai file tersebut selesai diunduh dan diproses. Browser harus menyelesaikan parsing dan eksekusi file-file ini sebelum dapat menggambar elemen halaman. Solusinya adalah menunda (defer) script non-kritis atau memasukkan CSS kritis langsung ke dalam HTML (inline critical CSS).
Lazy Loading
loading=”lazy”
Teknik menunda pemuatan gambar atau iframe sampai elemen tersebut hampir masuk ke area tampilan layar pengguna (viewport). Alih-alih memuat semua gambar sekaligus saat halaman dibuka, lazy loading hanya memuat gambar yang relevan dengan posisi scroll saat ini. Ini mengurangi total data yang diunduh saat halaman pertama kali dimuat dan langsung memperbaiki skor LCP.
Minifikasi (Minify)
CSS / JS Minify
Proses menghapus semua karakter yang tidak diperlukan dari kode CSS dan JavaScript termasuk spasi, baris baru, komentar, dan nama variabel yang panjang, tanpa mengubah cara kerja kode tersebut. Hasil akhirnya adalah file yang lebih kecil biasanya 20–40% lebih kecil yang lebih cepat diunduh oleh browser.
WebP
Format Gambar Modern
Format gambar modern yang dikembangkan Google. WebP menghasilkan file 25–35% lebih kecil dibanding JPEG atau PNG dengan kualitas visual yang sama atau lebih baik. Semua browser modern saat ini mendukung WebP. WordPress mendukung WebP secara native sejak versi 5.8. Plugin seperti ShortPixel atau Imagify dapat mengonversi semua gambar lama ke WebP secara otomatis.
fetchpriority=”high”
Priority Hints
Atribut HTML yang memberi tahu browser agar memprioritaskan pengunduhan resource tertentu lebih awal dibanding resource lainnya. Sangat berguna pada gambar hero atau elemen yang menjadi LCP karena browser akan langsung mengunduh gambar tersebut tanpa menunggu antrian. Atribut ini adalah salah satu cara paling efektif untuk memperbaiki skor LCP.
PageSpeed Insights
PSI
Alat gratis dari Google yang tersedia di pagespeed.web.dev untuk menganalisis performa halaman web. PSI menampilkan dua jenis data: Lab Data yaitu hasil simulasi dalam kondisi terkontrol yang berguna untuk debugging, dan Field Data yaitu data dari pengguna nyata melalui Chrome UX Report (CrUX) yang digunakan Google untuk penilaian SEO. Untuk keperluan SEO, selalu perhatikan Field Data, bukan hanya Lab Data.
Main Thread
Browser Main Thread
Jalur utama tempat browser menjalankan semua tugas JavaScript, layout, dan rendering halaman. Karena browser berjalan dalam single-thread, tugas JavaScript yang berat akan memblokir jalur ini dan menyebabkan browser tidak bisa merespons interaksi pengguna. Inilah penyebab utama INP yang buruk. Solusinya adalah memecah tugas berat menjadi potongan kecil menggunakan teknik seperti
setTimeout atau Web Workers.font-display: swap
CSS Font Loading
Instruksi CSS yang memberi tahu browser cara menangani font kustom saat sedang dimuat. Dengan nilai
swap, browser langsung menampilkan teks menggunakan font sistem yang tersedia (fallback font), lalu menukarnya dengan font kustom setelah selesai diunduh. Cara ini mencegah teks tidak terlihat saat font sedang dimuat (FOIT) yang dapat menyebabkan CLS dan memperlambat rendering halaman.Mulai ukur skor Core Web Vitals sekarang
Gunakan tools resmi Google berikut untuk mengecek kondisi website WordPress sebelum dan sesudah melakukan optimasi.
Layanan Profesional
Butuh bantuan mengoptimalkan website?
Optimasi Core Web Vitals butuh waktu dan keahlian teknis. Tim profesional siap membantu mulai dari pembuatan website, optimasi SEO, hingga penulisan konten berkualitas.
Optimasi SEO
Jasa SEO Profesional Indonesia
Tingkatkan peringkat website di Google dengan strategi SEO teknis termasuk optimasi Core Web Vitals, riset kata kunci, dan pembangunan tautan.
Lihat layanan ↗
Pembuatan Website
Bikin Website Murah & Cepat
Website WordPress yang dibangun dari awal dengan performa optimal, loading cepat, dan sudah dioptimasi untuk melewati standar Core Web Vitals Google.
Lihat layanan ↗
Konten Berkualitas
Jasa Penulis Artikel SEO
Artikel yang ditulis oleh penulis berpengalaman, dioptimasi untuk mesin pencari, dan siap mendatangkan traffic organik yang konsisten.
Lihat layanan ↗
Share :
