Core Web Vitals: Faktor Peringkat Besar Baru di 2022

Pada Juni 2021, Google meluncurkan algoritme utama yang menyarankan Core Web Vitals sebagai faktor peringkat utama. Ini berarti bahwa pengalaman halaman menjadi salah satu faktor penting dalam menentukan peringkat SERP.

Apa saja faktor vital web inti yang memengaruhi sinyal halaman, dan bagaimana cara meningkatkan pengalaman halaman? Di blog ini, kami akan membagikan semua yang perlu Anda ketahui tentang Core Web Vitals.

Apa itu Data Web Inti?

Data Web Inti adalah metrik kecepatan yang merupakan bagian dari sinyal Pengalaman Halaman Google, yang digunakan untuk menilai pengalaman pengguna. Metrik menilai beban visual menggunakan Largest Contentful Paint (LCP), stabilitas visual menggunakan Cumulative Layout Shift (CLS), dan interaktivitas menggunakan First Input Delay (FID).

Data Web Inti mempertimbangkan metrik berikut untuk meningkatkan pengalaman halaman:

• Performa pemuatan halaman
• Kemudahan berinteraksi
• Stabilitas visual halaman

Metrik ini menawarkan perspektif unik tentang berbagai elemen yang memengaruhi cara pengguna berinteraksi dan terlibat dengan situs web. Sementara pengembang harus mempertimbangkan "pengalaman pengguna" secara holistik, metrik independen ini membantu memecah variabel ini menjadi beberapa bagian sehingga pemilik situs dapat mengidentifikasi dan memperbaiki masalah teknis di situs web mereka.

Mengapa Vital Web Inti Penting?

Karena vital web inti hanyalah salah satu dari sinyal pengalaman halaman Google, mereka tidak dapat secara otomatis mengubah peringkat situs web di SERP. Namun, memiliki skor tinggi dalam metrik ini dapat meningkatkan pengalaman pengguna secara keseluruhan dan membantu peringkat situs web lebih tinggi.

Beberapa cara umum untuk meningkatkan faktor vital web inti meliputi:

- Meningkatkan kecepatan pemuatan LCP dengan mengoptimalkan gambar dan mengurangi permintaan server.

- Meningkatkan stabilitas visual.

- Meningkatkan interaktivitas dengan meminimalkan penundaan input pertama.

Penting untuk diperhatikan bahwa skor pengalaman halaman yang tinggi tidak akan secara otomatis mendorong Anda ke puncak Google. Misalnya, jika situs web Anda memiliki skor LCP tinggi tetapi desain dan tata letak visualnya buruk, situs tersebut mungkin masih tidak ramah pengguna seperti situs dengan skor lebih rendah tetapi desainnya unggul.

Metrik Vital Web Inti

Algoritme Google mempertimbangkan tiga elemen utama vital web inti sebagai faktor peringkat. Ini adalah:

• Cat Contentful Terbesar (LCP)
• Penundaan Input Pertama (FID)
• Pergeseran Tata Letak Kumulatif (CLS)

Namun, ada beberapa faktor vital web tambahan juga. Ini adalah "Time to First Byte (TTFB) dan First Contentful Paint (FCP)." “Total Blocking Time (TBT) dan Time to Interactive (TTI) membantu mengukur interaktivitas.”

Cat Contentful Terbesar (LCP)

Cat Contentful Terbesar adalah operasi pengecatan terbesar yang dilakukan oleh komponen dalam halaman web. Metrik ini mengukur berapa banyak pekerjaan yang diperlukan untuk merender semua konten di halaman web.

Halaman yang lebih besar akan membutuhkan lebih banyak sumber daya dari browser untuk dimuat dan dirender dengan benar.

Pemilik situs ingin halaman mereka dimuat dengan cepat untuk memberikan pengalaman pengguna yang menyenangkan. Waktu muat yang cepat sangat penting untuk pengalaman pengguna yang positif; halaman yang dimuat dengan cepat lebih cenderung berperingkat lebih tinggi di Google.

Selain itu, waktu muat yang cepat telah terbukti memengaruhi tingkat keterlibatan dan konversi dibandingkan dengan halaman dengan waktu pemuatan yang lambat.

