Cara Mempercepat Situs Web Direktori atau Marketplace yang Dibangun dengan HivePress

Saat ini, kecepatan memuat situs web dan kinerja keseluruhan sangat penting untuk pengalaman pengguna yang baik dan peringkat mesin pencari. Baru-baru ini Google mengumumkan bahwa mereka akan mulai mengukur Core Web Vitals, seperti skor stabilitas visual dan waktu pemuatan halaman, untuk situs web guna menentukan apakah mereka akan memenuhi syarat untuk peningkatan sinyal peringkat. Selain itu, halaman dengan waktu buka yang lebih lama cenderung memiliki rasio pentalan yang lebih tinggi dan waktu rata-rata yang lebih rendah di halaman.

Dalam tutorial ini, kami akan menjelaskan cara meroketkan kinerja situs web Anda dengan menyiapkan caching, mengoptimalkan gaya dan skrip, serta mengoptimalkan konten media. Kami akan menggunakan plugin LiteSpeed ​​Cache, solusi akselerasi situs web lengkap dengan banyak alat dan fitur untuk membuat situs web Anda sangat cepat.

Untuk tujuan pengujian, kami akan menggunakan situs web direktori WordPress yang dibuat dengan HivePress dan beberapa ekstensi bersama dengan tema ListingHive default. Namun, jika situs web Anda tidak dibuat dengan plugin HivePress, Anda dapat mengikuti langkah yang sama untuk situs web lain yang didukung WordPress.

Jadi, mari kita mulai dengan instalasi LiteSpeed ​​Cache.

Memasang Cache LiteSpeed

Pertama-tama, Anda perlu menginstal plugin LiteSpeed ​​Cache. Anda dapat dengan mudah melakukannya langsung dari dasbor WordPress Anda dengan membuka bagian Plugins > Add New . Temukan melalui bilah pencarian dan lanjutkan dengan menginstalnya. Ketika instalasi selesai, cukup klik tombol "Aktifkan" untuk mengaktifkan plugin.

Setelah diinstal dan diaktifkan, Anda dapat mulai mengoptimalkan situs web Anda. Mari kita melalui pengaturan cache dasar terlebih dahulu.

Optimasi Tembolok

Untuk menyesuaikan pengaturan cache dasar, navigasikan ke halaman LiteSpeed ​​Cache > Cache . Ada banyak bagian berbeda dalam halaman ini, tetapi kita hanya akan membahas pengaturan yang paling penting.

Pengaturan Tembolok

Di sini, kami sangat menyarankan untuk menonaktifkan cache untuk pengguna yang masuk dan permintaan REST API. Ini diperlukan agar plugin HivePress berfungsi dengan baik. Setelah Anda mengaktifkan atau menonaktifkan opsi apa pun, jangan lupa untuk menyimpan perubahan.

Cache Objek

Selanjutnya, mari aktifkan Object Cache . Arahkan ke bagian Object dan periksa apakah cache objek tersedia di situs Anda. Tes koneksi harus ditampilkan sebagai "lulus." Jika demikian, Anda dapat mengaktifkan cache objek, dan ini akan secara drastis meningkatkan kinerja situs web dengan menyimpan kueri database duplikat dalam cache.

Seharusnya tidak ada masalah untuk lulus uji koneksi jika situs web Anda didasarkan pada server OpenLiteSpeed ​​atau penyedia hosting Anda mendukung caching objek.

Tembolok Peramban

Terakhir, navigasikan ke bagian Cache Browser dan pastikan itu diaktifkan. Ini akan men-cache semua konten statis seperti gaya, skrip, dan gambar di browser pengguna.

Optimasi Halaman

Langkah Anda selanjutnya adalah menavigasi ke bagian LiteSpeed ​​Cache > Page Optimization untuk mengoptimalkan gaya, skrip, dan font.

Optimasi CSS

Mari kita mulai dengan bagian Pengaturan CSS . Di sini kami sarankan untuk mengaktifkan pengaturan CSS Minify dan CSS Combine .

• CSS Minify – Jika Anda mengaktifkan opsi ini, semua karakter spasi ekstra, karakter baris baru, dan data lain yang tidak perlu atau berlebihan akan dihapus secara otomatis dari file CSS tanpa memengaruhi gaya situs web.
• CSS Combine – Dengan mengaktifkan yang satu ini, semua file CSS individual akan digabungkan menjadi satu file CSS. Dengan cara ini, browser mengirimkan satu permintaan file alih-alih meminta setiap file CSS secara terpisah, sehingga mengurangi jumlah permintaan HTTP.

