Cara Mengukur dan Mengoptimalkan Cat Contentful Terbesar untuk UX Unggul

Ketika datang ke kesuksesan online, ada banyak cara untuk melakukannya. Pengalaman pengguna yang dioptimalkan adalah salah satu caranya. Google akan menggunakan pengalaman pengguna yang berbeda dan metrik terkait untuk menentukan peringkat situs web untuk SEO. Itu terus menghasilkan banyak alat untuk meningkatkan kinerja web. Kami akan melihat beberapa cara yang dilakukan Google untuk meningkatkan pengalaman pengguna di bawah ini.

Apa itu Google Core Web Vitals?

Dalam upaya baru-baru ini untuk mengubah ukuran dan pemahaman tentang apa yang memenuhi syarat sebagai pengalaman pengguna yang layak, Google mengatur metrik halaman. Metrik standar ini disebut sebagai web vital inti dan memfasilitasi peringkat keahlian pengguna dunia nyata di situs web Anda.

Apa itu Cat Contentful Terbesar?

Untuk memulainya, mari kita lihat Largest Contentful Paint (LCP). Ini adalah salah satu metrik vital web inti. Ini mengukur waktu pemuatan komponen konten terbesar dalam viewport saat terlihat. Metrik alternatif seperti TTFB dan First Contentful Paint secara bersama-sama memfasilitasi pengalaman halaman langsung, metrik tersebut tidak ada setelah halaman menjadi "bermakna" bagi pengguna.

Biasanya, kecuali komponen terpenting pada halaman menjadi terlihat sepenuhnya, halaman mungkin tidak menawarkan konteks yang memadai bagi pengguna. LCP, oleh karena itu, mewakili harapan pengguna. Sebagai metrik vital web inti, LCP menyumbang dua puluh lima persen dari Skor Kinerja, itulah sebabnya LCP merupakan salah satu metrik terpenting untuk dioptimalkan.

Memeriksa Waktu LCP Anda

Sesuai Google, kategori bagian yang dipertimbangkan untuk Cat Konten Terbesar adalah:

• <img> elemen
• <image> elemen di dalam elemen <svg>
• Elemen <video> (gambar poster digunakan)
• Elemen dengan gambar latar belakang dimuat melalui fungsi URL
• Elemen tingkat blok yang terdiri dari simpul teks dan/atau elemen teks tingkat sebaris lainnya

Bagaimana LCP Diukur?

Tentu saja, ada beberapa cara untuk mengukur LCP halaman web Anda. Cara termudah untuk melakukannya adalah dengan menggunakan salah satu platform yang tersedia yang mencakup Lighthouse, PageSpeed ​​Insights, Search Console, serta Laporan Pengalaman Pengguna Chrome. Misalnya, Google PageSpeed ​​Insights dalam laporannya menunjukkan komponen untuk menghitung LCP.

Apa itu LCP yang Baik?

Untuk memberikan keahlian pengguna yang layak, Anda harus berusaha mempertahankan LCP 2,5 detik atau lebih rendah di situs Anda. Sebagian besar pemuatan halaman Anda seharusnya terjadi di bawah ambang batas ini. Sekarang kita semua tahu apa itu LCP dan apa target kita seharusnya, mari kita periksa cara-cara untuk meningkatkan LCP.

(Harap tambahkan gambar bernama Mayoritas halaman harus dimuat pada LCP 2,5 detik atau lebih rendah.jpg)

Cara Mengoptimalkan Largest Contentful Paint (LCP)

Sistem yang mendasari pengurangan LCP sama sekali adalah untuk mengurangi data yang diunduh ke perangkat pengguna dan mengurangi waktu yang diperlukan untuk mengelola konten tersebut dan memastikan pengalaman pengguna yang lancar.

Optimalkan gambar Anda

Di sebagian besar situs, konten paruh atas biasanya berisi gambar berukuran besar yang diperlukan untuk LCP. Mungkin gambar pahlawan, korsel, atau spanduk. Anda harus mengoptimalkan gambar-gambar ini untuk LCP yang lebih kuat.

