Apa Itu AJAX dan Bagaimana Cara Menggunakannya di WordPress (Panduan Langkah-demi-Langkah)

AJAX adalah teknologi populer yang digunakan dalam pengembangan situs web yang memungkinkan Anda mengambil data dari backend dan menyegarkan tampilan tanpa perlu memuat ulang halaman web. Oleh karena itu, ini membantu Anda meningkatkan interaktivitas, kecepatan, dan kegunaan situs web Anda. AJAX berfungsi setiap kali Anda melakukan tindakan seperti meninggalkan komentar atau memposting tweet.

Pada artikel ini, saya akan memberi tahu Anda apa itu AJAX dan bagaimana menggunakan AJAX di WordPress (juga dikenal sebagai WP AJAX). Mari membaca!

Apa itu AJAX?

AJAX adalah singkatan dari Asynchronous JavaScript And XML, sebuah teknologi yang memungkinkan Anda untuk membuat permintaan ke server secara asinkron, dan membuat perubahan pada halaman kami tanpa harus memuat ulang. Skrip AJAX meminta server untuk mengembalikan beberapa data dan kemudian memodifikasi halaman web dengan data yang diperoleh.

Misalnya , bayangkan satu menu tarik-turun tempat Anda memilih tanggal janji temu, dan daftar tarik-turun lainnya secara dinamis menunjukkan jam yang tersedia untuk dipesan. Melalui skrip, server telah ditanyai jam yang tersedia untuk pemilihan drop-down perawatan.

Bagaimana AJAX Bekerja?

Misi AJAX adalah menjadi jembatan antara situs web Anda dan server. Inti dari teknologi asinkron ini adalah objek XMLHttpRequest, yang memungkinkan pertukaran data. Ini adalah langkah-langkah dasar untuk membuat panggilan AJAX:

– Sumber: W3Schools

• Tentukan informasi yang akan dikirim
• Mengatur panggilan
• Gunakan objek XMLHttpRequest untuk mengirim data
• Menerima dan memproses respons dari server

Hal baiknya adalah proses ini dapat disederhanakan menggunakan perpustakaan jQuery.

Bagaimana Cara Menggunakan AJAX di WordPress?

WordPress mendukung AJAX secara asli. Anda dapat melihat "admin-ajax.php" di dalam folder wp-admin.

Awalnya dibuat untuk semua fungsi yang membuat permintaan AJAX dari admin WordPress. Ini juga digunakan untuk bagian publik dari web.

Semua permintaan AJAX WordPress harus melalui skrip PHP. Dengan kata lain, admin-ajax.php harus berupa file PHP tempat tindakan yang mengembalikan konten dipanggil.

Kembali pada tahun 2013, WordPress memperkenalkan WordPress Heartbeat API yang menyediakan beberapa fungsi penting, seperti fitur penyimpanan otomatis, masa berlaku login, dan peringatan penguncian pos saat pengguna lain menulis atau mengedit kiriman WordPress.

Dua fitur yang sangat menonjol dari Heartbeat API adalah:

1. Simpan otomatis

Saat Anda menyimpan draf postingan atau terus mengerjakannya, WordPress secara otomatis menyimpan perubahannya. Ada perbedaan yang jelas antara penyimpanan otomatis dan penyimpanan draf secara manual. Lihat tangkapan layar berikut yang menunjukkan kedua jenis penyimpanan:

– Simpan otomatis di WordPress

2. Kunci Pos

Saat Anda mencoba mengedit postingan yang sedang dikerjakan oleh pengguna lain, peringatan pop-up tentang situasi tersebut akan muncul. Ada tiga tindakan yang terlihat oleh Anda.

– Pasang Kunci di WordPress

Fitur yang disebutkan di atas dimungkinkan karena WordPress Heartbeat API yang membuat koneksi antara server dan browser untuk komunikasi dan respons yang sesuai.

WordPress Heartbeat API menghasilkan permintaan untuk komunikasi dengan server dan memicu peristiwa saat menerima data/respons. Ini biasanya meningkatkan beban di server dan akhirnya memperlambat admin WordPress.