1.1 Apa yang diukur LCP?

LCP mengukur jumlah waktu yang dibutuhkan halaman untuk memuat blok konten yang berbeda dalam satu viewport. Metrik ini hanya mempertimbangkan kecepatan rendering bagian konten di layar yang terlihat; tidak ada di paro bawah yang dipertimbangkan.

LCP optimal untuk halaman harus 2,5 detik.

1.2 Bagaimana cara meningkatkan LCP?

Wawasan Kecepatan Halaman memberikan saran yang tepat untuk mengoptimalkan halaman Anda untuk LCP. Berikut adalah beberapa tips untuk meningkatkan LCP:

• Optimalkan gambar Anda: Pastikan untuk mengirimkan gambar Anda dalam format yang lebih ringan dan gambar terkompresi. Aktifkan kompresi di server web Anda dengan mengonfigurasi akselerasi GZIP.
• Anda dapat menggunakan plugin kompresor gambar yang mengirimkan gambar dalam format yang tepat dan mengompres gambar.
• Hampir semua situs web diindeks oleh Google menggunakan pengindeksan mobile-first. Akibatnya, mengoptimalkan LCP untuk seluler lebih penting daripada mengoptimalkannya untuk desktop. Setiap gambar harus diperkecil agar sesuai dengan spesifikasi tata letak.

• Pramuat sumber daya penting: Pastikan server Anda memuat sumber daya penting seperti video dan font agar siap saat pengguna memintanya. Ini akan mengurangi waktu pemuatan halaman Anda dengan membutuhkan lebih sedikit dari cache browser.

• Kurangi waktu respons server: Saat server membutuhkan waktu lama untuk menanggapi permintaan, waktu yang diperlukan untuk merender halaman di layar juga meningkat. Akibatnya, itu merugikan setiap statistik kecepatan halaman, termasuk LCP. Praktik terbaik adalah menggunakan Jaringan Pengiriman Konten (CDN) atau mengoptimalkan dan menganalisis server Anda.

• Hapus sumber daya yang memblokir perenderan: Peramban mem-parsing pohon DOM saat mendapatkan dokumen HTML dari server Anda. Jika DOM berisi lembar gaya eksternal atau file JS, browser harus berhenti sebelum melanjutkan untuk menguraikan sisa pohon DOM. Sumber daya pemblokiran render adalah file JS dan CSS yang menyebabkan waktu LCP tertunda.

Pergeseran Tata Letak Kumulatif (CLS)

Pergeseran Tata Letak Kumulatif adalah metrik yang membantu mengidentifikasi tautan atau tombol yang menyesuaikan setelah laman web dimuat dan mencerminkan tingkat kesulitan yang akan dihadapi pengguna untuk terlibat dengan elemen di situs Anda setelah laman dirender. Dengan kata lain, ia memeriksa apakah elemen bergerak di sekitar layar saat halaman dimuat.

Pengalaman pengguna yang kuat membutuhkan UX dan desain yang baik, dan pengguna akan frustrasi jika halaman web mengganti elemen saat mereka membaca. CLS membantu pengembang dalam menentukan apakah gambar atau tautan pada situs web bergeser, memungkinkan pemilik situs meningkatkan aksesibilitas, meningkatkan rasio klik-tayang, dan meningkatkan penjualan online.

2.1 Apa yang diukur CLS?

CLS menentukan apakah elemen di viewport yang terlihat berubah posisi antara dua frame yang dirender. Dalam istilah awam, metrik ini membantu pemilik situs dalam menentukan apakah konten seperti teks, tombol, dan spanduk didorong saat pengguna membaca konten pada halaman tertentu.

Elemen yang mengubah posisi dapat membingungkan pengguna dan menghambat pengalaman mereka di halaman, jadi sangat penting untuk memastikan bahwa semua konten tetap di tempatnya setelah halaman dimuat di perangkat pengguna.

Pemilik situs harus mempertahankan CLS 0,1 atau kurang.

2.2 Bagaimana cara meningkatkan CLS?