Optimasi Font

Jika situs Anda menggunakan Google Font, ada beberapa opsi untuk mengoptimalkan pemuatan font. Di bagian Pengaturan CSS yang sama, Anda dapat menggulir ke bawah dan mengatur opsi Optimalisasi Tampilan Font ke Swap sehingga font cadangan akan digunakan untuk menampilkan teks hingga font kustom diunduh sepenuhnya.

Setelah Anda mengatur opsi Swap , buka bagian Optimasi di halaman yang sama dan aktifkan opsi Load Google Fonts Asynchronously untuk memuat Google Fonts di latar belakang saat halaman sedang dirender.

Optimasi JS

Sekarang mari kita pergi ke bagian Pengaturan JS untuk mengoptimalkan file JavaScript. Di sini kami menyarankan untuk mengikuti langkah-langkah yang sama seperti untuk pengaturan CSS. Cukup aktifkan opsi JS Minify dan JS Combine sehingga file JS juga akan diperkecil dan digabungkan menjadi satu file.

Ada juga opsi Muat JS Ditangguhkan yang benar-benar dapat membuat perbedaan. Setelah Anda mengaktifkan setelan ini, skrip akan dimuat di latar belakang saat browser merender tata letak dan gaya halaman. Skrip seringkali “lebih berat” daripada HTML, sehingga pemuatan dan eksekusi skrip yang tidak diperlukan untuk perenderan halaman awal dapat ditunda dan dimuat kemudian. Ini memungkinkan pengunjung untuk menggunakan situs web segera.

Setelah Anda mencentang opsi ini, pastikan front-end situs web tidak rusak karena beberapa skrip mungkin memerlukan pemuatan sebelum halaman dirender.

Optimasi Media

Terakhir, Anda perlu mengoptimalkan konten media Anda. Karena gambar sering kali mencakup sekitar setengah dari ukuran konten halaman web, mengonversi semua gambar ke format WebP (yang rata-rata 30% lebih kecil dari format lain) dapat meningkatkan kecepatan pemuatan halaman Anda secara signifikan.

Di bagian LiteSpeed ​​Cache > Image Optimization > Settings , Anda dapat mengonversi gambar situs web Anda ke format WebP dengan mengaktifkan pengaturan Create WebP Versions dan Image WebP Replacement .

Setelah Anda memeriksa opsi ini, navigasikan ke bagian Ringkasan Pengoptimalan Gambar untuk mendapatkan kunci domain dan optimalkan gambar dengan mengklik tombol “Kirim Permintaan Pengoptimalan” hingga skor pengoptimalan gambar mencapai 100%.

Juga, jika ada penyematan di situs web Anda (misalnya, video YouTube, kiriman Instagram, atau Tweet), lebih baik memuat konten yang disematkan hanya saat pengguna menggulir ke bawah, bukan selama rendering halaman awal. Ini akan membuat halaman pertama dirender lebih cepat dan mengurangi penggunaan memori browser.

Arahkan ke bagian LiteSpeed ​​Cache > Page Optimization > Media Settings dan aktifkan opsi Lazy Load Iframes .

Membungkus

Di bawah ini adalah tangkapan layar hasil Google PageSpeed ​​di perangkat seluler dan desktop setelah kami mengoptimalkan kinerja situs web dengan mengikuti langkah-langkah dalam tutorial ini.

Itu dia! Jika Anda membuat direktori atau situs web marketplace dengan HivePress (atau solusi berbasis WordPress lainnya) , Anda dapat mengikuti langkah yang sama untuk menyiapkan caching, mengoptimalkan gaya, skrip dan font, serta konten media seperti gambar atau sematan. Akibatnya, Anda akan mendapatkan skor tinggi di Google PageSpeed ​​(sehingga meningkatkan peringkat SEO Anda) dan meningkatkan pengalaman pengguna situs web Anda secara keseluruhan.

Selain itu, jangan ragu untuk memeriksa artikel berikut:

• Plugin direktori WordPress terbaik
• Tema direktori WordPress populer
• Kesalahan saat membuat situs web daftar WordPress