Tips-trik 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 :

• Tips-trik Mengganti Email Administrator WordPress
• Tips-trik Membuat Paginasi Halaman WordPress – Memisahkan Post Ke Beberapa Halaman
• Tips-trik Menambahkan Google Recaptcha Pada Kolom Komentar WordPress Tanpa Plugin
• Tips-trik Memaksimalkan SEO WordPress Dengan Cornerstone Content
• Tips-trik Mengatasi Spam Dan Serangan Brute Force Attack
• Membuat Menu Sosial Media Pada Tema Storefront WooCommerce
• Apa Itu WooCommerce ? Penjelasan Lengkap Tentang WooCommerce
• Tips-trik Menambahkan Breadcrumbs Storefront WooCommerce
• Tips-trik Merubah Text Copyright Tema Storefront
• Tips-trik Menambah Jumlah Produk Pada Halaman WooCommerce

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

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;}

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 :

• Meningkatkan Metabolisme Tubuh Dengan Mengkonsumsi Lada Hitam
• Mengenal Tanaman Kubis Dan Perbedaannya Dengan Kol
• Khasiat Dan Manfaat Madu Asli Bagi Kesehatan
• Cari Peluang Usaha Di Masa New Normal, Putar Kembali Roda Ekonomi
• 10 Cara Ini Mampu Menghindarkan Diri Dan Menghambat Penyebaran Virus Corona
• Warung Produktif Jakarta, Website Optimasi Bisnis, Blog Dan Komunitas

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.