Berikut adalah praktik terbaik untuk meminimalkan CLS:

• Gunakan dimensi ukuran yang ditetapkan untuk media apa pun: Kapan pun Anda menggunakan media, gunakan dimensi dan pengaturan yang benar. Menyetel dimensi yang salah dapat menyebabkan elemen bergeser di sekitar halaman, yang akan menyebabkan peningkatan skor CLS.
• Minimalkan objek Flash: Menggunakan terlalu banyak objek Flash juga dapat meningkatkan CLS karena objek tersebut sering kali berisi kode tersembunyi yang berinteraksi dengan DOM. Dengan menghindari objek Flash yang tidak perlu, Anda akan meningkatkan kinerja situs secara keseluruhan dan mengurangi kemungkinan elemen dimuat dengan lambat.
• Tambahkan elemen UI baru sebelum flip: Setiap kali Anda menambahkan elemen UI baru ke halaman, pastikan elemen tersebut ditambahkan sebelum lipatan apa pun di tata letak. Ini akan memastikan bahwa elemen yang baru dimasukkan tidak berakhir di atas elemen yang sudah ada, yang dapat menyebabkannya bergeser dan menimbulkan penalti CLS.

Penundaan Input Pertama (FID)

FID adalah waktu yang berlalu antara saat pengguna berinteraksi dengan halaman Anda dan saat halaman merespons. Hal ini juga disebut sebagai responsif.

FID mengukur waktu yang diperlukan halaman untuk merespons setelah pengguna berinteraksi dengannya. Tujuannya adalah untuk mengurangi penundaan sehingga pengguna mendapatkan pengalaman yang menyenangkan, baik saat mereka menjelajahi konten atau berinteraksi dengan pertanyaan atau formulir di situs Anda.

3.1 Apa yang diukur FID?

Saat halaman memuat input elemen dari pengguna, FID mengukur responsivitasnya. FID hanya menangkap peristiwa seperti klik dan penekanan tombol dalam mode ini.

FID harus dijaga di bawah 100 milidetik untuk memastikan pengalaman pengguna yang layak.

FID sulit untuk diukur karena informasi ini hanya dapat diperoleh di lapangan. Ini berarti bahwa faktor-faktor di luar kendali Anda, seperti kapasitas perangkat pengguna dan kecepatan Internet yang dialami audiens Anda, akan memengaruhi skor Anda.

3.2 Bagaimana cara meningkatkan FID?

Tidak ada satu solusi untuk meningkatkan skor FID Anda. Namun, dengan mengikuti beberapa panduan sederhana, Anda dapat membuat dampak besar:

• Tunda JavaScript: Banyak pengguna mematikan JavaScript dengan mengubah pengaturan browser mereka untuk "memblokir Java". Ini mempengaruhi skor Anda di FID. Jika Anda perlu memblokir atau menunda skrip, lakukan sesegera mungkin setelah memuat halaman di paro atas.
• Hapus skrip pihak ketiga yang tidak penting: Hapus skrip pihak ketiga yang tidak penting untuk fungsi situs Anda. Ini termasuk "plug-in media sosial", iklan, dan skrip analitik Google. Jika skrip diperlukan tetapi dapat ditangguhkan, pastikan untuk menundanya sedini mungkin dalam proses pemuatan halaman sehingga pengguna memiliki pengalaman yang lebih baik. Minimalkan unduhan gambar dan Flash.
• Gunakan cache browser: Ini memungkinkan halaman Anda memuat materi lebih cepat. Ini mempercepat pemuatan tugas JS di browser pengguna Anda.

Apa Metrik Kinerja Vital Web Inti Lainnya?

Core Web Vitals menyediakan banyak data yang dapat dimanfaatkan pengembang untuk meningkatkan pengalaman pengguna situs web mereka. Pengembang juga dapat mempelajari bagaimana kode mereka memengaruhi cara orang mengonsumsi konten di situs mereka dan metrik utama yang dijelaskan di atas.

Metrik ini menjelaskan waktu jeda atau variabel teknis lainnya yang mungkin berdampak negatif pada cara audiens online terhubung dengan halaman web, jadi mari kita lihat beberapa metrik lain yang dapat Anda gunakan untuk mengevaluasi pengalaman yang dimiliki pengunjung di situs Anda.

