Cat Konten Terbesar Dijelaskan: Cara Meningkatkan Waktu Anda

Berjuang dengan cara meningkatkan Cat Konten Terbesar di situs web Anda? Atau tidak yakin apa arti Cat Konten Terbesar dan mengapa Anda bahkan harus peduli tentang itu?

Tidak peduli dari mana Anda memulai, posting ini untuk Anda karena Anda akan mempelajari semua yang perlu Anda ketahui tentang Cat Berkonten Terbesar.

Itu termasuk apa Arti Cat Konten Terbesar, mengapa itu penting, bagaimana mengukurnya, dan bagaimana memperbaikinya.

Anda dapat menggunakan daftar isi di bawah ini untuk melompat ke bagian tertentu berdasarkan tingkat pengetahuan Anda saat ini. Atau, teruslah membaca untuk memulai dari awal.

Apa itu Contentful Paint (LCP) Terbesar? Menjelaskan Makna Cat Isi Terbesar

Largest Contentful Paint adalah metrik kinerja yang mengukur berapa lama waktu yang diperlukan untuk memuat konten utama halaman web.

Largest Contentful Paint adalah bagian dari metrik Data Web Inti Google, bersama dengan Pergeseran Tata Letak Kumulatif (CLS) dan Penundaan Input Pertama (FID).

Pada tingkat yang lebih teknis, Largest Contentful Paint mengukur berapa lama waktu yang dibutuhkan dari pengguna memulai pemuatan halaman hingga blok teks, gambar, atau video terbesar dirender dalam viewport.

Apa yang dimaksud dengan "konten utama" dalam istilah LCP?

Nah, konten utama akan bergantung pada halaman sebenarnya yang dipermasalahkan, tetapi bisa juga salah satu dari berikut ini:

• Teks – lebih khusus lagi, elemen tingkat blok apa pun yang berisi node teks atau elemen teks tingkat sebaris lainnya.
• Gambar – elemen di dalam elemen <img> atau elemen <image> di dalam elemen <svg>.
• Video – semua elemen <video> (menggunakan gambar poster).
• Elemen dengan gambar latar belakang – hanya saat dimuat melalui fungsi CSS url() (tidak berlaku untuk gradien CSS).

Nanti di posting ini, Anda akan belajar bagaimana menemukan elemen Cat Konten Terbesar yang tepat untuk setiap halaman di situs Anda.

Cat Konten Terbesar vs Cat Konten Pertama

Satu pertanyaan umum yang mungkin Anda miliki adalah apa perbedaan antara Cat Konten Terbesar vs Cat Konten Pertama, metrik kinerja umum lainnya.

Meskipun kedua istilah tersebut mirip, perbedaan utamanya adalah Largest Contentful Paint mengukur waktu yang diperlukan untuk memuat "konten utama" halaman, sedangkan First Contentful Paint mengukur waktu yang dibutuhkan "objek pertama" untuk dimuat ( apakah itu konten utama ).

Pada dasarnya:

• LCP = konten utama saja
• FCP = konten pertama, apa pun kontennya

Dengan demikian, waktu LCP Anda hampir selalu sedikit lebih tinggi dari waktu FCP karena elemen "konten utama" biasanya bukan yang pertama dimuat.

Mengapa Waktu Cat Konten Terbesar Situs Anda Penting?

Ada dua alasan utama mengapa waktu Cat Konten Terbesar situs Anda penting:

1. Pengalaman pengguna
2. Optimisasi Mesin Pencari

Pengalaman pengguna

Alasan terbesar mengapa Anda harus peduli dengan waktu Cat Konten Terbesar situs Anda adalah bahwa metrik ini adalah proksi yang baik untuk memahami pengalaman pengguna Anda terkait dengan kinerja situs Anda.

Sebagian besar pengguna tidak peduli berapa lama waktu yang dibutuhkan situs web Anda untuk memuat setiap skrip dan elemen sepenuhnya. Sebaliknya, mereka peduli tentang berapa lama bagi mereka untuk mulai mendapatkan nilai dari situs web Anda.

Cat Konten Terbesar melakukan pekerjaan yang baik untuk mencoba mengukur momen "nilai" itu dengan melihat berapa lama konten utama dimuat.

