8 Cara yang Dapat Ditindaklanjuti Untuk Meningkatkan FCP Di WordPress

Artikel ini akan membahas beberapa cara mudah untuk meningkatkan FCP atau First Contentful Paint di WordPress. Dengan meningkatkan metrik kinerja ini, situs web WordPress Anda akan memiliki pengalaman pengguna yang lebih baik, mendapatkan peringkat lebih tinggi di Google, dan memuat lebih cepat. Pertama, mari kita bahas apa itu FCP dengan sangat cepat, lalu bahas beberapa cara mudah untuk meningkatkan metrik tersebut di situs WordPress Anda.

Apa itu FCP?

FCP, juga dikenal sebagai First Contentful Paint adalah statistik yang dikumpulkan dari pengguna nyata melalui laporan pengalaman pengguna Chrome. Ini adalah salah satu ukuran yang lebih realistis dari pengalaman pengguna dunia nyata. Ini dirancang untuk mengukur bagaimana pengunjung individu dan pengguna memandang kinerja situs web. Ini juga salah satu yang pertama dari banyak statistik kecepatan yang akan mulai digunakan Google dalam kampanye kesenangan situs web mereka, yang bertujuan untuk membuat pengalaman pengguna bagi konsumen menjadi lebih baik di semua situs web.

First Contentful Paint adalah contoh pertama dari rendering konten visual untuk pengguna akhir. Dalam contoh ini, FCP terjadi di bingkai kedua, dan ini adalah elemen konten pertama yang telah dirender untuk pengguna. Memiliki FCP yang lebih cepat memastikan bahwa pengguna akan tetap berada di situs web Anda sampai semua konten dimuat, karena waktu yang dirasakan untuk memuat konten ini jauh lebih cepat.

Seperti yang kami nyatakan dalam artikel lengkap kami tentang apa itu FCP dan LCP, Anda harus memahami bahwa perubahan ini didasarkan pada situs web dan halaman tertentu. Jadi FCP Anda bisa menjadi satu hal di satu halaman dan hal lain di halaman lain. Ini menambah sedikit kerumitan pada proses pengoptimalan, tetapi selama Anda memahami apa itu FCP dan mengikuti metode yang dibahas dalam artikel ini, Anda akan baik-baik saja.

Perlu diingat, bahwa Google akan mulai menggunakan metrik ini sebagai indikator peringkat yang serius pada Maret 2021, jadi cari tahu First Contentful Paint Anda sebelum titik itu demi kepentingan terbaik Anda.

Menguji Dan Memahami Cat Contentful Pertama

Memahami dan menguji metrik First Contentful Paint Anda sangat mudah. Yang perlu Anda gunakan hanyalah alat kecepatan halaman Google. Cukup masukkan URL Anda, dan salah satu metrik pertama akan memberi tahu Anda dalam hitungan detik, seberapa cepat situs web Anda dimuat.

Situs web yang memuat dalam waktu kurang dari satu detik sehubungan dengan FCP diklasifikasikan sebagai cepat, situs web yang memuat dalam waktu kurang dari 3 detik FCP dikenal sebagai sedang, dan situs web yang memiliki First Contentful Paint selama tiga detik atau lebih dikenal sebagai lambat. Seperti yang Anda lihat, tidak ada banyak waktu luang di sini, dan Anda pasti membutuhkan FCP yang jauh lebih cepat dari 3 detik untuk mendapatkan peringkat yang baik di Google.

Kabar baiknya adalah bahwa meningkatkan First Contentful Paint Anda di WordPress memiliki beberapa metode yang dapat ditindaklanjuti yang akan membuat peningkatan langsung dan langgeng. Sebagian besar solusi ini melibatkan plugin yang akan mengotomatiskan proses pengoptimalan untuk Anda, membuat pengoptimalan FCP di WordPress menjadi jauh lebih mudah.