Cat Contentful Pertama (FCP)

First Contentful Paint (FCP) adalah jumlah waktu yang dibutuhkan browser pengguna untuk menampilkan elemen DOM (gambar, komponen kanvas non-putih, dan SVG).

Metrik ini tersedia dalam kisaran skor FCP seperti yang diberikan:

• 0–2 detik: Hijau (cepat)
• 2–4 detik: Oranye (sedang)
• 4+ detik: Merah (lambat)

Waktu Untuk Interaktif (TTI)

Time to Interactive adalah jumlah waktu yang dibutuhkan browser pengguna untuk mengeksekusi permintaan sederhana pertama setelah memulai halaman Anda. Ini termasuk apa saja mulai dari memuat skrip, mengumpulkan data dari server, dan merender HTML.

Skor untuk Time To Interactive adalah sebagai berikut:

• 0–3,8 detik: Hijau (cepat)
• 3,9–7,3 detik: Oranye (sedang)
• 7.3+ detik: Merah (lambat)

Total Waktu Pemblokiran (TBT)

Total Blocking Time (TBT) adalah metrik yang memungkinkan pengelola situs menentukan berapa lama waktu yang dibutuhkan halaman web untuk merespons masukan pengguna tertentu. Metrik ini, yang dihitung dalam milidetik dan memiliki rentang skor TBT, akan mendeteksi halaman dengan JavaScript yang tidak perlu:

• 0–300 mdtk: Hijau (cepat)
• 300–600 mdtk: Oranye (sedang)
• 600+ md: Merah (lambat)

FAQ

T. Apakah Data Web Inti memengaruhi SEO?

Jawab: Ya, Core Web Vitals adalah sinyal peringkat, menurut Google. Web.dev Google memberikan panduan yang sangat baik tentang pengoptimalan LCP, FID, dan CLS Anda untuk meningkatkan pengalaman dan peringkat pengguna Anda.

T. Apakah Data Web Inti hanya untuk seluler?

Jawab: Tidak, Data Web Inti sama-sama memengaruhi situs desktop dan seluler. Namun, Anda bisa mendapatkan pembaruan pengalaman halaman untuk desktop dan seluler secara terpisah.

T. Kapan Google memperkenalkan Core Web Vitals?

Jawab: Google memperkenalkan Core Web Vitals pada Juni 2021 sebagai cara bagi pengelola situs untuk mengukur kecepatan dan kinerja situs web mereka.

T. Bagaimana cara memeriksa Data Web Inti saya untuk sebuah situs web?

Jawab: Chrome DevTools adalah alat pengembang yang sudah diinstal sebelumnya dengan browser Chrome. Cukup klik kanan dan pilih "Periksa," dan Chrome DevTools akan diluncurkan. Anda mungkin menemukan beberapa metrik Data Web Inti menggunakan panel Performa Chome DevTools. Cukup awasi Web Vitals.

T. Apakah pergeseran tata letak kumulatif memengaruhi SEO Anda?

Jawab: Pergeseran Tata Letak Kumulatif adalah indikator penting untuk menentukan stabilitas visual. Ini menghitung berapa kali pengguna dikejutkan oleh perubahan tata letak yang tidak terduga. Akibatnya, skor CLS yang lebih rendah menunjukkan bahwa konten tersebut stabil dan tidak berubah, sedangkan CLS yang tinggi menunjukkan bahwa konten tersebut bergeser.

Kesimpulan

Beberapa praktik terbaik yang dapat Anda masukkan ke dalam situs web Anda untuk meningkatkan kinerja adalah: mengecilkan kode, menggunakan peningkatan progresif, dan mengoptimalkan gambar. Dengan mengikuti tips ini, situs web Anda akan memuat lebih cepat bagi pengunjung dan juga membantu mengoptimalkan peringkat Anda di mesin pencari.

Anda dapat menggunakan alat seperti GTMetrix atau Lighthouse untuk memeriksa wawasan kecepatan halaman secara gratis.