Metode Meningkatkan Core Web Vitals Website Yang Buruk

improve core web vitals score

Pada bulan Juli, Google melakukan update algorithm, salah satunya tentang update Core Web Vitals, walau tidak ditegaskan bahwa skor tinggi yang didapat dari test akan memberikan peringkat lebih baik pada Google penelusuran.

Lalu kenapa Core Web Vitals harus evaluasi walau tidak diterangkan sebagai salah satu sinyal dalam peringkatan di penelusuran situs?

Mempublikasikan website tidak serta merta ditujukan kepada search engine agar bisa memperoleh posisi yang bagus melainkan bagaimana situs yang ditemukan dapat memberikan pengalaman yang luar biasa kepada pengunjung baik dari sisi web design, penyajian konten yang baik dengan ilustrasi gambar - gambar untuk meningkatkan kepuasan atas paparan konten yang disajikan serta memiliki kecepatan akses halaman website.

Pertanyaan umum muncul, apa saja elemen atau metrik yang harus diperhatikan agar website yang dikembangkan mendapatkan skor baik darisi sisi audit Core Web Vitals?

Jika dijabarkan Core Web Vitals terdapat 4 metrik utama yaitu:

LCP (Large Contentful Paint) yaitu berhubungan dengan seberapa llama waktu yang dibutuhkan halaman untuk merender elemen terbesar yang terlihat.
FID (First Input Delay): Lama waktu yang dibutuhkan halaman untuk mulai merespons tindakan pengguna.
CLS (Vumulative Layout Shift): Pergeseran UI halaman selama pemuatan halaman.
INP (interaction to next paint): Lama waktu yang dibutuhkan halaman untuk merespons interaksi dengan pengguna.

Kali ini akan fokus membahas tentang LCP yaitu bagaimana agar website yg baru dibuat saat dipublikasikan dan tes memperoleh skor yang baik sesuai dengan rentang nilai yang sudah ditetapkan pada dokumentasi Google Search Central yaitu:

LCP Baik: <=2,5detik
LCP Sedang: <=4 detik
LCP Buruk: >4 second

Tehnik Memperbaiki Elemen Website Agar Memperoleh LCP baik yaitu:

1. Menggunakan format gambar modern

Seorang web development yang memiliki sedikit pengetahuan tentang SEO akan mengabaikan hasil dari uji coba web performa karena akan menambah pekerjaan dan menyita waktu. Lain halnya dengan programmer yang paham dengan dasar SEO maka dengan segala upaya mereka akan implementasikan agar website yang dihasilkan mendapatkan apresiasi baik dari konsumen dan penggunan website dikemudian hari. Format image modern itu yaitu WebP yang sudah didukung oleh browser modern. Format Webp disarabka dipakai diwebsite daripada .jpg karena memiliki ukuran file yang relative lebih kecil.

2. Menggunakan gambar responsive

Gambar responsive memberitahu browser bahwa ada beberapa pilihan gambar dan browser akan menyajikan gambar yang sesuai dengan screen yang dipakai untuk mengunji website. Elemen yang dipakai yaitu atau atribut srcset dari elemen img sebagai contoh:

Halaman web menggunakan elemen atau atribut srcset dari elemen img untuk menentukan gambar yang responsif. Namun, beberapa peramban dan perayap tidak memahami atribut ini. Kami menyarankan agar Anda selalu menentukan URL fallback melalui atribut src.

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="flowers.webp">
  <img src="flowers.png" alt="flowers">
</picture>

 Or

<img
  srcset="flowers-320w.jpg 320w, flowers-480w.jpg 480w, flowers-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="flowers-800w.jpg"
  alt="flowers">

3. Menghapus Script dan Style yang tidak terpakai

Jika dalam tahapan pengembangan website menggunakan framework front-end, penting agar melakukan efisiensi agar script atay file css yang tidak dibutuhkan dalam proses render halaman tidak membebani proses loading. Tahapan inilah yang paling sukar dilakukan butuh kerja extra.

4. Minify dan Kompres Script serta Css

Script yang memiliki ukuran yang besar bisa memperkecil dengan cara minify script atau style css agar waktu download tidak mengganggu proses render elemen website.

5. Defer non-critical CSS

Pilah Script dan Stylesheet yang dibutuhkan dalam proses render elemen utama yang harus di download di awal dan styles yang dapat di download setelah proses render selesai. Dalam prosesnya agar render halaman tidak terhambat menunda css yang kurang penting dapat meningkatkan proses dari reder halaman website.

Summary

Perbaikan website yang memiliki masalah dengan LCP itu kompleks, dan dipengaruhi oleh banyak faktor. Perlu diperhatikan bagi kostumer yang hendak membuat website agar membertimbangkan dalam memilih agency jasa pembuatan website SEO friendly dengan performa yang baik agar pengguna mendapatkan pengalaman maksimal.