Jadi, dengan tidak adanya pengenalan FCP, mari kita pahami bagaimana kami dapat meningkatkan metrik ini. Bahkan jika Anda memiliki FCP yang bagus, meningkatkannya bahkan dalam hitungan milidetik dapat meningkatkan pengalaman pengguna Anda dan secara langsung menghasilkan peningkatan konversi dan rasio pentalan yang lebih rendah di situs WordPress Anda.

Fokus Pada Waktu Untuk Byte Pertama

Hal pertama dan paling dapat ditindaklanjuti yang dapat Anda lakukan untuk mengurangi waktu FCP Anda dan meningkatkan skor ini adalah dengan fokus pada Time To First Byte Anda. Banyak situs web memiliki TTFB yang sangat lambat, atau waktu yang dibutuhkan oleh browser untuk menerima gigitan pertama konten halaman web. TTFB adalah penjumlahan dari waktu yang diperlukan untuk mendapatkan permintaan HTTP, memproses permintaan itu, dan waktu respons dari permintaan HTTP itu sendiri.

Dalam istilah awam, jika situs web Anda membutuhkan waktu lebih lama dari rata-rata untuk terhubung ke server, maka rendering dan pengunduhan konten akan lebih lambat untuk pengguna akhir, menghasilkan FCP yang lebih lambat.

FCP adalah metrik pertama yang muncul, sehingga hampir terkait langsung dengan TTFB. Dua cara utama untuk meningkatkan Time To First Byte di situs WordPress, secara langsung meningkatkan skor First Contentful Paint Anda adalah dengan memilih host WordPress yang cepat, dan menggunakan CDN yang berkualitas.

Jika Anda memiliki host WordPress yang cepat, data dikirim ke browser pengunjung jauh lebih cepat dari biasanya, meningkatkan TTFB. Jika Anda memiliki pengguna yang memuat situs web dari lokasi yang jauh secara geografis sehubungan dengan lokasi server, menggunakan CDN yang memiliki simpul individu yang secara fisik lebih dekat dengan pengguna akhir akan secara serius meningkatkan TFB Anda dan mengarah ke yang jauh lebih baik. Skor Cat yang Memuaskan.

Saat merekomendasikan host WordPress dan CDN yang bagus, kami selalu mengatakan bahwa ini harus menjadi solusi terintegrasi. Anda tidak harus mencari CDN individu dan host WordPress individu, sebaliknya Anda harus mencari host WordPress yang sangat cepat yang menggabungkan CDN dalam layanan mereka. Ini tidak hanya akan menghemat uang Anda, tetapi juga akan jauh lebih kompleks dan karena integrasi mungkin lebih cepat.

Jadi, hal pertama yang dapat Anda lakukan untuk meningkatkan FCP Anda adalah melihat host yang baik. Host terbaik yang memiliki CDN terintegrasi (Cloudflare enterprise, yang mencakup pengoptimalan platform otomatis) adalah Rocket.net.

Ini adalah host WordPress yang kami gunakan untuk melayani blog kami ke hampir 100.000 pengunjung per bulan, dan karena integrasinya dengan CDN premium dan perangkat keras secepat kilat, serta cache halaman penuh, TTFB sangat rendah, artinya FCP kami tidak dibatasi.

Hilangkan Sumber Daya Pemblokiran Render

Hal berikutnya yang dapat ditindaklanjuti yang dapat Anda lakukan untuk meminimalkan waktu FCP Anda adalah menghilangkan sumber daya pemblokiran render. Sumber daya pemblokiran render adalah elemen situs web, biasanya CSS dan JavaScript, yang dipanggil selama proses rendering Halaman Web Anda.

Karena ini memblokir proses rendering, browser harus menunggu untuk benar-benar menampilkan elemen DOM kepada pengunjung, mengunduh sumber daya pemblokiran render, menguraikannya, lalu melanjutkan rendering seluruh halaman.

Jika Anda berasumsi bahwa pemblokiran rendering ini juga memblokir elemen First Contentful, ini akan benar. Dan semakin lama sumber daya ini memblokir proses rendering, semakin lama waktu yang dibutuhkan untuk merender elemen First Contentful, yang mengarah ke skor waktu FCP yang lebih tinggi.