Jika Anda mengoptimalkan situs Anda untuk mencapai waktu Cat Konten Terbesar yang cepat, Anda dapat cukup yakin bahwa Anda menawarkan pengalaman yang solid kepada pengguna di situs Anda, setidaknya dalam hal kinerja (Anda juga menginginkan desain yang ramah pelanggan dan kegunaan yang baik).

Tentu saja, bukan berarti Anda harus mengabaikan metrik performa lainnya. Kami selalu menyarankan untuk melihat secara menyeluruh kinerja dan kemacetan situs Anda, itulah sebabnya kami membuat alat pemantauan kinerja aplikasi (APM) kami sendiri yang tersedia secara gratis jika Anda menggunakan hosting Kinsta – Kinsta APM.

Pengoptimalan Mesin Telusur (SEO)

Di bagian depan pengoptimalan mesin telusur, Largest Contentful Paint adalah bagian dari trio metrik Data Web Inti Google, yang mulai digunakan Google sebagai faktor peringkat SEO dalam pembaruan algoritme Pengalaman Halaman 2022.

Ini berarti memiliki waktu Cat Konten Terbesar yang buruk dapat menghambat kinerja situs Anda di hasil penelusuran Google.

Sementara faktor lain seperti kualitas/relevansi konten dan tautan balik masih memainkan peran yang jauh lebih besar di mana peringkat situs web Anda, penting untuk mengoptimalkan waktu Cat Konten Terbesar situs Anda untuk memastikan bahwa Anda mendapatkan hasil maksimal dari upaya SEO Anda.

Apa yang Dapat Mempengaruhi Skor Konten Konten Terbesar?

Dua jenis masalah “utama” dapat memengaruhi waktu Cat Konten Terbesar sebuah halaman:

1. Waktu yang dibutuhkan server Anda untuk merespons dengan dokumen HTML awal.
2. Berapa lama sumber daya LCP aktual dimuat.

Jenis masalah pertama berkaitan dengan waktu respons server, alias time to first byte (TTFB). Bahkan sebelum browser pengguna dapat berpikir untuk memuat konten utama, pertama-tama perlu mendapat respons dari server.

Berikut adalah beberapa masalah umum yang mempengaruhi hal ini:

• Tidak menggunakan caching halaman – tidak menggunakan caching halaman memaksa server untuk melakukan lebih banyak “pekerjaan” sebelum dapat merespons dengan dokumen HTML.
• Hosting lambat – penyedia hosting lambat akan selalu memiliki TTFB lambat, apa pun yang Anda lakukan.
• Tidak menggunakan CDN – jaringan pengiriman konten (CDN) dapat mempercepat TTFB dengan menayangkan halaman dari jaringan globalnya alih-alih mengharuskan pengguna mengunduhnya dari server asal situs Anda.

Setelah server situs Anda mengirimkan dokumen HTML awal, mungkin ada kemacetan lebih lanjut saat memuat elemen konten utama yang sebenarnya.

Berikut adalah beberapa masalah umum yang mempengaruhi hal ini:

• Render-blocking JavaScript atau CSS (atau kode yang tidak dioptimalkan/tidak diperlukan secara umum) – jika browser pengguna perlu mengunduh dan/atau memproses JavaScript atau CSS yang tidak perlu sebelum dapat memuat elemen utama, hal itu akan memperlambat LCP Anda.
• Gambar yang tidak dioptimalkan – jika elemen LCP adalah gambar, menggunakan gambar yang tidak dioptimalkan akan memperlambat waktu Anda karena gambar yang lebih besar membutuhkan waktu lebih lama untuk diunduh.
• Pemuatan font yang tidak dioptimalkan – jika elemen LCP adalah teks, memuat font khusus dengan cara yang tidak dioptimalkan dapat memperlama waktu untuk menampilkan teks tersebut.
• File tidak terkompresi – jika Anda tidak menggunakan teknologi kompresi seperti Gzip atau Brotli, hal ini akan membuat browser pengguna membutuhkan waktu lebih lama untuk mendownload file situs Anda.

