Cara Meningkatkan First Contentful Paint (FCP) di WordPress

Pengantar First Contentful Paint

First Contentful Paint adalah metrik berguna yang memantau kecepatan pemuatan halaman Anda. Ada berbagai metrik serupa yang mengukur performa situs. FCP secara khusus berfokus pada waktu yang diperlukan untuk konten pertama muncul di halaman. Setelah FCP dihasilkan, pengguna tahu bahwa sisanya sedang dalam perjalanan.

Ini mirip dengan metrik Largest Contentful Paint (LCP) di Data Web Inti Google. Tetapi sementara LCP mengukur berapa lama konten "utama" situs dimuat, FCP hanya berfokus pada konten pertama, yang mungkin atau mungkin bukan konten utama.

Ada banyak faktor yang berkontribusi terhadap skor FCP Anda. File JavaScript dan HTML yang kurang dioptimalkan adalah penyebab umum kinerja lambat, karena banyak sumber daya diperlukan untuk memprosesnya. Selain itu, skrip pemblokiran render dapat memengaruhi skor FCP Anda, karena harus diproses sebelum operasi lain dapat dilakukan.

Skor FCP Anda penting karena merupakan indikator kecepatan situs web Anda secara keseluruhan. Performa tidak hanya penting untuk UX Anda, tetapi juga merupakan faktor yang dipertimbangkan oleh mesin telusur seperti Google saat memutuskan cara menentukan peringkat halaman Anda. Kinerja yang buruk dapat menyebabkan peringkat pencarian yang lebih rendah. Artinya, jika Anda tidak tahu cara meningkatkan First Contentful Paint, hal itu dapat memengaruhi visibilitas situs web Anda.

Cara mengukur First Contentful Paint

Meskipun FCP memberi Anda jendela ke dalam persepsi pengguna, ini masih merupakan metrik yang dapat diukur secara objektif melalui uji lab dan data lapangan. Misalnya, Wawasan PageSpeed ​​adalah alat yang memungkinkan Anda melihat apa yang dialami pengguna sebenarnya ( selama situs Anda memiliki lalu lintas yang cukup untuk disertakan dalam laporan Pengalaman Pengguna Chrome ).

Meskipun situs Anda tidak memiliki cukup data untuk melihat pengalaman pengguna yang sebenarnya, PageSpeed ​​Insights tetap dapat membantu Anda mengumpulkan data FCP dalam uji lab simulasinya.

Untuk menggunakannya, cukup masukkan URL Anda dan dapatkan hasil langsung:

Anda juga dapat beralih antara tampilan seluler dan desktop untuk melihat seberapa responsif situs web Anda di berbagai perangkat.

Alat lain yang berguna untuk mengukur FCP adalah WebPageTest, yang membutuhkan waktu lebih lama tetapi dapat memberikan analisis yang lebih mendalam.

Apa waktu FCP yang baik?

Menurut Chrome, situs Anda memiliki skor FCP yang bagus jika di bawah 1,8 detik. Ketika skor FCP Anda melebihi tiga detik, itu memprihatinkan.

Namun, meskipun situs Anda saat ini memiliki skor FCP yang kuat, selalu ada ruang untuk perbaikan.

Cara meningkatkan First Contentful Paint di WordPress (6 teknik)

Sekarang setelah Anda mengetahui lebih banyak tentang FCP, mari kita lihat cara meningkatkan First Contentful Paint di situs Anda melalui enam metode efektif:

1. Gunakan jaringan pengiriman konten (CDN)
2. Optimalkan dan kompres gambar
3. Hilangkan resource yang memblokir render
4. Kurangi ukuran DOM Anda
5. Tingkatkan waktu respons server
6. Hindari terlalu banyak pengalihan halaman

1. Gunakan jaringan pengiriman konten (CDN)

Jaringan pengiriman konten (CDN) adalah cara mudah untuk meningkatkan waktu pemuatan secara keseluruhan. Tanpa itu, saat pengguna mengunjungi situs web Anda, mereka harus menunggu sementara data yang diperlukan ditransfer antara server utama situs Anda dan lokasi mereka. Hal ini dapat mengakibatkan waktu tunggu yang lebih lama bagi pengguna yang secara geografis jauh dari server penyedia hosting Anda.