Untuk mengoptimalkan gambar Anda, Anda harus menggunakan CDN gambar pihak ketiga seperti ImageKit.io. Keuntungan menggunakan CDN gambar pihak ketiga adalah Anda cukup menargetkan bisnis Anda yang sebenarnya dan menyerahkan pengoptimalan gambar ke CDN gambar.

Transformasi real-time untuk gambar responsif

Google menggunakan kompartementalisasi mobile-first untuk hampir semua situs. Inilah mengapa perlu untuk mengoptimalkan LCP untuk seluler melalui desktop. Setiap gambar harus diperkecil sesuai permintaan tata letak.

Misalnya, Anda ingin gambar dalam ukuran yang lebih kecil di halaman daftar dan ukuran yang lebih besar di halaman detail produk. Pengubahan ukuran ini memastikan bahwa Anda tampaknya tidak menggunakan byte tambahan apa pun dari yang diperlukan untuk halaman yang sama persis.

Tembolok gambar dan perbaiki waktu pengiriman

CDN gambar menggunakan Jaringan Pengiriman Konten (CDN) untuk mengirimkan foto. Menggunakan CDN memastikan bahwa gambar dimuat dari lokasi terdekat daripada server yang mungkin berada di belahan dunia lain.

Pramuat sumber daya penting

Ada kasus di mana browser mungkin tidak memuat visual jika memengaruhi LCP. Sebagai contoh, gambar spanduk di flip atas dapat dilihat sebagai gambar latar belakang dalam file CSS. Karena browser tidak akan mengetahui hal ini tentang gambar sampai file CSS diunduh, browser tidak akan memuatnya.

Sekarang, jika Anda bertanya, "Bagaimana cara memuat gambar Cat Contentful terbesar?", Jawabannya sederhana. Anda akan dapat memuatnya terlebih dahulu dengan menggunakan tag dengan atribut rel= “preload” ke bagian atas dokumen bahasa mark-up hypertext Anda.

Meskipun Anda dapat memuat lebih dulu beberapa sumber daya dalam dokumen, Anda harus membatasinya pada gambar atau video paruh atas, file font selebar halaman, atau file CSS dan JS penting.

Kurangi waktu respons server

Jika server Anda membutuhkan waktu lebih lama untuk memuat daripada yang dianggap normal, maka waktu yang diperlukan untuk memuat halaman di layar akan meningkat. Ini berdampak negatif pada setiap metrik kecepatan halaman, bersama dengan LCP. Untuk meningkatkan waktu respons server, Anda dapat:

• Analisis dan optimalkan server Anda
• Gunakan Jaringan Pengiriman Konten
• Prakoneksi ke asal pihak ketiga
• Sajikan cache konten terlebih dahulu dengan pekerja layanan
• Kompres file teks

Tingkatkan waktu respons perangkat klien

Jika halaman Anda membutuhkan waktu lama untuk dimuat, hal itu dapat merugikan calon pelanggan. Untungnya, ada beberapa hal yang dapat Anda lakukan untuk memastikannya dimuat dengan benar dan menciptakan pengalaman pengguna yang mulus. Ini termasuk:

• Menyisipkan CSS penting
• Memperkecil dan menekan konten
• Mengoptimalkan LCP untuk rendering sisi klien
• Menggunakan rendering sisi server
• Menggunakan pra-rendering

LCP telah menjadi faktor peringkat pencarian besar yang sangat berkorelasi dengan pengalaman dan perjalanan pengguna. Oleh karena itu, jika Anda menjalankan bisnis web, Anda harus mengoptimalkan komponen ini untuk memastikan keberhasilan usaha.

Biodata Penulis

Ghia Marnewick adalah seorang penulis, manajer media sosial, dan manajer digital. Dia menulis konten untuk Aumcore dan bersemangat menemukan cara baru untuk berbagi informasi dengan dunia.