Bergantung pada situs Anda, Anda mungkin mengalami kemacetan di kedua area atau hanya salah satu area. Anda akan belajar bagaimana menyelesaikan semua masalah ini nanti di pos ini.

Apa Waktu Cat Konten Terbesar yang Baik?

Google mendefinisikan waktu Cat Konten Terbesar yang "Bagus" sebagai di bawah 2,5 detik.

Jika waktu Cat Konten Terbesar halaman Anda adalah antara 2,5 dan 4,0 detik, Google mengklasifikasikannya sebagai "Perlu Peningkatan". Dan jika waktu halaman Anda lebih dari 4,0 detik, Google mendefinisikannya sebagai "Buruk".

Berikut grafik dari Google yang menunjukkan ini secara visual:

Cara Mengukur Cat Konten Terbesar: Alat Uji LCP Terbaik

Ada sejumlah alat yang dapat Anda gunakan untuk menguji kinerja situs Anda untuk Cat Berkonten Terbesar – mari telusuri beberapa yang paling berguna…

Wawasan PageSpeed

PageSpeed ​​Insights adalah salah satu alat terbaik untuk menilai Largest Contentful Paint karena alat ini menawarkan empat informasi berguna:

1. Anda dapat melihat waktu Cat Konten Terbesar situs Anda dengan pengguna sebenarnya dari laporan UX Chrome ( jika situs Anda memiliki lalu lintas yang cukup untuk disertakan dalam laporan ).
2. Anda dapat menjalankan pengujian simulasi untuk melihat performa situs Anda.
3. Google akan memberi tahu Anda elemen LCP sebenarnya yang digunakan untuk pengujian, yang memberi tahu Anda elemen mana yang harus dioptimalkan.
4. Google akan memberikan saran tentang cara meningkatkan waktu LCP Anda.

Berikut cara menggunakannya:

1. Buka situs web Wawasan PageSpeed.
2. Masukkan URL halaman yang ingin Anda uji.
3. Klik Analisis .

Google kemudian akan menampilkan hasil untuk seluler dan desktop – pastikan untuk memeriksa keduanya.

Untuk menemukan elemen utama yang digunakan Google untuk menghitung LCP, Anda dapat menggulir ke bawah ke bagian Diagnostik dan meluaskan bagian elemen Cat Konten Terbesar :

Sekali lagi, pastikan untuk memeriksa seluler dan desktop karena elemen LCP mungkin berbeda untuk masing-masing.

Alat Pengembang Chrome

Anda juga dapat menguji waktu Cat Berkonten Terbesar langsung dari Alat Pengembang Chrome menggunakan tab Performa atau fitur audit Lighthouse. Kami merekomendasikan menggunakan tab Performance karena memberi Anda lebih banyak informasi.

Berikut cara memulainya:

1. Buka halaman yang ingin Anda uji.
2. Buka Alat Pengembang Chrome.
3. Buka tab Performa .
4. Pastikan kotak Data Web dicentang.
5. Klik tombol Muat Ulang ( tercantum di bawah ).

Sekarang Anda akan melihat analisis lengkap situs Anda.

Jika Anda mengarahkan kursor ke LCP di tab Jaringan , Anda dapat melihat waktu:

Jika Anda mengarahkan kursor ke LCP di tab Pengaturan Waktu , Anda dapat melihat elemen LCP yang sebenarnya:

Google Search Console

Meskipun Google Search Console tidak mengizinkan Anda menguji satu halaman untuk waktu Cat Konten Terbesarnya, ini sangat berguna untuk menilai kinerja seluruh situs.

Setiap halaman di situs Anda akan memiliki waktu LCP yang berbeda, jadi Anda tidak bisa hanya menguji halaman beranda dan menghentikannya.

Dengan Google Search Console, Anda akan dapat melihat di mana setiap halaman di situs Anda termasuk dalam kategori "Baik", "Perlu Peningkatan", dan "Buruk" Google. Data performa berasal dari laporan UX Chrome, jadi didasarkan pada data pengguna sebenarnya.

Jika Anda belum melakukannya, pertama-tama Anda harus memverifikasi situs Anda dengan Google Search Console.

