undercover.co.id – Core Web Vitals adalah inovasi terbaru dari Google yang di-design untuk meningkatkan user experience pada website. Core Web Vitals juga dijadikan faktor utama baru yang mempengaruhi penilaian rangking website di halaman pencarian.
Ada tiga komponen Core Web Vitals yang ditetapkan Google, diantaranya:
- Largest Contentful Paint (LCP): Berapa waktu yang dibutuhkan untuk me-loading konten paling penting dalam website anda.
- Cumulative Layout Shift (CLS): Seberapa banyak konten website anda “berubah” saat proses loading (yang berarti user experience yang buruk). Misalnya jika anda memiliki iklan dengan waktu loading lambat yang “mendorong” konten anda ke bawah setelah ter-loading, ini termasuk dalam perubahan layout yang dimaksud.
- First Input Delay (FID): Waktu yang dibutuhkan saat pengunjung meng-klik sesuatu di website anda sampai akhirnya proses klik tersebut mulai memproses fungsinya.
Cara paling mudah untuk mengecek kemampuan website anda berdasarkan Core Web Vitals adalah melalui Google PageSpeed Insights yang menyediakan data untuk ketiga parameter di atas. Anda harus mengecek performa website anda dalam mobile dan desktop, karena keduanya akan menghasilkan hasil yang berbeda.
Sekarang mari kita masuk ke pembahasan yang lebih dalam seputar ketiga komponen Core Web Vitals ini.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mengukur seberapa lama waktu yang dibutuhkan untuk konten utama sebuah website ter-loading.
LCP terdengar mirip dengan parameter lain, yaitu First Contentful Paint (FCP). Bedanya, LCP fokus pada waktu loading konten”utama”, sementara FCP fokus pada waktu loading konten “pertama”.
“Elemen” LCP bisa berbeda untuk setiap website, dan itu juga tergantung versi desktop dan mobile dari masing-masing website. Terkadang elemen LCP bisa berupa gambar, atau bisa juga berupa teks.
Anda bisa melihat jenis elemen website anda pada bagian “Diagnostics” pada PageSpeed Insights. Lalu klik di tab “Largest Contentful Paint element”
Singkatnya, LCP mengukur seberapa lama elemen-elemen ini muncul dan bisa dilihat oleh pengunjung. Berikut adalah standar tingkat LCP menurut Google:
- Baik: < 2,5 detik
- Butuh perbaikan: 2,5 – 4 detik
- Buruk: > 4 detik
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) berfokus pada bagaimana website anda ter-loading dan apakah konten anda”berubah” saat ada elemen baru yang ter-loading. Contohnya adalah jika artikel dalam suatu website terus bergerak-gerak saat website dalam proses me-loading iklan atau saat tombol perintah suatu website berpindah dan membuat pengunjung meng-klik tombol yang salah.
Anda bisa mengukur skor CLS anda menggunakan “Lab Data” dan “Field Data” pada PageSpeed Insights. Berikut adalah standar tingkat CLS menurut Google:
- Baik: < 0,1
- Butuh perbaikan: 0,1 – 0,25
- Buruk: > 2,5
Jika anda meng-klik “Avoid large layout shifts” di bagian “Diagnostics” pada PageSpeed Insights, anda bisa menemukan elemen-elemen pada website anda yang “berubah” dan mempengaruhi skor CLSnya.
First Input Delay (FID)
First Input Delay (FID) mungkin adalah parameter yang paling sulit untuk dimengerti dan juga untuk di-optimalkan. Singkatnya, FID adalah waktu yang dibutuhkan website anda untuk menjadi interaktif setelah pengunjung meng-klik tombol/link atau saat pengunjung berinteraksi dengan JavaScript pada website.
FID sangat dipengaruhi oleh JavaScript. Misalnya, jika pengunjung yang mengakses website anda dari handphone sedang memproses file JavaScript berukuran besar dari website anda, maka pada saat itu website anda mungkin menjadi tidak interaktif saat pengguna mencoba meng-klik sesuatu.
Berikut adalah standar tingkat FID menurut Google:
- Baik: < 100 ms
- Butuh perbaikan: 100 – 300 ms
- Buruk: > 300 ms
Anda hanya bisa melihat waktu FID website anda di bagian “Field Data” pada PageSpeed Insights. Sayangnya, jika website anda tidak memiliki cukup data untuk mengisi bagian “Field Data”, tidak ada cara yang mudah untuk mengukur waktu FID website anda.
Mengenal Lebih Dalam Tentang Google Core Web Vitals
Google baru saja mengeluarkan daftar Frequently Asked Question (FAQ) atau pertanyaan yang sering ditanyakan seputar cara kerja Core Web Vitals (CWV), apa saja yang tidak diukur, dan porsinya untuk penentuan ranking.
Tujuan perumusan CWV
Tujuan utama dicetuskannya Core Web Vitals adalah untuk memiliki parameter yang sama untuk semua situs dengan tujuan meningkatkan user experience. Google merekomendasikan semua website menggunakan tiga parameter CWV sebagai panduan untuk mengoptimalkan user experience pada website mereka.
Pengukuran parameter CWV dilakukan per halaman, sehingga anda mungkin menemukan beberapa halaman performanya lebih baik dibandingkan yang lain. Keuntungan dari menerapkan CWV yang baik tentunya adalah meningkatkan kepuasan pengunjung website, dan Google juga memiliki tujuan jangka panjang untuk membuat standar parameter user experience pada semua website.
Mengenal AMP
AMP adalah singkatan dari Accelerated Mobile Pages. AMP ini adalah framework HTML yang digunakan untuk memberikan tampilan halaman website yang ringan, memiliki loading cepat, dan menarik melalui handphone.
AMP awalnya dikembangkan oleh Google dengan sistem open source. AMP bisa mengakomodasi situs ecommerce dan situs internasional.
Google akan memperhatikan versi AMP dari website dalam proses penghitungan skor Core Web Vitals. Jadi, jika ada website yang kesulitan mengoptimalkan CWV, menggunakan AMP adalah cara yang mudah dan cepat untuk meningkatkan skor Core Web Vitals.
Tapi Google juga memperingatkan adanya faktor lain yang bisa berdampak negatif pada skor CWV, seperti server yang lambat atau gambar yang tidak teroptimisasi.
Yang tidak dihitung dalam FID
First Input Delay (FID) adalah salah satu parameter dalam Core Web Vitals yang mengukur waktu sebuah situs menjadi interaktif dan merespon tindakan pengunjung (seperti meng-klik sesuatu). Lalu ada istilah bounce yang terjadi saat pengunjung meninggalkan halaman website setelah hanya melihat satu halaman itu saja.
Terkadang, walaupun tidak melihat lebih jauh, pengunjung tetap men-scroll halaman website tersebut. Jadi pertanyaannya adalah apakah proses scrolling ini akan terhitung ke dalam skor FID?
Google menjawab bahwa bounce bukanlah bagian dari parameter FID, karena tidak ada interaksi di dalamnya. Jadi FID tidak menghitung proses scrolling pengguna sebagai interaksi.
Core Web Vitals mempengaruhi ranking
Mulai bulan Mei 2021, Core Web Vitals akan dimasukan ke dalam sinyal atau parameter untuk mengukur page experience, digabungkan dengan parameter lain yang sudah ada sebelumnya seperti mobile friendly, safe-browsing, keamanan https, dan panduan fitur yang mengganggu.
Setiap parameter yang mengukur ranking memiliki bobotnya masing-masing. Sehingga akan ada beberapa parameter yang lebih penting dibanding parameter yang lain.
Google menyatakan bahwa sinyal dari Core Web Vitals bobotnya lebih sedikit dibandingkan dengan parameter lain yang secara langsung berkaitan dengan memuaskan pencarian pengguna. Google juga menekankan bahwa pemilik website harus tetap membuat konten yang baik dan relevan dengan informasi yang dicari pengguna supaya mendapatkan skor ranking yang tinggi.
Perbedaan data report Core Web Vitals
Banyak pengguna yang mengatakan bahwa halaman website-nya tergolong cepat, tapi tetap mendapat peringatan dari Core Web Vitals report. Google menjawab bahwa kecepatan loading halaman tersebut yang dirasakan oleh pengguna bisa berbeda-beda.
Ada beberapa faktor yang mempengaruhinya seperti gadget yang digunakan, jaringan internet, hingga wilayah geografis. Core Web Vitals mengambil data dari keseluruhan kunjungan pengguna, sehingga perbedaan ini mungkin saja terjadi.
Tips Meningkatkan Performa Core Web Vitals Website Anda
Bagi anda para pemilik website, apakah sudah mengetahui dan mengenal tentang Core Web Vitals. Ya, Core Web Vitals adalah inovasi tiga parameter baru dari Google yang digunakan untuk menentukan skor dan peringkat website di halaman hasil pencarian.
Ketiga parameter tersebut adalah:
- Largest Contentful Paint (LCP): waktu loading konten utama website
- Cumulative Layout Shift (CLS): tingkat perubahan layout website saat proses loading
- First Input Delay (FID): waktu untuk proses interaktif setiap fitur pada website
Setiap masing-masing dari ketiga parameter tersebut memiliki strategi tersendiri untuk memaksimalkannya. Berikut adalah tips yang bisa anda terapkan untuk meningkatkan performa Core Web Vitals website anda:
Meningkatkan performa Largest Contentful Paint (LCP)
Mengoptimalkan performa Largest Contentful Paint (LCP) adalah yang paling mudah dibandingkan dua parameter lainnya. Di bawah ini adalah beberapa cara yang bisa dilakukan:
- Memilih hosting yang cepat
Pemilihan hosting akan mempengaruhi respons server dan memiliki peran besar dalam performa LCP website anda. Hosting yang cepat tentunya dapat membantu website anda untuk bisa ter-loading dengan lebih cepat.
- Menggunakan page caching
Page caching juga bisa mempercepat respon server anda. Penelitian juga menunjukkan bahwa page caching dapat mempercepat waktu loading website hingga 33,3%.
- Optimalkan gambar
Sebagian besar elemen LCP adalah berupa gambar, jadi mengoptimalkan gambar yang anda upload bisa meningkatkan performa LCP. Anda bisa memilih gambar dengan ukuran kecil tapi tetap memiliki resolusi dan kualitas yang baik.
- Optimalkan code
Jika website anda harus me-loading CSS atau JavaScript yang tidak penting sebelum me-loading konten utama, ini akan sangat memperburuk performa LCP website anda. Anda bisa memperbaikinya dengan mengurangi fitur-fitur yang tidak perlu.
- Gunakan CDN untuk pengunjung global
Jika website anda memiliki pengunjung skala global, atau dengan kata lain lokal dan internasional, CDN (Content Delivery Network) bisa mempercepat performa LCP website anda.
Meningkatkan performa Cumulative Layout Shift (CLS)
Mengoptimalkan Cumulative Layout Shift (CLS) pada website akan lebih banyak berfokus pada masalah teknis dan pengkodean dari website anda. Di bawah ini adalah beberapa masalah yang sering muncul:
- Gambar tanpa dimensi
Ada berbagai cara memasukkan gambar, dan jika jalur yang anda pilih tidak secara otomatis menambahkan dimensi, pastikan untuk menambahkan dimensi secara manual.
- Iklan, embed, dan iframe tanpa dimensi
Sama seperti gambar, me-loading embed tanpa dimensi juga bisa menjadi masalah. Pastikan untuk selalu menspesifikasikan ukuran saat menggunakan ember. Jika menempatkan iklan, pastikan untuk menentukan tempat atau ruang untuk setiap iklannya.
- Font dalam web
Jika anda menggunakan font custom, font yang ter-loading lama dapat menyebabkan masalah seperti Flash of Invisible Text (FOIT) atau Flash of Unstyled Text (FOUT). Solusinya adalah dengan menggunakan font web preloading.
- Konten terinjeksi
Jangan secara dinamis meng-inject konten apapun di atas konten yang sudah ada. Kecuali itu merupakan respons dari tindakan pengunjung.
baca juga
Meningkatkan performa First Input Delay (FID)
Yang terakhir adalah meningkatkan performa First Input Delay (FID). Ini adalah yang paling rumit karena sepenuhnya bergantung pada code.
Singkatnya, anda mungkin sebaiknya membatasi eksekusi JavaScript yang berat sehingga browser masih bisa merespon interaksi pengunjung dengan cepat. Anda bisa mulai dengan membuang JavaScript yang tidak penting, atau jika anda masih memiliku task yang berat, anda bisa membaginya menjadi beberapa task yang lebih kecil atau menggunakan semacam web worker.
Sekali lagi, proses ini akan sulit jika anda bukan ahlinya. Sehingga anda mungkin perlu untuk mencari ahli dalam memperbaiki website untuk membantu anda.