Cara Mengatasi Largest Contentful Paint (LCP) di Blogger dengan Mudah
Masalah LCP (Largest Contentful Paint) sering muncul di laporan PageSpeed Insights dan biasanya membuat skor kecepatan blog menjadi merah. LCP adalah waktu yang dibutuhkan untuk menampilkan elemen terbesar pada halaman, biasanya berupa gambar utama atau thumbnail artikel. Jika nilainya terlalu lama, maka loading blog akan terasa berat dan ranking artikel di Google bisa menurun. Oleh karena itu, penting bagi kita untuk mengoptimalkan LCP agar blog lebih cepat.
1. Optimasi Gambar Utama Artikel
Gambar utama atau featured image sering menjadi penyebab utama LCP lambat. Solusinya adalah mengompres gambar ke format WebP agar ukurannya kecil namun tetap berkualitas. Selain itu, tambahkan atribut width dan height supaya browser bisa memesan ruang sebelum gambar selesai dimuat.
<amp-img src="URL-GAMBAR.webp"
width="800" height="450"
layout="responsive"
alt="Judul Artikel"></amp-img>
2. Hilangkan Resource yang Memblokir Render
Banyak template Blogger menggunakan script dan CSS eksternal yang membuat proses render terhambat. Untuk mengatasinya, pastikan semua JavaScript custom dihapus karena tidak diizinkan pada AMP. Sebagai gantinya, gunakan CSS inline melalui tag style amp-custom dan hanya load resource AMP resmi saja.
<style amp-custom>
/* Masukkan CSS utama blog di sini */
</style>
3. Gunakan Preload dan Preconnect
Pada versi AMP, preload gambar utama bisa dilakukan dengan menaruh gambar di atas konten agar cepat dimuat. Sementara itu, untuk font eksternal gunakan preconnect yang masih diizinkan oleh AMP.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
4. Kesimpulan
Mengatasi LCP di Blogger versi AMP harus mengikuti aturan AMP yang ketat. Gunakan <amp-img> untuk gambar utama, hapus JavaScript custom, serta gunakan CSS inline agar valid. Dengan cara ini, blog akan lebih cepat, tetap sesuai standar AMP, dan mudah diindeks Google.