Setelah selesai melakukannya, berikut cara mengakses laporan LCP:

1. Buka Google Search Console untuk situs Anda.
2. Buka Data Web Inti di bawah tab Pengalaman .
3. Klik Buka Laporan di samping bagan Seluler atau Desktop.
4. Cari masalah apa pun di bagian Mengapa URL tidak dianggap baik . Jika Anda mengeklik masalahnya, Anda dapat melihat informasi selengkapnya tentang URL mana yang menyebabkan masalah.

*Pastikan untuk memeriksa hasil desktop dan seluler, karena data masing-masing mungkin berbeda.

WebPageTest

WebPageTest adalah opsi praktis lainnya untuk menjalankan tes kinerja simulasi.

Tidak seperti Wawasan PageSpeed, WebPageTest memungkinkan Anda menyesuaikan sepenuhnya berbagai metrik pengujian seperti lokasi pengujian, kecepatan koneksi, perangkat, dan lainnya. Itulah manfaat utama menggunakannya dibandingkan alat lain – ini memberi Anda lebih banyak opsi untuk mengonfigurasi pengujian.

Berikut cara menjalankan tes:

1. Pergi ke WebPageTest.
2. Tambahkan URL halaman yang ingin Anda uji.
3. Perluas opsi Konfigurasi Lanjutan untuk mengonfigurasi pengujian Anda sepenuhnya.

Di laman hasil, Anda akan melihat data LCP, beserta banyak metrik kinerja lainnya (termasuk analisis air terjun).

Cara Menemukan Elemen Cat Konten Terbesar

Jika Anda ingin meningkatkan Largest Contentful Paint, akan sangat membantu untuk mengetahui dengan tepat elemen mana yang digunakan Google untuk menghitung waktu LCP Anda.

Misalnya, jika Anda mengetahui bahwa Google menggunakan gambar pahlawan Anda sebagai elemen LCP di beranda, Anda tahu bahwa Anda perlu mencari cara untuk menayangkan gambar pahlawan tersebut secepat mungkin jika ingin meningkatkan waktu LCP beranda Anda.

Seperti yang kami sebutkan sebelumnya, Anda dapat menemukan elemen Cat Konten Terbesar menggunakan Wawasan PageSpeed ​​atau Alat Pengembang Chrome.

Pastikan untuk memeriksa hasil seluler dan desktop, karena elemen LCP Anda mungkin berbeda pada perangkat yang berbeda.

Cara Meningkatkan Cat Konten Terbesar di WordPress (atau Platform Lain)

Sekarang setelah Anda mengetahui semua tentang Cat Konten Terbesar, mari kita masuk ke beberapa tip yang dapat ditindaklanjuti untuk meningkatkan Cat Konten Terbesar di WordPress.

Meskipun kami akan fokus pada WordPress untuk tip ini, semua tip bersifat universal dan berlaku untuk jenis situs web lainnya.

Siapkan Caching untuk Meningkatkan Waktu Respons Server

Caching dapat meningkatkan waktu respons server dengan mengurangi pekerjaan pemrosesan yang harus dilakukan server Anda sebelum dapat mengirimkan dokumen HTML yang telah selesai ke browser pengunjung.

Jika Anda menghosting situs WordPress Anda dengan Kinsta, Anda tidak perlu khawatir tentang mengonfigurasi caching karena Kinsta secara otomatis mengimplementasikan caching yang dioptimalkan untuk Anda.

Jika Anda menghosting di tempat lain, Anda dapat mengaktifkan caching di situs Anda menggunakan plugin gratis seperti WP Super Cache atau plugin berbayar seperti WP Rocket.

Untuk opsi lainnya, lihat postingan kami dengan plugin caching WordPress terbaik.

Tingkatkan ke Hosting WordPress yang Lebih Cepat

Meskipun semua taktik dalam daftar ini dapat membantu Anda meningkatkan waktu LCP Anda, tidak ada yang berbelit-belit:

Jika Anda menggunakan hosting WordPress yang lambat dan tidak dioptimalkan, waktu LCP Anda akan selalu dibatasi oleh kualitas host Anda.

