Largest Contentful Paint: Pengertian dan Cara Optimasinya

Largest Contentful Paint: Pengertian dan Cara Optimasinya

Apa Itu Largest Contentful Paint?

Largest Contentful Paint adalah metrik yg membagikan ketika loading website, yg menilai seberapa cepat page web merender elemen terbesarnya, termasuk blok gambar dan teks. Nilai LCP yg mengagumkan menandakan pengalaman pengguna yg lebih baik dan bounce rate yang lebih rendah.

Tahu Core Web Vitals membantu memastikan website Anda mampu memberikan pengalaman pengguna yg paling baik. Core Web Vitals memuat beberapa metrik yg memberikan bagaimana pengguna berinteraksi menggunakan website Anda, galat satunya ialah Largest Contentful Paint (LCP). Pada artikel ini, kami akan mengungkapkan lebih lanjut apa itu Largest Contentful Paint serta menyampaikan model cara mengoptimasi LCP, serta cara mengetahui skor LCP Anda. mari baca hingga terselesaikan!

 

Cara Mengetahui Skor Largest Contentful Paint

Menilai metrik Core Web Vitals, mulai asal first input delay (FID) hingga largest contentful paint (LCP), akan memerlukan tool dan perangkat lunak eksklusif. Field data (data lapangan) dikumpulkan asal pengguna asli serta pengalamannya, sedangkan lab data (data lab) mengumpulkan informasi asal lingkungan simulasi.

Beberapa tool jua menggabungkan kedua tipe data tersebut buat menyampaikan laporan yg lebih mendetail, yg bermanfaat dalam langkah meningkatkan secara optimal website Anda.

Galat satu tool paling populer buat menilai skor LCP adalah PageSpeed ​​Insights berasal Google. Tool ini tersedia perdeo dan membantu pengguna untuk menganalisis serta mendiagnosis performa website menggunakan menyajikan audit serta peluang peningkatan yg relevan.

 

PageSpeed ​​Insights juga cukup praktis dipergunakan. Berikut hal-hal yang perlu Anda lakukan ketika memakai tool ini:

Ketik atau paste (tempel) URL website ke kolom pencarian pada bagian atas page, kemudian klik tombol Analyze. jangan lupa, mungkin perlu ketika beberapa mnt hingga proses analisis performa terselesaikan.

sesudah analisis terselesaikan, cek bagian Diagnose performance issues untuk mendapatkan metrik serta rekomendasi yang bermanfaat buat meningkatkan performa. Nilai membagikan akibat secara keseluruhan.

Anda bisa menemukan lebih banyak metrik, termasuk largest contentful paint, first contentful paint, dan cumulative layout shift. Klik Expand view buat membaca penjelasan singkat setiap metrik.

PageSpeed ​​Insights pula memberikan sejumlah rekomendasi dan diagnostik buat meningkatkan performa website. Rekomendasi serta diagnostik ini bisa difilter dari Core Web Vitals yg relevan.

Tool lain yg bisa Anda coba adalah Lighthouse dan SearchConsole.

Berapa Nilai Largest Contentful Paint yang rupawan?

Largest Contentful Paint diukur dalam hitungan dtk. artinya, halaman web wajib mampu merender elemen terbesarnya pada saat kurang asal dua,5 dtk.

Halaman web menggunakan nilai LCP 1,2 detik atau kurang berarti relatif baik serta tidak perlu tindakan lebih lanjut. Nilai antara 1,2 serta dua,lima dtk masih bisa diterima. tapi, Anda mungkin perlu menyesuaikan beberapa elemen buat menaikkan nilai LCP.

Nilai LCP yang lebih akbar berasal dua,5 dtk memberikan bahwa website Anda memiliki performa jelek. Hal ini mampu berdampak negatif di pengalaman pengguna, dan di akhirnya Mengganggu perkembangan website.

Elemen Apa yg Diukur oleh Largest Contentful Paint?

Setiap metrik menilai elemen website yg tidak sinkron.

contohnya, first contentful paint (FCP) menilai waktu yg diharapkan halaman web buat menampilkan konten pertama. Konten ini mencakup elemen gambar, diagram, serta teks.

Pada interim itu LCP hanya menilai seberapa cepat halaman bisa memuat elemen terbesar di dalam viewport (area yang menampilkan konten). sebab, ketika yang diperlukan buat menampilkan elemen terbesar ialah indikator utama seberapa cepat laman bisa dimuat.