Cara terbaik untuk menghilangkan sumber pemblokiran render adalah dengan menggunakan plugin pihak ketiga yang disebut Pembersihan Aset untuk menunda dan memuat JavaScript dan CSS secara asinkron. Anda bahkan dapat menonaktifkan berbagai skrip di halaman web yang tidak digunakan, meminimalkan CSS yang tidak digunakan, yang merupakan sesuatu yang akan kita bicarakan nanti di artikel ini.

CSS Kritis Sebaris

Selain itu, inlining CSS penting memungkinkan Anda untuk menunda pemuatan stylesheet CSS utama Anda hingga akhir proses rendering. Ini dapat dilakukan dengan pembersihan aset, tetapi kami juga menyarankan untuk menggabungkan WP Rocket yang merupakan plugin caching dan pengoptimalan. Ini memiliki generator CSS kritis otomatis, dan berfungsi sangat baik dalam hal menghapus sumber daya pemblokiran render.

Menghilangkan CSS yang Tidak Digunakan

Selanjutnya, seperti yang kami singgung akan menghilangkan CSS yang tidak digunakan. Jika Anda memuat gaya yang tidak digunakan pada halaman web, ini dapat menjadi pemblokiran render, tetapi hanya membuat halaman Anda lebih berat, menghasilkan lebih banyak data yang ditransfer, menghasilkan FCP yang lebih lambat.

Menyingkirkan stylesheet CSS yang tidak digunakan ini adalah cara yang bagus untuk meminimalkan jumlah data yang ditransfer, membuka jalan bagi elemen First Contentful yang penting untuk dilukis di situs Anda. Ini secara langsung berdampak pada skor FC dengan cara yang menguntungkan.

Untuk melakukan ini, tidak ada perangkat lunak otomatis, tetapi ada plugin yang membantu Anda menghapus CSS dari setiap halaman dan rentang halaman. Itu adalah Pembersihan Aset, seperti yang kami sebutkan di atas, dan ini memungkinkan Anda untuk mengaktifkan dan menonaktifkan gaya dan skrip.

Anda kemudian dapat menguji bagian depan situs web Anda untuk melihat apakah ada yang rusak, dan jika tidak, Anda telah menghapus CSS yang tidak digunakan, menghasilkan situs web yang memuat lebih cepat, dan skor FCP yang lebih baik.

Hapus Elemen Skrip Di Atas Paro (Seperti Iklan JS)

Dalam hal susunan sebenarnya dari situs web Anda, menghapus elemen berbasis skrip yang berada di paro atas adalah cara yang pasti untuk meningkatkan Cat Konten Pertama Anda dari situs web WordPress. JavaScript dapat dioptimalkan sebanyak mungkin, tetapi karena susunannya, itu akan selalu lebih lambat untuk dirender daripada HTML lurus dan CSS kritis sebaris.

Jadi, jika Anda memiliki JavaScript yang akan dianggap sebagai First Contentful Paint dari halaman web (pada dasarnya apa pun yang terletak di paro atas, atau di viewport awal yang memuat pengunjung), Anda pasti ingin membuangnya dan menggantinya dengan HTML murni.

Ini biasanya merupakan masalah pada situs web konten yang menggunakan iklan berbasis JavaScript yang dimuat di paro atas. Skrip ini juga dapat memiliki dampak negatif yang besar pada perubahan tata letak kumulatif Anda.

Dengan menggantinya dengan HTML yang memuat lebih cepat, Anda akan secara serius meningkatkan First Contentful Paint, hanya karena sifat dari teknologi HTML dan CSS.

Nonaktifkan Lazy Load Above The Fold (gila, saya tahu)

Melanjutkan pembersihan elemen berbasis JavaScript ini, jika Anda malas memuat gambar apa pun yang ditampilkan di paro atas, Anda sebaiknya menonaktifkan fitur ini.

