Mempelajari metrik Core Web Vitals merupakan hal yang penting untuk bisa meningkatkan pengalaman pengguna dalam mengakses website Anda.
Ada tiga metriks dalam Core Web Vitals, yaitu: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS).
Ketiganya perlu dioptimasikan. Namun, dalam artikel ini, FruityLogic akan secara khusus membahas tentang apa itu LCP, cara mengetahui performa LCP website, faktor yang mempengaruhi LCP, hingga cara mengoptimasinya.
Apa Itu Largest Contentful Paint?
Melansir dari website developer Google, Largest Contentful Paint atau LCP adalah metrik Core Web Vitals yang menunjukkan seberapa cepat konten utama halaman website dimuat.
LCP mengukur waktu yang dibutuhkan untuk menampilkan elemen konten terbesar yang terlihat di layar pengguna, biasanya berupa gambar, video, atau blok teks besar sejak halaman mulai dimuat.
Data LCP didapatkan dari alat bernama Real User Monitoring (RUM) yang diinstall di website, atau dengan menggunakan Chrome UX Report (CruX).
Adapun, batas penilaian LCP adalah:
- Bagus (Good): kurang dari 2,5 detik
- Perlu perbaikan (Needs improvement): antara 2,5 – 4 detik
- Buruk (Poor): lebih dari 4 detik.
Metrik ini penting untuk dioptimasi, karena penilaian LCP yang buruk berarti halaman lambat dimuat dan cenderung membuat pengguna meninggalkan halaman.
Cara Mengetahui Performa LCP Website
Untuk mengetahui performa LCP, umumnya ada dua cara yang bisa Anda lakukan, yaitu melalui Google PageSpeed Insight dan Google Search Console.
1. PageSpeed Insight
Halaman PageSpeed Insight
(Sumber: https://pagespeed.web.dev/)
Cara ini bisa dilakukan terhadap website mana saja, Anda tidak memerlukan ownership website dalam menggunakan PageSpeed Insight.
Buka halaman PageSpeed Insights, lalu masukkan URL website yang ingin Anda cek (contoh: https://fruitylogic.com/), dan klik “Analyze”.
Setelah itu, PageSpeed Insight akan melakukan analisis terhadap website yang Anda cantumkan. Tunggu sebentar dan hasil akan keluar dalam beberapa detik atau menit.
Jika sudah selesai, scroll ke bagian “Core Web Vitals” di sana Anda akan melihat nilai LCP untuk Mobile ataupun Desktop.
Di bagian paling bawah terdapat saran optimasi yang bisa dilakukan untuk meningkatkan performa kecepatan website Anda, bagian tersebut berjudul “Diagnose performance issues”.
2. Google Search Console
Cara ini membutuhkan ownership website untuk mengakses hasil dari Core Web Vitals.
Anda bisa mengakses data Core Web Vitals pada bagian “Experience” dari menu Google Search Console yang kemudian akan menampilkan data performa kecepatan website Anda, termasuk LCP.
Tampilan data dibagi menjadi dua yakni data kecepatan mobile dan data kecepatan desktop.
Data dalam cara ini akan menampilkan data kecepatan tiap halaman yang ada di website.
Faktor yang Mempengaruhi LCP Website
Setelah mengetahui cara untuk mengecek performa kecepatan website, sekarang Anda perlu tahu apa saja sih faktor-faktor yang memengaruhi metriks LCP.
Di bawah ini adalah daftar faktornya:
1. Ukuran dan Jenis Konten Terbesar
Apakah website Anda memiliki gambar, video, atau blok teks besar? Ketiga konten tersebut termasuk ke dalam konten besar, di mana membutuhkan waktu lebih lama untuk diunduh dari server ke browser.
Semakin besar ukuran konten, semakin lama waktu yang dibutuhkan untuk ditampilkan di halaman.
Selain itu, format konten yang tidak dioptimalkan seperti PNG atau JPEG bisa lebih berat dibanding format modern seperti WebP.
2. Render-Blocking Resources
Render-Blocking Resources adalah file (biasanya CSS dan JavaScript) yang menghambat browser dalam menampilkan konten halaman web secepat mungkin.
Browser akan berhenti sejenak untuk memuat file tersebut sebelum menampilkan konten terbesar. Karenanya pengguna harus menunggu lebih lama untuk melihat konten website.
3. Waktu Respons Server (Time to First Byte / TTFB)
Server yang lambat atau lokasi hosting yang jauh dari pengguna bisa menyebabkan penundaan dalam memuat konten utama.
Disarankan menggunakan CDN (Content Delivery Network) atau cache untuk mengurangi TTFB atau waktu yang dibutuhkan browser untuk menerima byte pertama dari server.
4. Client-side Rendering (CSR) Berlebihan
Client-side Rendering (CSR) berlebihan berarti proses pembuatan atau penampilan konten halaman web sepenuhnya dilakukan di sisi pengguna (browser) menggunakan JavaScript, dan ini bisa memperlambat LCP jika tidak dioptimalkan.
5. Lazy Loading yang Salah Konfigurasi
Lazy loading adalah teknik pemuatan konten hanya saat dibutuhkan. Misalnya jika diterapkan pada 10 gambar, maka hanya ada gambar-gambar yang terlihat di layar, kemudian gambar-gambar lain baru dimuat ketika pengguna scroll bawah.
Lazy loading bisa bagus untuk performa, tapi jika elemen utama ikut ditunda, LCP jadi buruk. Oleh sebab itu, pastikan konten terbesar tidak di-lazy-load, terutama jika berada di atas lipatan.
Cara Mengoptimasi LCP untuk Pengalaman Pengguna
Dari faktor yang mempengaruhi LCP di atas, sekarang Anda bisa mengoptimasi LCP agar pengalaman pengguna lebih baik.
Target ideal untuk LCP adalah kurang dari 2,5 detik setelah halaman mulai dimuat. Untuk mencapai durasi tersebut, ikuti langkah-langkah ini untuk mengoptimasinya!
1. Identifikasi Elemen LCP di Website
Pertama-tama, ketahui elemen apa yang dianggap sebagai LCP di halaman website Anda. Biasanya LCP berupa:
- Gambar hero/banner
- Video yang diputar
- Elemen heading atau teks besar
2. Lakukan Kompres Gambar dan Gunakan Format Modern
Jika Anda menggunakan format PNG dan JPEG pada website Anda, lakukan kompres gambar hingga <100kb agar tidak berat dalam website.
Kompres gambar bertujuan mengurangi ukuran file tanpa menurunkan kualitas secara signifikan. Anda bisa gunakan tools online seperti TinyPNG atau Squoosh.
Namun, disarankan untuk menggunakan format modern seperti WebP dan AVIF yang punya ukuran lebih kecil dibanding JPEG/PNG dengan kualitas yang tetap bagus.
3. Gunakan Ukuran yang Sesuai Tampilan Layar
Gunakan ukuran gambar yang sesuai dengan tampilan layar. Gambar yang memiliki ukuran besar akan menimbulkan loading lambat dan boros bandwidth.
Karena itu, pastikan Anda melakukan resize gambar sesuai kebutuhan. Gunakan tools seperti Photoshop, GIMP, atau Squoosh untuk resize.
3. Hindari Lazy Load pada Elemen Terbesar
Kalau gambar atau elemen utama di-load secara lazy, maka browser tidak langsung memuatnya, dan ini akan menunda waktu tampilnya elemen itu, sehingga LCP jadi tinggi dan pengalaman pengguna terasa lambat.
Jadi, untuk elemen terbesar di atas halaman, jangan gunakan lazy loading. Atau, jika menggunakan JavaScript untuk lazy load, pastikan pengecualian untuk elemen LCP.
4. Kurangi Resource yang Menghambat Rendering
Resource berupa file CSS dan JavaScript eksternal harus dimuat dan diproses terlebih dahulu oleh browser sebelum konten utama halaman ditampilkan. Akibatnya, elemen penting seperti heading utama dan gambar hero muncul tertunda.
Untuk mengatasinya, Anda bisa meminimalkan ukuran file CSS dan JavaScript mellaui proses minify hingga menggabungkan beberapa file menjadi satu untuk mengurangi jumlah permintaan HTTP.
5. Tingkatkan Kecepatan Server
Untuk meningkatkan kecepatan server, Anda perlu menggunakan layanan hosting yang lebih cepat dan andal, mengaktifkan caching di sisi server, serta mengoptimalkan kode backend dan query database agar proses pemrosesan data lebih efisien.
Selain itu, menggunakan Content Delivery Network (CDN) juga sangat efektif karena memungkinkan konten disajikan dari server yang lokasinya dekat dengan pengguna.
6. Hindari CSR Berlebihan
Untuk mengatasinya penggunaan Client-Side Rendering berlebihan, sebaiknya gunakan Server-Side Rendering (SSR) yang memungkinkan konten sudah siap ditampilkan sejak halaman dimuat.
Demikian informasi tentang Largest Contentful Paint atau LCP. Meningkatkan LCP pada website akan meningkatkan pengalaman pengguna dalam mengeksplorasi website – lebih cepat dan nyaman untuk dibaca.
Apakah Anda menginginkan website yang teroptimasi untuk pengguna sekaligus memiliki performa SEO yang baik? Agensi digital marketing Surabaya, FruityLogic, bisa membantu Anda!
Kami memiliki segudang portofolio pembuatan website sekaligus peningkatan performa SEO. Konsultasikan kebutuhan pemasaran Anda sekarang juga dengan FruityLogic, gratis, dengan klik di bawah ini!
Sumber Referensi:
https://developers.google.com/search/docs/appearance/core-web-vitals