Anda mungkin dapat membuat segalanya sedikit lebih baik, tetapi Anda akan selalu berjuang untuk mencapai waktu LCP di bawah 2,5 detik jika host Anda lambat.

Jika Anda menginginkan cara termudah untuk meningkatkan waktu Paint Berisi Terbesar Anda, Anda dapat memigrasikan situs Anda ke Kinsta. Kinsta tidak hanya menawarkan infrastruktur hosting yang dioptimalkan untuk kinerja, tetapi kami juga memiliki fitur bawaan untuk menangani banyak pengoptimalan lainnya dalam daftar ini.

Itu berarti Anda dapat fokus untuk mengembangkan situs Anda alih-alih mengotak-atik mengoptimalkan waktu Cat Konten Terbesar.

Jika Anda tertarik, Kinsta akan memigrasikan situs web tanpa batas dari host mana pun secara gratis – pelajari lebih lanjut tentang migrasi gratis di sini.

Jika Anda masih ragu – coba tips lainnya di daftar ini terlebih dahulu. Tetapi jika Anda masih kesulitan setelah melakukan semua yang ada di daftar ini, Anda mungkin memerlukan hosting yang lebih baik.

Gunakan Jaringan Pengiriman Konten (CDN)

Tanpa CDN, semua pengunjung situs Anda perlu mengunduh HTML halaman dan aset statis dari server hosting Anda.

Jika pengunjung Anda berada dekat dengan server Anda, itu biasanya tidak menjadi masalah. Namun jika pengunjung Anda tersebar di seluruh dunia, ini dapat memperlambat situs Anda karena jarak fisik antara pengunjung dan server situs Anda.

Dengan CDN, Anda dapat mendistribusikan aset statis situs Anda (atau bahkan halaman HTML situs Anda yang telah selesai) ke jaringan global CDN. Dengan begitu, pengunjung dapat mengunduh file dari lokasi CDN terdekat, jauh lebih cepat.

Jika Anda menghosting dengan Kinsta, kami sarankan untuk menggunakan fitur Caching Tepi Kinsta untuk hasil terbaik.

Fitur caching tepi Kinsta berfungsi dengan melakukan caching halaman HTML lengkap situs Anda dan aset statis ke jaringan global Cloudflare ( bukan hanya menyimpan aset statis seperti kebanyakan solusi CDN ).

Ini berarti pengunjung situs Anda dapat mengunduh halaman lengkap dari lokasi edge terdekat, yang mempercepat waktu respons server dan berapa lama waktu yang diperlukan untuk memuat sumber daya LCP Anda.

Untuk mengaktifkan Caching Tepi Kinsta, buka tab Caching Tepi di dasbor situs Anda di MyKinsta.

Jika Anda menghosting di tempat lain, Anda dapat menyiapkan CDN untuk aset statis situs menggunakan layanan CDN populer seperti KeyCDN, Bunny, StackPath, dan lainnya.

Hindari Render-Blocking JavaScript (Tunda atau Hapus)

JavaScript pemblokir render adalah JavaScript yang dimuat sebelum elemen LCP utama Anda meskipun tidak diperlukan saat itu.

Dengan menunda pemuatan elemen LCP, ini akan memperlambat waktu pemuatan LCP Anda.

Untuk mengatasinya, ada beberapa strategi yang bisa Anda terapkan:

• Hapus JavaScript yang tidak perlu jika memungkinkan.
• Tunda JavaScript agar tidak memblokir pemuatan elemen utama situs Anda.
• Tunda JavaScript hingga pengguna berinteraksi dengan situs Anda.

Bagi kebanyakan orang, cara termudah untuk mengimplementasikan fungsi ini adalah melalui plugin seperti Autoptimize atau WP Rocket.

Untuk panduan lengkap tentang cara melakukan ini, kami memiliki dua postingan yang sangat mendetail:

• Cara menghilangkan sumber pemblokiran render di WordPress
• Cara menunda penguraian JavaScript

Hindari Render-Blocking CSS dan Optimalkan Pengiriman CSS

Sama seperti JavaScript yang tidak dioptimalkan dapat memperlambat situs Anda, CSS yang tidak dioptimalkan juga dapat melakukan hal yang sama.

