SEO - Core Web Vitals

Hai there, para pengembang web dan penggemar SEO yang bersemangat! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik melalui dunia Core Web Vitals. Sebagai orang yang telah mengajar ilmu komputer lebih lama dari yang saya inginkan ( mari katakan saja saya ingat saat internet dial-up dianggap cepat), saya telah menyaksikan evolusi web dalam banyak cara yang menarik. Hari ini, kita akan mendalamkan topik yang sangat penting bagi siapa pun yang mencari untuk meninggalkan jejak mereka di internet: Core Web Vitals.

Core Web Vitals: Apa Itu?

Imaginasi Anda sedang membangun sebuah rumah. Anda tidak hanya akan fokus pada membuatnya terlihat indah, kan? Anda ingin memastikan bahwa itu memiliki dasar yang kuat, sistem pipa yang baik, dan sistem listrik yang efisien. Core Web Vitals seperti komponen penting ini, tetapi untuk situs web.

Core Web Vitals adalah set faktor khusus yang Google anggap penting dalam pengalaman pengguna keseluruhan halaman web. Mereka adalah bagian dari signal Pengalaman Halaman Google, bersama dengan kecocokan mobile, penelusuran aman, keamanan HTTPS, dan pedoman interstitial intrusif.

Pentingnya Core Web Vitals

Sekarang, Anda mungkin bertanya-tanya, " Mengapa harus peduli tentang Core Web Vitals ini?" Well, mari saya ceritakan kecil ke Anda.

Pada hari-hari awal mengajar saya, saya memiliki seorang murid yang membuat situs web yang indah. Itu terlihat seperti versi digital Kapel Sistine. Tetapi saat kita mencoba memuatnya, oh boy! Itu lebih lamban dari siput yang berlari di minyak kacang. Pengguna akan meninggalkan halaman sebelum halaman itu selesai dimuat. Itu saat saya menyadari pentingnya tidak hanya bagaimana situs terlihat, tetapi bagaimana performannya.

Google telah menjelaskan bahwa Core Web Vitals sekarang adalah faktor peringkat. Ini berarti mereka dapat mempengaruhi posisi situs Anda di hasil pencarian. Dalam dunia SEO yang kompetitif, setiap keunggulan berharga!

Metrik Utama dalam Core Web Vitals

Ada tiga metrik utama yang membentuk Core Web Vitals:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Mari kitauraikan ini satu per satu.

Largest Contentful Paint (LCP)

LCP mengukur performa muatan. Khususnya, itu menandai titik di timeline muatan halaman saat konten utama halaman mungkin telah dimuat.

Apa yang dapat LCP menilai?

LCP secara esensial memberitahu kita seberapa cepat elemen konten terbesar menjadi terlihat bagi pengguna. Ini bisa menjadi gambar, video, atau elemen teks tingkat blok.

Batas untuk Mengukur LCP

Berikut adalah tabel yang praktis untuk memahami batas LCP:

Waktu LCP	Rating
0-2,5 detik	Baik
2,5-4 detik	Perlu Peningkatan
Lebih dari 4 detik	Buruk

Untuk optimalkan LCP, pertimbangkan hal berikut:

<!-- Optimalkan gambar terbesar Anda -->
<img src="optimized-hero-image.jpg" alt="Gambar Hero" loading="eager">

<!-- Gunakan preload untuk sumber daya kritis -->
<link rel="preload" href="critical-style.css" as="style">

Dalam contoh ini, kita optimalkan gambar terbesar dan memreload CSS kritis. Ini dapat meningkatkan LCP secara signifikan.

First Input Delay (FID)

FID mengukur interaktivitas. Itu mengukur pengalaman pengguna saat mencoba untuk berinteraksi dengan halaman yang tidak responsif.

Apa yang dapat FID menilai?

FID membantu menilai penundaan antara saat pengguna pertama kali berinteraksi dengan situs Anda (misalnya, mengklik tautan atau menekan tombol) dan saat browser benar-benar dapat merespon interaksi itu.

Batas untuk Mengukur FID

Berikut adalah bagaimana FID diukur:

Waktu FID	Rating
0-100 ms	Baik
100-300 ms	Perlu Peningkatan
Lebih dari 300 ms	Buruk

Untuk meningkatkan FID, pertimbangkan memecah tugas panjang dan optimalkan JavaScript Anda:

// Memecah tugas panjang
const longTask = () => {
// Kode tugas panjang disini
};

// Gunakan requestIdleCallback untuk menjalankan tugas saat browser sedang kosong
requestIdleCallback(() => {
longTask();
});

Contoh kode ini menunjukkan bagaimana menggunakan requestIdleCallback untuk menjalankan tugas yang mungkin panjang saat browser sedang kosong, meningkatkan interaktivitas.

Cumulative Layout Shift (CLS)

CLS mengukur stabilitas visual. Itu mengukur seberapa sering pengguna mengalami pergeseran tata letak yang tak terduga.

Bagaimana Google menghitung skor CLS Anda?

CLS dihitung dengan mengalikan fraksi impak (berapa bagian viewport yang terpengaruh) dengan fraksi jarak (berapa jauh elemen bergerak).

Apa yang dapat CLS menilai?

CLS membantu menilai seberapa stabil tata letak halaman Anda saat dimuat. Skor CLS yang rendah berarti halaman Anda tidak bergeser saat elemen baru dimuat, memberikan pengalaman pengguna yang lebih baik.

Batas untuk Mengukur CLS

Berikut adalah bagaimana CLS diukur:

Skor CLS	Rating
0-0,1	Baik
0,1-0,25	Perlu Peningkatan
Lebih dari 0,25	Buruk

Untuk meningkatkan CLS, selalu tentukan ukuran untuk gambar dan iklan Anda:

<!-- Tentukan dimensi gambar -->
<img src="example.jpg" width="640" height="360" alt="Gambar Contoh">

<!-- Simpan ruang untuk iklan -->
<div style="min-height: 250px; min-width: 300px;">
<!-- Kode iklan disini -->
</div>

Kode ini memastikan bahwa ruang disimpan untuk gambar dan iklan, mengurangi pergeseran tata letak saat halaman dimuat.

Boost Core Web Vitals

Sekarang kita mengetahui apa itu Core Web Vitals dan bagaimana mereka diukur, mari kita lihat strategi umum untuk meningkatkan mereka:

1. Optimalkan gambar (kompres, gunakan format modern seperti WebP)
2. Minimalkan dan tangguhkan JavaScript
3. Gunakan caching
4. Implementasikan lazy loading untuk sumber daya yang tidak kritis
5. Gunakan Content Delivery Network (CDN)

Berikut adalah contoh sederhana implementasi lazy loading:

<img src="example.jpg" loading="lazy" alt="Gambar Dimuat Lambat">

Atribut ini memberitahu browser untuk memuat gambar hanya saat itu akan memasuki viewport, menyimpan bandwidth dan meningkatkan waktu muatan.

Kesimpulan

Dan itu adalah, teman-teman! Kita telah menjelajahi negeri Core Web Vitals, dari memahami apa itu mereka hingga belajar bagaimana meningkatkan mereka. Ingat, optimalkan metrik ini tidak hanya tentang memuaskan Google - itu tentang menyediakan pengalaman pengguna yang lebih baik.

Saat kita mengakhiri, saya diingatkan tentang murid lain yang mengambil prinsip ini hati-hati dan mengubah situs webnya yang lamban dan kasar menjadi mesin pengguna yang lembut dan menikmati. Lalu, lalu trafficnya menembus langit, dan terakhir kali saya mendengar, dia menjalankan agen digital marketing yang sukses.

Jadi, baik Anda membuat situs web pertama Anda atau Anda adalah pro yang berpengalaman, jaga ingat Core Web Vitals ini. Mereka adalah tiket Anda ke peringkat yang lebih baik dan pengguna yang lebih bahagia. Dan siapa tahu? Mungkin Anda akan menjadi kisah sukses berikutnya!

Sampai jumpa lagi, selamat coding, dan semoga web vital Anda selalu hijau!

Credits: Image by storyset