Di sisi lain, CDN menawarkan jaringan server yang tersebar di seluruh dunia. Oleh karena itu, konten dapat dikirimkan dari server mana pun yang secara fisik paling dekat dengan setiap pengunjung.

Salah satu contoh CDN yang populer adalah Cloudflare, yang memiliki lebih dari 275 pusat data di seluruh dunia:

Dengan Cloudflare, Anda dapat memanfaatkan teknik pengoptimalan lainnya, seperti pengoptimalan gambar tanpa kerugian.

Biasanya, CDN juga menggunakan caching dan strategi lain untuk meningkatkan FCP. Misalnya, penyedia CDN Anda mungkin menawarkan minifikasi dan kompresi file untuk meringankan situs web Anda. Ini membantu Anda mengurangi latensi, meningkatkan UX, dan meringankan beban di server utama Anda.

2. Optimalkan dan kompres gambar

Gambar jarang menjadi elemen pertama yang dimuat di situs web Anda. Namun, jika Anda menjalankan situs yang sarat media, seperti portofolio atau etalase fotografi, penting untuk mengoptimalkan dan mengompres gambar untuk meningkatkan skor FCP (dan performa keseluruhan).

Salah satu cara untuk mengoptimalkan gambar Anda adalah beralih ke format file yang berbeda. Misalnya, jika saat ini Anda mengandalkan JPG/JPEG atau PNG, Anda dapat berpindah ke format dengan kompresi yang lebih baik, seperti SVG atau WebP.

Anda juga harus mengubah ukuran gambar ke dimensi terkecil yang sesuai dengan kebutuhan Anda dan mengompresnya untuk mengurangi ukurannya.

Meskipun Anda dapat melakukan semua ini secara manual menggunakan alat online, cara yang lebih sederhana bagi pengguna WordPress adalah menggunakan plugin pengoptimalan gambar.

Misalnya, plugin Optimole gratis dapat secara otomatis mengubah ukuran, mengompres, dan mengonversi gambar Anda. Plus, itu juga dapat melayani mereka dari CDN bawaannya, yang membunuh dua burung dengan satu batu.

Alat ini juga memungkinkan Anda mengirimkan gambar berkualitas tinggi dengan kecepatan tinggi, apa pun perangkat yang digunakan pengunjung untuk mengakses situs Anda. Anda dapat menggunakan fitur seperti pemuatan lambat dan pengubahan ukuran gambar untuk lebih menyempurnakan gambar Anda.

3. Hilangkan resource yang memblokir render

Render-blocking resource dapat mencegah konten Anda dimuat dengan cepat, karena browser harus memprosesnya terlebih dahulu – meskipun tidak penting untuk memuat konten awal situs Anda. Akibatnya, mereka dapat memperlambat skor FCP Anda. Ini dapat mencakup kode HTML, lembar gaya CSS, dan file JavaScript.

Jika Anda bertanya-tanya bagaimana cara meningkatkan First Contentful Paint, ada beberapa cara untuk menghilangkan sumber daya yang memblokir perenderan. Jika Anda merasa nyaman dengan pengembangan dan Anda menemukan kode yang tidak digunakan di halaman Anda, Anda dapat melanjutkan dan menghapusnya. Anda juga dapat mengidentifikasi sumber daya penting Anda dan "sebariskan" di dalam halaman Anda menggunakan tag <script> dan <style>.

Selain itu, JavaScript dapat ditunda, sehingga konten Anda tidak tertunda saat menunggu browser memproses file-file ini. Selain itu, Anda dapat membuat CSS Penting untuk menampilkan konten "paro atas" (bagian yang langsung dilihat pengguna). Jika Anda bukan pengembang, alat seperti Jetpack dapat membantu Anda melakukan beberapa perubahan ini.

4. Kurangi ukuran DOM Anda

Saat halaman web dimuat, browser Anda membuat Document Object Model (DOM). Ini adalah representasi dari semua objek yang membentuk halaman Anda.

Jika ada terlalu banyak node DOM (tag HTML) di halaman Anda, atau jika mereka bersarang terlalu dalam, browser akan membutuhkan waktu lebih lama untuk memproses halaman Anda. Ini dapat mengakibatkan kecepatan pemuatan yang lebih lambat dan skor FCP yang buruk.