Pada dasarnya, Anda ingin memuat CSS sesedikit mungkin. Dan untuk CSS yang perlu Anda muat, Anda ingin memuatnya secara optimal. Biasanya, ini berarti Anda ingin memuat CSS penting lebih awal, sambil menunda CSS yang tidak penting hingga nanti dalam proses pemuatan.

Jika Anda bukan pengembang, cara termudah untuk melakukannya adalah dengan menggunakan plugin pengoptimalan kinerja seperti Perfmatters, WP Rocket, atau FlyingPress.

Misalnya, WP Rocket menawarkan fitur bawaan untuk menghapus CSS yang tidak terpakai pada basis halaman demi halaman dan menyajikan CSS secara optimal.

Jika Anda ingin melihat lebih dalam tentang cara melakukan semua ini, lihat panduan lengkap kami tentang cara mengoptimalkan CSS.

Perkecil HTML, CSS, dan JavaScript Anda

Selain teknik pengoptimalan kode di atas, Anda juga ingin mengecilkan HTML, CSS, dan JavaScript situs Anda.

Pada dasarnya, ini menghapus karakter dan spasi yang tidak perlu dari kode situs Anda untuk mengecilkan ukurannya.

Jika Anda menghosting dengan Kinsta, Kinsta dapat menangani minifikasi secara otomatis melalui integrasi Cloudflare kami. Berikut cara mengontrol fitur ini:

1. Buka dasbor situs Anda di MyKinsta.
2. Buka tab CDN .
3. Klik Pengaturan di sebelah Pengoptimalan Gambar.
4. Centang kotak untuk CSS dan JS dan simpan pengaturan.

Jika Anda menghosting situs Anda di tempat lain, Anda dapat menggunakan plugin gratis seperti Autoptimize untuk memperkecil kode Anda atau salah satu plugin komprehensif premium seperti Perfmatters, WP Rocket, atau FlyingPress.

Atau, lihat tutorial minifikasi kode lengkap kami untuk mempelajari lebih lanjut. Sementara tutorial berfokus pada JavaScript, Anda juga dapat menggunakan metode dan plugin yang sama untuk mengecilkan kode lain.

Gunakan Kompresi Tingkat Server (Gzip atau Brotli)

Kompresi tingkat server memungkinkan Anda mengecilkan ukuran file situs menggunakan teknologi seperti Gzip atau Brotli.

Misalnya, kompresi yang kami gunakan untuk situs web Kinsta mengurangi ukuran file beranda Kinsta sebesar 85,82%.

Jika Anda menghosting situs web WordPress dengan Kinsta, Anda tidak perlu khawatir tentang hal ini karena Kinsta mengaktifkan kompresi Brotli untuk semua situs secara otomatis.

Jika Anda menghosting situs Anda di tempat lain, Anda dapat menggunakan alat gratis ini dari GiftOfSpeed ​​untuk memeriksa apakah situs Anda mengaktifkan Gzip atau Brotli.

Jika situs Anda tidak menggunakan kompresi, Anda dapat mengikuti panduan kami tentang cara mengaktifkan kompresi Gzip untuk menyiapkannya.

Jika Anda menggunakan Cloudflare untuk menyajikan konten situs Anda, Cloudflare juga memiliki pengaturan bawaan untuk mengaktifkan kompresi Brotli:

1. Buka situs Anda di dasbor Cloudflare.
2. Buka Kecepatan → Pengoptimalan di menu sidebar.
3. Aktifkan sakelar Brotli .

Kompres dan Ubah Ukuran Gambar

Jika elemen LCP Anda adalah gambar, mencari cara untuk mengurangi ukuran file gambar tersebut akan mengurangi waktu yang diperlukan browser pengguna untuk mengunduh gambar (sehingga mempercepat waktu LCP Anda).

Untuk mengurangi ukuran gambar, Anda harus mengubah ukuran gambar ke dimensi yang sebenarnya Anda gunakan, mengompresnya menggunakan kompresi lossy atau lossless, dan menyajikannya dalam format yang dioptimalkan seperti WebP.