Memuat gambar yang lambat adalah cara yang bagus untuk meningkatkan kinerja situs web WordPress Anda, tetapi sebenarnya memiliki dampak negatif pada First Contentful Paint, karena mereka menggunakan pustaka JavaScript untuk mengaktifkan fungsi itu.

Jadi, nonaktifkan pemuatan lambat gambar yang dimuat di paro atas, tetapi pastikan gambar tersebut dioptimalkan dengan benar. Ini termasuk mengonversinya ke format WebP (gunakan ShortPixel), serta mengompresi sepenuhnya menjadi sekecil mungkin sambil mempertahankan kejelasan.

Gambar Sebaris (SVG atau Base64)

Jika Anda ingin menjadi lebih gila lagi dengan pengoptimalan gambar Anda, untuk gambar yang lebih kecil yang tidak memiliki persyaratan resolusi utama, Anda dapat melanjutkan dan menyelaraskannya. Ini bagus jika Anda memiliki logo tertentu atau gambar yang lebih kecil yang dimuat di paro atas. Dengan mengonversinya ke format SVG atau base 64, Anda menyejajarkan gambar, mengurangi permintaan HTTP tambahan untuk mengunduhnya, meningkatkan FCP Anda.

Ingatlah, saran ini mungkin hanya berguna untuk kasus penggunaan tertentu, dan jika Anda memiliki server berbasis HTTP2, atau gambar yang sangat berat yang Anda coba antrekan, sebaiknya tetap apa adanya.

Namun, menggunakan logo SVG dan basis 64, ikon pencarian, ikon media sosial, dan latar belakang, dapat bermanfaat untuk First Contentful Paint Anda, meningkatkan skor situs WordPress Anda di Google, dan menguntungkan peringkat dan pengalaman pengguna Anda.

Fokus pada Ukuran DOM

Hal utama terakhir yang dapat Anda lakukan adalah fokus pada ukuran DOM Anda. DOM , atau model objek dokumen adalah struktur seperti pohon yang pada dasarnya merujuk ke setiap elemen di laman Anda.

Jadi, setiap div di dalam body, span wrapper, paragraf, header, metalink, dan lainnya akan dianggap sebagai elemen DOM. Semakin banyak elemen pada halaman, semakin besar waktu render, dan semakin lambat First Contentful Paint Anda.

Jadi, dengan mengurangi jumlah elemen DOM, Anda akan memiliki situs web yang memuat lebih cepat. Ini dapat dilakukan dengan sepenuhnya membangun kembali halaman yang se-ramping mungkin dengan elemen apa pun yang ditempatkan di dalamnya, atau dengan menggunakan tema atau pembuat halaman baru.

Misalnya, Elementor membungkus elemennya dalam lusinan div yang tidak perlu, jadi beralih ke pembuat halaman dengan kode yang lebih rendah, dapat meminimalkan jumlah elemen DOM pada halaman, yang menyebabkan lebih sedikit transfer data, yang mengarah ke waktu render yang lebih cepat, yang mengarah ke skor First Contentful Paint yang lebih baik di Google.

Kesimpulan

Karena First Contentful Paint berasal dari pengalaman pengguna dunia nyata di situs web WordPress Anda, Anda tidak dapat meluncur dengan aset berperforma buruk. Sebagai gantinya, Anda harus mengatasi skor cat pertama dan menangani langsung, menggabungkan enam metode ini ke dalam pengoptimalan Anda, menghasilkan pengalaman pengguna yang lebih baik, peningkatan penempatan peringkat, dan rasio pentalan yang lebih rendah.

Ada banyak metode lain yang dapat Anda gunakan untuk meningkatkan kinerja keseluruhan situs web WordPress, yang juga akan bermanfaat untuk First Contentful Paint Anda, tetapi enam metode ini adalah cara terbaik untuk meningkatkan cat candi pertama Anda di situs web WordPress. Jika Anda memiliki rekomendasi pengoptimalan tambahan, silakan tinggalkan di bagian komentar di bawah.