Semakin bagus skor Core Web Vitals maka Google akan memberikan hadiah meningkatnya posisi SERP.
Tetapi bagaimana caranya menaikan skor Core Web Vitals? Apalagi sampai memiliki nilai sempurna 100/100 ijo-ijo.
Jangan sampai kelewatan, akan saya bahas tuntas di-studi kasus pertama saya ini.
Apa itu Core Web Vitals?
Core Web Vitals adalah suatu metriks yang dipakai Google untuk menilai apakah suatu website itu cukup baik dari segi experience bagi user atau tidak.
Core Web Vitals terbagi menjadi tiga metriks:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Nah, sebelum ke studi kasus, Anda wajib mengerti ke-tiga istilah di atas. Saya akan coba jelaskan se-sederhana mungkin.

Perhatikan gambar 1 di atas. Jelas bahwa Core Web Vitals adalah salah satu dari banyak faktor SEO yang diginakan untuk menilai suatu website.
Tujuannya hanya satu. Menilai apakah website itu memberikan pengalaman terbaik kepada pengunjungnya atau malah menyesatkan.
Largest Contentful Paint (LCP)
Penilaian pertama adalah LCP. LCP fokusnya adalah untuk menilai apakah suatu website memiliki loading yang baik atau buruk. Semakin cepat website, maka nilai LCP semakin baik.
First Input Delay (FID)
Penilaian kedua adalah FID. FID mengukur apakah suatu website cukup responsive atau tidak.
Bayangkan sebuah tombol. Ketika tombol tersebut di klik, apakah memberikan response langsung atau tidak, kurang lebih seperti itu.
Pada dasarnya jika website Anda adalah sebuah blog. Anda tidak harus peduli ini, karena konten website Anda hanyalah text.
Cumulative Layout Shift (CLS)
Penilaian ketiga adalah CLS. CLS hampir sama dengan LCP, mengukur sebarapa cepat website Anda bisa dilihat oleh pengunjung.
Bedanya CLS lebih detail. CLS akan mengukur sebarapa cepat gambar muncul, seberapa cepat fonts di render, dll. CLS akan mengukur semua komponen yang muncul di website Anda.
Semakin cepat, semakin baik.
Bagaimana cara menilai Core Web Vitals?
Untuk mengukur ketiga metriks tersebut ada banyak tools yang bisa Anda gunakan. Jika Anda memakai browser Google Chrome Anda bisa membuka developer tools > Lighthouse > Analyze page load.
Anda juga bisa memakai website seperti PageSpeed Insight, GTMetrix, atau WebPageTest.
Di sini, saya akan memakai PageSpeed Insight.
Untuk mengukurnya, Anda hanya perlu memasukan alamat website Anda di PageSpeed Insight.
Studi kasus
Percobaan ini saya lakukan pada tanggal 22 Juli 2022. Saya mencobanya di blog ini.
Ada beberapa catatan yang perlu Anda ketahui.
Saat saya melakukan studi kasus ini, saya memakai hosting IDCloudHost WordPress Hosting paket terendah.
Saya juga memakai theme Genesis Framework yang by default sudah SEO ready dan di-optimasi untuk loading cepat.
Selanjutnya, gambar-gambar sudah saya optimize terlebih dahulu dengan LiteSpeed cache plugin yang sudah bundling dari paket hosting-nya.
Terakhir, saya memakai Jetpack plugin untuk optimize lazy loading dan CDN.
Percobaan pertama
Pada percobaan pertama, saya belum melakukan optimasi apapun. Semuanya serba default.
Berikut adalah hasil yang saya dapatkan setelah melakukan percobaan pertama di PageSpeed Insight.

Pada pengujian pertama blog ini mendapatkan skor 57 untuk mobile.
Jelas terlihat jika hampir semua metriks yang ada pada mobile bernilai buruk. Banyak ruang yang bisa saya optimalkan.
Pertama Total Blocking Time akan saya optimalkan terlebih dahulu. TBT ini biasanya paling mudah kita perbaiki. TBT ini biasanya disebabkan oleh script pihak ke-3…
…script ini di-load terlebih dahulu sebelum konten di render ke layar.
Setelah di perhatikan di bagian bawah. Terdapat opportunity:
Eliminate render-blocking resources