Contoh Langsung

Saya masuk ke dasbor WordPress saya dan mulai menyusun posting. Selanjutnya, saya membiarkan tab terbuka selama beberapa menit dan mulai menjelajahi tab lain. Dasbor masih masuk dan Anda dapat melihat bahwa admin-ajax terus mengirimkan permintaan.

– admin-ajax.php Mengirim Permintaan ke Server

Menurut tiket yang disebutkan di atas, admin-ajax.php di WordPress menghasilkan permintaan setelah setiap 15 detik. Permintaan dapat berupa komunikasi apa pun dengan server.

Bagaimana Plugin Overload admin-ajax.php?

Sebagian besar masalah di admin-ajax.php di WordPress dapat dikaitkan dengan permintaan yang dibuat oleh plugin yang diinstal. Plugin ini membuat admin WordPress lambat dengan mengirimkan permintaan untuk mencapai fungsi tertentu, seperti mengaktifkan pop-up atau memperbarui penghitung berbagi sosial.

Meskipun demikian, permintaan tidak serta merta menaikkan file admin-ajax.php. Jika permintaan ditangani dengan benar, dan pengembang plugin mengikuti praktik terbaik dalam memanfaatkan panggilan AJAX di plugin mereka, file admin-ajax.php akan baik-baik saja. Oleh karena itu, penting juga untuk mendiagnosis plugin apa pun sebelum menonaktifkannya.

Bagaimana Cara Mendiagnosis Plugin di WordPress?

Penting untuk mendiagnosis plugin dengan benar untuk mengidentifikasi dampaknya pada file admin-ajax.php, yang mungkin dapat memperlambat admin WordPress. Untuk melakukannya, kita akan menggunakan dua alat: GTmetrix dan WebPageTest.

Dalam kasus GTmetrix, navigasikan ke tab Waterfall untuk daftar lengkap permintaan. Setelah melihat daftar dengan cermat, Anda dapat melihat permintaan POST yang dibuat oleh file admin-ajax.php.

– Diagnosis Plugin di WordPress

Dalam kasus saya, permintaan ini terutama dibuat oleh plugin berbagi sosial. Plugin khusus ini mengirimkan permintaan ajax ke akun media sosial melalui API setiap 15 detik untuk mengambil jumlah berbagi yang diperbarui.

Luaskan tab untuk informasi mendetail. Tab respons menunjukkan tempat persis yang memicu permintaan ini.

Chrome hadir dengan alat pengembang yang dapat membantu menganalisis permintaan yang dibuat oleh berbagai plugin. Untuk memeriksa ini, buka situs web di Chrome, klik CTRL + Shift + I, dan klik pada tab Jaringan.

– Permintaan admix-ajax.php di Chrome

Muat ulang halaman dan lihat daftar yang diisi dengan permintaan yang diperbarui. Di kotak filter, ketik ajax atau admin-ajax untuk memfilter file yang diperlukan. Ini memberi Anda wawasan tentang jumlah permintaan serta frekuensinya dan sumber permintaannya.

Selanjutnya, klik file tersebut untuk melihat informasi lebih lanjut. Di tab respons, ini memberi Anda beberapa petunjuk tentang plugin yang menyebabkan permintaan ini. Dalam kasus saya, kali ini dipicu oleh plugin WP Popular (WPP), sebuah plugin yang menyoroti posting paling populer selama jangka waktu tertentu.

Untuk menghindarinya, pastikan plugin yang Anda gunakan telah diperbarui. Jika tidak, coba buka tiket dukungan agar pengembangnya dapat memperbaiki masalahnya. Jika memungkinkan, Anda juga dapat menggantinya dengan plugin lain yang diperbarui dan tidak membebani file admin-ajax.php.

Menjalankan diagnosis menyeluruh adalah penting sebelum menyingkirkan plugin apa pun, karena beberapa plugin sangat penting untuk situs WordPress Anda. Alat-alat ini dapat membantu Anda menemukan akar masalah dan memilih solusi terbaik untuk memperbaikinya.