Pendekatan ini umumnya merupakan praktik terbaik pengoptimalan kinerja – ini tidak khusus untuk Cat Berkonten Terbesar.

Untuk tampilan yang lebih komprehensif, lihat panduan mendetail kami untuk pengoptimalan gambar untuk situs web.

Dan oh ya – jika Anda menghosting situs WordPress Anda dengan Kinsta, Anda tidak perlu khawatir tentang hal ini karena Kinsta menawarkan fitur bawaan untuk mengoptimalkan gambar situs Anda secara otomatis tanpa memerlukan alat pihak ketiga.

Berikut cara mengaktifkan fitur ini:

1. Buka dasbor situs Anda di MyKinsta.
2. Buka tab CDN .
3. Klik Pengaturan di sebelah Pengoptimalan Gambar.
4. Pilih tingkat pengoptimalan gambar yang Anda sukai dan simpan pengaturan – menggunakan Lossy akan menawarkan peningkatan kecepatan terbesar, meskipun mungkin memiliki efek kecil pada kualitas gambar.

Pramuat Gambar Cat Konten Terbesar

Jika elemen LCP Anda adalah sebuah gambar, strategi lain untuk meningkatkan LCP adalah memuat gambar Cat Konten Terbesar terlebih dahulu. Inilah sebabnya mengapa Anda mungkin melihat rekomendasi seperti "Pramuat gambar Cat Berkonten Terbesar" di PageSpeed ​​Insights.

Dengan pramuat, Anda dapat memberi tahu browser pengguna untuk memprioritaskan pengunduhan sumber daya tertentu, seperti gambar tertentu yang merupakan elemen LCP situs Anda.

Cara paling non-teknis untuk melakukan pramuat gambar LCP adalah dengan menggunakan plugin seperti Perfmatters, yang menawarkan fitur Pramuat Gambar Penting khusus. Yang perlu Anda lakukan hanyalah menentukan berapa banyak gambar yang akan dimuat sebelumnya – kami sarankan untuk mulai dengan satu saja, karena memuat terlalu banyak aset dapat berdampak negatif.

Ada juga beberapa plugin gratis di WordPress.org untuk mencapai hal ini, seperti plugin Preload Gambar Unggulan WPZOOM, serta plugin premium lainnya, seperti FlyingPress.

Periksa Masalah Lazy Loading

Masalah lain yang dapat memicu pesan “Preload Largest Contentful Paint image” di PageSpeed ​​Insights adalah masalah dengan bagaimana situs WordPress Anda lambat memuat gambar.

Atau, ini juga dapat memicu peringatan “Gambar Cat Berkonten Terbesar dimuat dengan malas” di PageSpeed ​​Insights.

Pemuatan lambat memungkinkan Anda mempercepat waktu pemuatan awal situs dengan menunggu memuat sumber daya tertentu (seperti gambar) hingga pengguna mulai berinteraksi dengan situs Anda.

Meskipun biasanya itu adalah hal yang baik, ini dapat memperlambat waktu LCP Anda jika situs Anda mencoba memuat gambar yang merupakan elemen LCP Anda dengan lambat. Untuk alasan ini, Anda ingin memastikan bahwa situs Anda tidak malas memuat gambar apa pun yang terlihat di viewport awal.

Jika Anda menggunakan fitur pemuatan malas browser asli yang diperkenalkan WordPress di WordPress 5.5, Anda seharusnya tidak mengalami masalah ini karena WordPress sudah secara otomatis mengecualikan gambar dalam konten pertama pada WordPress 5.9.

Jika Anda ingin mengecualikan lebih dari gambar pertama, Anda dapat menggunakan fungsi wp_omit_loading_attr_threshold (tetapi kebanyakan orang tidak perlu melakukan apa pun di sini).

Namun, jika Anda menggunakan plugin pemuatan lambat bertenaga JavaScript, Anda mungkin perlu mengatur pengecualian ini secara manual di pengaturan plugin. Misalnya, plugin Perfmatters menyertakan opsi untuk memungkinkan Anda mengecualikan gambar “X” pertama dari pemuatan lambat.

