Posted on

Tips-trik Mengatasi Masalah Largest Contentful Paint

Mengatasi Masalah Largest Contentful Paint

wpJakarta.Com – Tips-trik Mengatasi Masalah Largest Contentful Paint. Salah satu masalah yang bikin sakit kepala adalah bagaimana membuat website atau konten yang sesuai dengan maunya google. Kebanyakan orang menggunakan google pagespeed untuk mengukur performa website dan ingin mendapat skor yang tinggi baik mobile atau desktop. Maklum hasil skor yang tinggi bisa mempengaruhi peringkat pada hasil pencarian google.

Artikel kami lainnya :

Metrik Core Web Vitals

Mulai tahun 2021 google akan menggunakan apa yang mereka sebut sebagai core web vitals sebagai metode pengukuran performa website yang akan mempengaruhi ranking hasil pencarian pada mesin pencarinya. Baca artikel kami tentang apa Itu Core Web Vitals. Atau baca tentang core web vitals pada halaman blog google developer.

Tiga metrik utama pengukuran core web vitals meliputi : Largest Contentful Paint (LCP):  LCP mengukur kinerja loading halaman. LCP harus dapat ditampilkan dalam waktu kurang dari 2,5 detik dari awal halaman pertama kali di muat. First Input Delay (FID): FID mengukur interaktif. Untuk memberikan pengalaman pengguna yang baik, halaman harus memiliki FID kurang dari 100 milidetik. Dan Cumulative Layout Shift (CLS): CLS mengukur stabilitas visual. Secara standar halaman harus mempertahankan CLS kurang dari 0,1 detik.

Web Vitals – Essential metrics for a healthy site

Tema website WordPress yang kita temui sering kali sudah tampil sempurna ketika di tampilkan pada halaman desktop. Namun jauh dari yang diharapkan ketika harus menampilkan konten atau halaman web pada layar mobile. Seperti contoh gambar di bawah adalah gambar yang kami ambil dari website jaringan yang kami kelola freshplus62.com.

Tips-trik mengatasi masalah largest contentful paint

Mengatasi Masalah Largest Contentful Paint

Dari gambar di atas terdapat elemen cover gambar (gambar sayur) yang teridentifikasi sebagai LCP (Largest Contentful Paint). Memakan waktu hingga 4.3 detik, jauh di atas standar bahwa elemen LCP harus sudah tampil secara utuh dalam waktu kurang dari 2.5 detik.

Tips-trik yang paling mungkin dilakukan untuk mengatasi masalah largest contentful paint tersebut adalah dengan menggunakan gambar yang berukuran lebih kecil. Sehingga bisa lebih ringan saat di tampilkan dan memakan waktu yang lebih cepat. Tapi kebetulan, pengelola website freshplus62.com ingin agar cover tidak perlu di tampilkan pada halaman mobile. Hal tersebut mudah dilakukan dengan memberikan kode CSS sebagai berikut.

@media ( max-width: 767px ) {#post-id>div.entry-content>div.wp-block-cover.alignfull {display:none;}
Mengatasi Masalah Largest Contentful Paint

Kode CSS diatas akan mengeliminasi cover gambar untuk di tampilkan pada halaman device yang lebih kecil dari 767 piksel. Dan hasilnya lumayan mencengangkan dengan LCP yang turun hingga 2.8 detik. Meskipun masih lebih 0.3 detik dari standarnya 2.5 detik.

Baca juga :

Tips-trik mengatasi masalah largest contentful paint

Tips-trik diatas tentu saja bukan cara mengatasi masalah largest contentful paint yang sebenarnya buat sebagian orang. Karena itu akan menghilangkan gambar untuk tampil pada layar handphone. Tips-trik untuk mengatasi masalah largest contentful paint yang sebenarnya adalah dengan mempraktekan teknik-teknik yang umum untuk meningkatkan performa website seperti yang sudah banyak di bahas seperti minify kode, inline, defer, kompres file, kompres gambar dan sebagainya.


100% website WordPress transparan dan “ecofriendly”, tidak ada data pengunjung yang kami kumpulkan dan tidak ada tracking data apapun terhadap data-data pengunjung”.​ Selengkapnya kunjungi halaman tentang kami.

wpJakarta

Blog “native” yang fokus pada usaha online berbasis WordPress & WooCommerce. Lihat penawaran terbaik untuk merchandise WordPress (Kaos, Hoodie, Topi, Tas dll).

Selengkapnya, klik : https://wpjakarta.com/shop/

Fresh (+62)

e-Commerce produk fresh online. Order secara online sayur, daging, buah dan bumbu rempah atau kirim list pesanan untuk pemenuhan usaha makanan dan restoran.

Selengkapnya, klik : https://freshplus62.com/about/