Oleh karena itu, Anda dapat meningkatkan FCP dengan mengurangi ukuran DOM. Anda dapat melakukan ini secara manual dengan menghapus tag <div> yang tidak perlu, membagi halaman panjang menjadi halaman yang lebih kecil, dan membatasi jumlah posting di arsip atau halaman beranda Anda.

Selain itu, Anda mungkin malas memuat elemen HTML menggunakan plugin pengoptimalan seperti Optimole. Pemuatan malas adalah teknik yang menunda pemuatan konten hingga dibutuhkan. Daripada memproses semuanya sekaligus, browser dapat berfokus untuk mengirimkan elemen yang langsung terlihat.

Memilih tema yang dioptimalkan juga dapat membantu mengurangi ukuran DOM Anda, karena banyak tema (dan pembuat halaman) menggunakan terlalu banyak tag <div>. Jika Anda mencari tema baru, kami sarankan untuk mencoba Neve, yang cepat, ringan, dan hanya menggunakan kode berkualitas.

5. Tingkatkan waktu respons server

Waktu respons server juga disebut sebagai waktu ke byte pertama (TTFB). Metrik ini mengukur waktu yang diperlukan antara saat pengguna membuat permintaan dan saat server mengirimkan byte informasi pertama.

Ada banyak cara untuk meningkatkan waktu respons server Anda (dan sebagai hasilnya, skor FCP Anda).

Pertama, penting untuk memilih penyedia hosting yang berkualitas. Sebaiknya cari host yang khusus melayani situs web WordPress, dan perhatikan lokasi servernya. Idealnya, host Anda harus memiliki server yang dekat dengan audiens utama Anda.

Jika Anda ingin meningkatkan kinerja host Anda, Anda dapat memilih penyedia dari koleksi hosting WordPress tercepat yang didukung data kami.

Namun, jika penyedia hosting Anda tidak menawarkan server yang nyaman, Anda selalu dapat memilih CDN, yang telah kita bicarakan sebelumnya saat membahas cara meningkatkan First Contentful Paint.

Caching adalah cara yang bagus untuk mengurangi waktu respons Anda. Beberapa host menawarkan caching bawaan. Sebagai alternatif, Anda dapat menginstal plugin caching seperti WP Rocket atau WP Fastest Cache.

6. Hindari terlalu banyak pengalihan halaman

Saat Anda mengunjungi halaman yang langsung mengalihkan Anda ke situs lain, browser Anda harus membuat permintaan HTTP lain ke lokasi baru. Ini dapat menghasilkan skor FCP yang buruk, karena menunda pemuatan halaman web Anda.

Semakin banyak pengalihan yang Anda miliki di halaman Anda, kemungkinan skor FCP Anda akan semakin buruk. Plus, terlalu banyak pengalihan halaman dapat sangat mengganggu UX Anda.

Jika masalah terjadi di seluruh situs, Anda mungkin ingin melihat cara mengelola pengalihan dari www ke non-www (atau sebaliknya) dan/atau dari HTTP ke HTTPS.

Misalnya, jika Anda mengalihkan dari http://www.yoursite.com ke http://yoursite.com lalu kembali ke https://yoursite.com , akan lebih efisien jika melakukannya dalam satu langkah.

Jika pengalihan hanya memengaruhi FCP Anda di satu halaman, Anda mungkin ingin melihat pengalihan apa pun yang Anda buat untuk halaman tersebut.

Anda dapat mengelola pengalihan secara manual, meskipun itu bisa memakan waktu. Biasanya lebih baik memilih plugin WordPress seperti Redirection:

Setelah diinstal, Anda dapat menggunakan alat ini untuk mengelola pengalihan dengan mudah dan cepat.

Tingkatkan waktu FCP situs Anda hari ini

Pada situs web yang kompleks atau sarat konten, mungkin sulit mempertahankan waktu pemuatan yang cepat. Untungnya, dengan menargetkan metrik utama seperti First Contentful Paint (FCP), Anda dapat mengevaluasi dan meningkatkan waktu yang dibutuhkan pengunjung untuk melihat konten Anda.

Singkatnya, inilah cara meningkatkan First Contentful Paint di WordPress:

Untuk beberapa cara lain untuk mempercepat situs Anda, lihat koleksi kami tentang berbagai cara untuk mempercepat WordPress.

Apakah Anda memiliki pertanyaan tentang meningkatkan FCP di WordPress? Beri tahu kami di bagian komentar di bawah!