Elemen yang memicu entri LCP meliputi:

• Elemen gambar (termasuk yang terdapat pada pada elemen SVG)
• Elemen video
• Elemen dengan gambar latar belakang yang dimuat menggunakan fungsi url()
• Node teks dalam elemen level blok

Nah, yang dianggap ‘elemen terbesar’ pada hal ini tergantung di jenisnya. buat gambar, ukuran yg dilaporkan merupakan berukuran yang terlihat atau berukuran intrinsiknya, mana pun yang terkecil. buat teks, LCP hanya mempertimbangkan ukuran node teksnya.

Selain itu, Largest Contentful Paint tidak akan mempertimbangkan bagian elemen mana pun yg memanjang atau terpotong di luar viewport. Ini berarti penghitungan berukuran tidak menyertakan margin, padding, atau batas laman.

 

Cara menaikkan Largest Contentful Paint (11 Metode)

Karena largest contentful paint artinya indikator utama kecepatan loading laman website, nilai LCP yang jelek mampu mengakibatkan pengalaman pengguna yang jelek jua. terdapat beberapa hal awam yg menyebabkan performa website buruk , di antara:

• Saat respons server dan ketika loading resource yg lambat
• Rendering di sisi klien
• Resource yg memblokir render

Untungnya, terdapat beberapa cara buat mengatasi problem ini. Berikut 11 cara meningkatkan secara optimal largest contentful paint yg efektif:

1. Gunakan CDN

Tingkat kesulitan: sedang

dampak: rendah/sedang/tinggi

Content delivery network atau CDN artinya tool sophisticated buat menaikkan pengelolaan traffic website. CDN menggunakan server tambahan yg akan membantu saat origin server perlu menangani traffic tinggi. umumnya, website besar memakai teknologi ini buat menangani poly pengunjung secara rutin.

Nah, CDN bisa membantu meningkatkan LCP menggunakan menyeimbangkan beban jaringan sebab permintaan pengunjung tak perlu antre pada server yang sama. Ini bisa menghasilkan nilai LCP yg lebih cepat dan berpotensi menaikkan pengalaman pengguna.

CDN akan berfungsi lebih baik lagi bila dipadukan menggunakan software lain, misalnya menggunakan image CDN yang akan mengoptimalkan serta membarui berukuran gambar secara real-time. Langkah ini bisa mempercepat website yg berisi banyak media buat merender kontennya.

 

Proses setting CDN berbeda-beda tergantung pada penyedia hosting yang digunakan, akan tetapi biasanya cukup simpel. jika menggunakan Hostinger, Anda bisa mengaktifkan CDN pribadi berasal hPanel.

salah satu solusi CDN paling terkenal adalah Cloudflare, yang memberikan lebih asal 120 sentra data di seluruh global. Layanan ini menyediakan paket gratis dan memiliki proses konfigurasi yang simpel, terutama kalau Anda menggunakan Cloudflare di WordPress.

Selain Cloudflare, Anda jua bisa memakai solusi CDN lainnya mirip StackPath, Sucuri, dan Google Cloud CDN.

 

2. Pastikan ukuran Gambar tepat

Taraf kesulitan: praktis

Efisiensi: rendah/sedang/tinggi

seperti penjelasan sebelumnya, beberapa gambar mungkin merupakan elemen largest contentful paint tergantung pada ukurannya. oleh sebab itu, Anda wajib memastikan apakah halaman website Anda telah mempunyai ukuran gambar yang optimal supaya nilai LCP permanen cantik.

Kuncinya adalah tahu ukuran gambar yg paling sesuai menggunakan perangkat pengguna. buat memastikan nilai LCP yg baik, page web perlu menggunakan gambar responsif.
contohnya, jika versi desktop website Anda memakai gambar ukuran akbar, berarti versi selulernya wajib memakai gambar berukuran sedang.
krusial jua buat mengetahui berukuran gambar default platform website Anda. misalnya, ada 4 jenis berukuran gambar default WordPress, yaitu:

• Thumbnail – tepatnya 150 piksel persegi.
• Sedang – sampai 300 piksel persegi.
• Besar – maksimum 1.024 piksel persegi.
• Berukuran penuh – ialah berukuran gambar orisinil.

Ingat, gambar melaporkan berukuran elemen terkecilnya. artinya, gambar yg dikompresi akan melaporkan ukuran yg terlihat, sedangkan gambar yang diperbesar akan melaporkan ukuran aslinya.