Di bagian selanjutnya, kita akan melihat bagaimana kita dapat mengurangi permintaan ini dan mencegah file admin-ajax.php agar tidak kelebihan beban.

Mempercepat Dasbor WordPress

Untuk mempercepat backend WordPress, praktik terbaik adalah menonaktifkan Heartbeat API, atau setidaknya mengatur interval waktu yang lebih lama agar tidak mengenai server setiap beberapa detik.

Instal Plugin API Detak Jantung

Masuk ke Dasbor Admin WordPress Anda. Arahkan ke Plugin → Tambah Baru → cari Breeze → Instal dan Aktifkan.

– Instal Breeze di WordPress

Konfigurasikan Plugin Breeze

Arahkan ke Settings → Breeze → Heartbeat API. Di sana Anda akan menemukan 4 opsi berbeda untuk mengonfigurasi Detak Jantung.

1. Kontrol Detak Jantung: Anda dapat mengaktifkan atau menonaktifkan API Detak Jantung untuk Backend, Editor Postingan, dan Frontend Anda.
2. Heartbeat Frontend: ini akan memungkinkan Anda untuk mengubah perilaku Front-end Anda atau menonaktifkannya sepenuhnya.
3. Heartbeat Post Editor: ini akan memungkinkan Anda untuk mengubah perilaku WP Post Editor Anda atau menonaktifkannya sepenuhnya.
4. Heartbeat Backend: ini akan memungkinkan Anda untuk mengubah perilaku Backend Anda atau menonaktifkannya sepenuhnya.

– Pengaturan API Detak Jantung di Breeze

Buat Beberapa Aturan

Secara default, Anda mendapatkan frekuensi default WordPress Heartbeat API, tetapi Anda dapat membuat beberapa aturan berdasarkan kebutuhan Anda. Misalnya, Anda mungkin ingin WordPress Backend (Dashboard) terpicu dalam 2 menit (120 detik), tetapi Post Editor terpicu dalam 3 menit (180 detik). Untuk melakukan ini, Anda perlu membuat dua aturan: satu untuk Dashboard WordPress dan yang lainnya untuk Post Editor. Atur frekuensi masing-masing menjadi 2 dan 3 menit.

Deteksi Plugin yang Menggunakan Heartbeat API

Sekarang setelah Anda mengatur semuanya, sekarang saatnya untuk memeriksa plugin mana yang menggunakan file admin-ajax.php dan memperlambat situs web.

Buka GTmetrix dan masukkan URL situs Anda. Ini akan memakan waktu beberapa saat untuk menganalisis situs. Setelah selesai, navigasikan ke tab Waterfall dan Anda akan melihat berapa banyak waktu yang dibutuhkan file untuk terhubung dan merespons. Gulir ke bawah sedikit, dan lihat apakah ada entri untuk POST admin-ajax.php. Jika ya, perluas dan navigasikan ke tab Posting. Dari sini, Anda dapat mengidentifikasi plugin pelakunya.

Dalam kasus saya, plugin "desktop switch" menggunakan file admin-ajax.php dan terus mengirimkan permintaan ke server. Inilah saatnya untuk membuat keputusan; ganti dengan plugin lain atau silangkan jari Anda.

– POST admin-ajax.php

Ringkasan

Mempertimbangkan set fiturnya, Heartbeat API sangat berguna di situs WordPress Anda. Namun, jika tidak digunakan dengan benar, ini dapat meningkatkan waktu buka backend WordPress dan front end dengan mengirimkan permintaan WordPress Ajax ke sana kemari.

Hanya ada dua solusi untuk masalah ini. Anda dapat menonaktifkan Heartbeat API/mengaktifkannya di beberapa lokasi saja – atau – meningkatkan ke hosting terkelola yang dapat menangani beban permintaan dan juga mengurangi waktu respons server.

Pertanyaan yang Sering Diajukan