Benar saja. Seperti terlihat pada gambar 3 dan gambar 4. Ada beberapa script yang mem-blocking halaman saat melakukan rendering.
Sebelum halaman di-render, halaman menunggu terlebih dahulu agar script-script tersebut selesai di load.
Karena saya tidak memakai script-script seperti jquery dan lainnya. saya remove dari theme.
function my_jquery_enqueue() {
wp_deregister_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery_enqueue' );
Anda bisa memasukan kode di atas di function.php theme Anda.

Berbeda dengan mobile (gambar 2). Pada hasil pengujian desktop, nilainya hampir sempurna. Skor-nya 98.
Kenapa demikian? Karena di desktop, user relative memiliki koneksi yang lebih stabil dan hardware yang lebih cepat. Ini akan mempengaruhi bagaimana konten di-render ke layar.
Untuk desktop. Saya tidak akan melakukan apa-apa. Saya yakin perbaikan dari mobile akan membantu skor desktop.
Percobaan ke-2
Pada percobaan pertama, saya suda remove jquery script yang ada pada theme. Tujuannya adalah untuk mengurangi render blocking time.
Berikut adalah hasil dari percobaan ke-dua.

Anehnya pada hasil percobaan ke-2 di mobile. Total blocking time malah naik. Sebelumnya 430ms menjadi 600ms, setelah di-remove jquery…
…padahal ekpektasinya turun.
Tetapi bisa teman-teman lihat bahwa CLS dan LCP turun. Cukup aneh memang.

Saya tidak tahu apa korelasi antara remove jquery dan CSS. Tetapi, setelah jquery di-remove dari theme. Hasilnya malah file-file css jadi bertambah.
Optimasi yang saya lakukan di bagian ini adalah menghapus semua file css yang tidak diperlukan…
Ini sangat melelahkan karena saya harus memastikan satu per satu file css apakah digunaan atau tidak.
add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
Kode di atas adalah kode yang saya gunakan untuk menghapus file-file css yang tidak digunakan oleh theme di titiknadi.com. Saya paste kode di atas pada function.php.
Saya juga me-remove import fonts dari Google Fonts. Sebagai gantinya saya menggunakan system fonts apple.
font-family: -apple-system, Helvetica, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Lagi-lagi untuk bagian desktop tidak banyak perubahan.
Percobaan ke-3
Pada percobaan ke-2 saya sudah menghapus file-file css yang tidak saya perlukan. Lumayan banyak. Tujuannya masih sama, untuk mengurangi Total Blocking Time (TBT).
Berikut adalah hasil Google PageSpeed Insigght setelah dilakukan optimasi di percobaan sebeumnya.

Pada percobaan ke-3 di mobile, saya berhasil mengurangi blocking time sebesar 40%, dari seblumnya 600ms menjadi 390ms.
Menariknya setlah file-file css yang tidak diperlukan saya remove, tidak hanya TBT saja yang membaik. Tetapi semua metriks membaik atau sama.
Skor dari percobaan setiap percobaan terus naik, dari: 57 → 65 → 72.

Skor desktop juga mengalami kenaikan setelah dilakukan optimasi remove unused css.
Tetapi bukan berarti sudah selesai.
Jika diperhatikan lagi di bagian bawah PageSpeed Insight masih terdapat ruang yang bisa saya improve.
Masih terdapat css yang tidak terpakai, selanjutnya adalah ukuran gambar yang terlalu besar.

Blocking unused css ini cukup menjengkelkan. Saya tidak tahu dimana lagi kode-kode css yang tidak terpakai.

Untuk optimasi kali ini, saya menggunakan LiteSpeed Cache plugin. Untungnya di menu Page Optimization > CSS Setting, terdapat konfigurasi CSS Combine dan Load CSS Asynchronously.
Dua setting dari LiteSpeed Cache plugin ini akan membuat file CSS ini menjadi satu (CSS Combine) dan membuat CSS nya di-load tanpa harus mem-blocking render halaman (Load CSS Asynchronusly).

Pada bagian gambar, di PageSpeed Insight tertulis jika blog titiknadi.com memakai gambar yang tidak sesuai atau terlalu besar.
Optimasinya sederhana, saya ganti dengan gambar yang ukurannya sesuai (lebih kecil).
Percobaan ke-4
Setelah memperkecil ukuran logo gambar, css saya combine dan load secara asynchronus. Pada percobaan ke-4 skor di mobile meningkat secara signifikan.
Dari 57 → 65 → 72 →95.

Artinya apa?
Artinya adalah load secara async dapat menaikan hampir semua metriks Core Web Vitals. Kecuali untuk Speed Index, karena speed index dipengaruhi kualitas hosting.
Yang paling bisa kita lakukan untuk menaikan Speed Index adalah mengurangi query ke database.
Dengan mengurangi query, tujuannya adalah untuk meringankan beban server.
Bagaimana cara mengurangi query ke database?
Dengan cara memakai Object Cache. Nantinya untuk request dengan query-query yang sama akan di serve oleh object cache, tidak langsung ke db.
Selain dengan Object Cache. Untuk mengurangi beban server adalah dengan memakai CDN.
Nantinya file-file statis seperti gambar, css, dan javascript yang di request browser akan di handle oleh CDN.
Di sini saya memakai Cloudflare.
Saya juga tertarik dengan fitur APO Cloudflare. Menurut Cloudflare, fitur APO ini akan mempercepat waktu TTFB (Time to First Byte).

Anda tidak perlu pusing-pusing memahami apa itu TTFB. TTFB gampangnya adalah metriks yang digunakan untuk mengukur seberapa cepat latensi suatu website.
TTFB ini jika dalam Core Web Vitals akan menaikan skor Largest Contentful Paint (LCP).
Sayangnya fitur APO ini tidak gratis. Harganya 5 USD per bulan.
Untuk lebih detail bagaimana cara optimasi blog dengan Cloudflare, saya akan membahasnya pada tulisan lainnya. So, Jangan lupa subscribe.
Dengan begitu, beban server tidak lagi berat karena sudah dibantu dngan Object Cache dan CDN Cloudflare.
Percobaan ke-5
Setelah sebelumnya saya implementasi Object Cache dan CDN Cloudflare, akhirnya pada percobaan ke-5, baik untuk mobile dan desktop mendapat skor sempurna 100/100.


Kesimpulan
Core Web Vitals merupakan metriks yang dipakai Google untuk menilai apakah satu website itu baik atau buruk.
Untuk mengukur Core Web Vitals bisa menggunakan Google PageSpeed Insight. Semakin tinggi skor PageSpeed Insight, semakin bagus.
…artinya website sudah memenuhi metriks-metriks yang terdapat pada Core Web Vitals.
Pada studi kasus ini, saya berhasil menaikan skor Core Web Vitals untuk mobile dari 57 → 65 → 72 → 95 → 100. Sedangkan desktop dari 98 → 97 → 98 → 98 → 100.
Di sini saya tidak menggunakan plugin seperti WP-Rocket. Melainkan memakai plugin LiteSpeed Cache bunding dari paket hosting.
Baca juga: Panduan lengkap optimasi LiteSpeed Cache plugin
Untuk CDN saya memakai Cloudflare dengan mengaktifkan fitur APO untuk mengurangi waktu TTFB.
Mohon maaf, pada tulisan ini saya tidak menulis begitu detail bagaimana cara setting Cloudflare agar bisa digunakan secara optimal. Saya akan bahas pada tulisan selanjutnya.
Nah agar tidak ketinggalan, Anda bisa subscribe blog ini melalui RSS, email, atau berkomentar di bawah. 😉
Jadi berapa skor Core Web Vitas Anda? Silahkan tulis di kolom komentar di bawah.
Happy blogging 🎉🎉