Jika plugin pemuatan lambat Anda tidak mengizinkan Anda mengatur jenis pengecualian ini, Anda dapat beralih ke plugin lain yang memungkinkan.

Optimalkan Pemuatan Font Dengan Font-Display: Opsional

Jika elemen LCP Anda berupa teks, proses pemuatan font situs Anda mungkin menunda kemunculan teks, yang akan memperlambat waktu LCP Anda.

Biasanya, ini terjadi saat menggunakan font khusus. Jika situs Anda dikonfigurasi untuk menunggu untuk merender teks apa pun hingga setelah font kustom dimuat, ini akan memperlambat segalanya jika file font kustom membutuhkan waktu lama untuk dimuat.

Untuk memperbaikinya, Anda dapat menggunakan Font-Display: Opsional CSS deskriptor.

Ini memberi tahu browser untuk menggunakan font fallback jika font khusus tidak dimuat dalam jendela kecil (biasanya sekitar 100 md atau kurang).

Dalam bahasa sederhana, ini pada dasarnya berarti bahwa browser harus memberi kesempatan pada font khusus untuk dimuat. Namun jika font kustom tidak dimuat dengan cukup cepat, browser sebaiknya menggunakan font sistem fallback untuk menghindari penundaan konten lebih jauh.

Sebagai alternatif, Anda juga dapat menggunakan Font-Display: Swap, yang langsung memuat font fallback dan kemudian "menukar" font kustom setelah font kustom dimuat. Namun, pendekatan ini dapat menyebabkan masalah dengan Pergeseran Tata Letak Kumulatif jika ukuran font berbeda, jadi Anda harus berhati-hati.

Kecuali font khusus Anda benar-benar diperlukan untuk desain situs web Anda, menggunakan Tampilan Font: Opsional biasanya merupakan pilihan terbaik dari perspektif Data Web Inti.

Jika Anda nyaman menggunakan CSS secara langsung, Anda dapat mengedit properti Font-Display secara manual di stylesheet tema anak Anda.

Jika Anda tidak ingin menggunakan CSS, Anda juga dapat menemukan plugin untuk membantu Anda melakukannya, meskipun sebagian besar berfokus pada pengoptimalan untuk Google Fonts:

• Pembersihan Aset – mendukung Google Fonts secara gratis dan font lokal khusus dengan versi Pro.
• Perfmatters – menawarkan fitur untuk Google Fonts.

Jika Anda menggunakan Elementor untuk mendesain situs Anda, Elementor juga menyertakan opsi bawaan untuk memungkinkan Anda menggunakan ini untuk halaman yang Anda buat dengan Elementor:

1. Buka Elementor → Pengaturan .
2. Buka tab Tingkat Lanjut .
3. Setel drop-down Google Fonts Load sama dengan Optional .

Ringkasan

Mempelajari cara meningkatkan Largest Contentful Paint penting untuk meningkatkan pengalaman pengguna situs Anda dan memaksimalkan peringkat mesin pencari Anda.

Secara umum ada dua bagian untuk meningkatkan Largest Contentful Paint – mempercepat waktu respons server Anda dan kemudian mengoptimalkan kode situs Anda untuk merender elemen LCP secepat mungkin.

Jika Anda tidak ingin khawatir tentang waktu respons server yang lambat, Anda dapat memindahkan situs WordPress Anda ke Kinsta. Arsitektur Kinsta yang dioptimalkan untuk kinerja dirancang khusus untuk menghadirkan situs Anda secepat mungkin.

Plus, dengan fitur Kinsta's Edge Caching, Anda dapat meng-cache halaman situs Anda ke jaringan global Cloudflare, yang berarti pengunjung dari seluruh dunia akan menikmati waktu respons server secepat kilat (dan akibatnya, waktu LCP secepat kilat).

Jika Anda ingin mempelajari lebih lanjut, Anda dapat melihat halaman ini untuk informasi lebih lanjut tentang hosting WordPress yang dikelola Kinsta atau hosting WooCommerce yang dikelola Kinsta.

Jika Anda ingin seorang profesional membantu Anda dengan beberapa pengoptimalan kinerja LCP khusus, Anda juga dapat menemukan penyedia di Direktori Agensi Kinsta.