What Is AJAX and How to Use It in WordPress (A Step-by-Step Guide)

AJAX is a popular technology used in website development that allows you to retrieve data from the backend and refresh the view without the need of reloading the web page. Hence, it helps you improve the interactivity, speed, and usability of your website. AJAX is functional every time you perform actions such as leaving a comment or posting a tweet.

In this article, I will tell you what AJAX is and how to use AJAX in WordPress (also known as WP AJAX). Let’s read on!

What Is AJAX?

AJAX stands for Asynchronous JavaScript And XML, a technology that allows you to make requests to the server asynchronously, and make changes to our pages without having to reload them. The AJAX script requests the server to return some data and then modifies the web pages with the data obtained.

For example, imagine one drop-down menu where you select your appointment date, and another drop-down list dynamically shows you the hours available to reserve. Through a script, the server has been asked for the hours available for the selection of the treatment drop-down.

How Does AJAX Work?

AJAX’s mission is to serve as a bridge between your website and the server. The core of this asynchronous technology is the XMLHttpRequest object, which allows data exchange. These are the basic steps to making an AJAX call:

– Source: W3Schools

• Specify the information to send
• Set up the call
• Use the XMLHttpRequest object to send the data
• Receive and process the response from the server

The good thing is that this process can be simplified using the jQuery library.

How to Use AJAX in WordPress?

WordPress supports AJAX natively. You can see “admin-ajax.php” inside the wp-admin folder.

It was initially created for all the functions that make AJAX requests from the WordPress admin. It is also used for the public part of the web.

All WordPress AJAX requests must go through a PHP script. In other words, admin-ajax.php should be the PHP file through which an action that returns content is called.

Back in 2013, WordPress introduced the WordPress Heartbeat API that provided several important functionalities, such as the autosave feature, login-expiration, and post lock warning while another user is writing or editing a WordPress post.

Two very prominent features of the Heartbeat API are:

1. Autosave

When you save a draft of a post or continue working on it, WordPress automatically saves the changes. There is a clear difference between the autosave and manually saving the draft. Check out the following screenshot that shows both types of saves:

– Autosave in WordPress

2. Post Lock

When you try to edit a post that another user is already working on, a pop-up warning about the situation will appear. There are three actions visible to you.

– Post Lock in WordPress

The above-mentioned features are made possible because of the WordPress Heartbeat API that creates a connection between the server and the browser for appropriate communication and responses.

WordPress Heartbeat API generates requests for communication with the server and triggers events on receiving data/response. This usually increases the load on the server and eventually slows down the WordPress admin.

A Live Example

I log into my WordPress dashboard and start drafting a post. Next, I leave the tab open for several minutes and start browsing other tabs. The dashboard is still logged in and you can see that admin-ajax is continuously sending requests.

– admin-ajax.php Sending Requests to Server

According to the ticket mentioned above, admin-ajax.php in WordPress generates requests after every 15 seconds. The request can be any communication with the server.

How Plugins Overload admin-ajax.php?

Most of the problems in the admin-ajax.php in WordPress can be attributed to the requests made by installed plugins. These plugins make the WordPress admin slow by sending requests to attain a certain functionality, such as firing up a pop-up or updating a social sharing counter.

That said, requests won’t necessarily spike up the admin-ajax.php file. If the requests are handled properly, and plugin developers follow the best practices in utilizing the AJAX calls in their plugins, the admin-ajax.php file will be just fine. Hence, it is also important to diagnose any plugin before deactivating it.

How to Diagnose a Plugin in WordPress?

It is important to diagnose the plugin properly in order to identify its impact on the admin-ajax.php file, which can possibly slow down WordPress admin. To do so, we will be using two tools: GTmetrix and WebPageTest.

In the case of GTmetrix, navigate to its Waterfall tab for a complete list of requests. Upon looking at the list closely, you can see the POST requests made by the admin-ajax.php file.

– Plugin Diagnosis in WordPress

In my case, these requests were mainly made by a social sharing plugin. This particular plugin sends an ajax request to social media accounts via API every 15 seconds to fetch an updated sharing count.

Expand the tab for detailed information. The response tab shows the exact spot that triggers these requests.

Chrome comes with developer tools that can help analyze the requests made by various plugins. To check this, open the website in Chrome, click CTRL + Shift + I, and click on the Network tab.

– admix-ajax.php Requests in Chrome

Reload the page and see the list being populated with updated requests. In the filter box, type ajax or admin-ajax to filter the required files. This gives you insight into the number of requests as well as their frequency and the source of the request.

Next, click on the file to see further information. In the response tab, it gives you some hint of the plugin causing this request. In my case, this time it was triggered by the WP Popular plugin (WPP), a plugin that highlights the most popular post over a specific course of time.

To avoid this, make sure that the plugin you are using is updated. If it’s not, try opening a support ticket so its developers can fix the issue. If possible, you may also replace it with another plugin that is updated and does not overload the admin-ajax.php file.

Running a thorough diagnosis is important before getting rid of any plugin, as some plugins are critical for your WordPress site. These tools can help you in finding the root cause and choosing the best possible solution to fix it.

In the next section, we will see how we can reduce these requests and prevent the admin-ajax.php file from getting overloaded.

Speed up WordPress Dashboard

To speed up the WordPress backend, the best practice is to disable the Heartbeat API, or at least set a longer time interval so that it does not hit the server after every few seconds.

Install Heartbeat API Plugin

Log in to your WordPress Admin Dashboard. Navigate to Plugins → Add New → search for Breeze → Install and Activate it.

– Install Breeze in WordPress

Configure Breeze Plugin

Navigate to Settings → Breeze → Heartbeat API. There you will find 4 different options for configuring the Heartbeat.

1. Control Heartbeat: You can toggle the button to turn on or off Heartbeat API for your Backend, Post Editor, and Frontend.
2. Heartbeat Frontend: this will allow you to change the behavior of your Front-end or disable it completely.
3. Heartbeat Post Editor: this will allow you to change the behavior of your WP Post Editor or disable it completely.
4. Heartbeat Backend: this will allow you to change the behavior of your Backend or disable it completely.

– Heartbeat API Settings in Breeze

Create Multiple Rules

By default, you get the default frequency of WordPress Heartbeat API, but you can create multiple rules based on your requirements. For example, you may want WordPress Backend (Dashboard) to be triggered in 2 minutes (120 seconds), but Post Editor to be triggered in 3 minutes (180 seconds). To do this, you need to create two rules: one for the WordPress Dashboard and the other for Post Editor. Set their frequencies to 2 and 3 minutes respectively.

Detect Plugins That Use the Heartbeat API

Now that you have set up everything, it is time to check which plugins are using the admin-ajax.php file and slowing down the website.

Go to GTmetrix and enter the URL of your site. It will take a few moments to analyze the site. Once done, navigate to the Waterfall tab and you will see how much time a file is taking to connect and respond. Scroll down a bit, and see if there is an entry for POST admin-ajax.php. If yes, expand it and navigate to the Post tab. From here, you can identify the culprit plugin.

In my case, the plugin “desktop switch” is using the admin-ajax.php file and is continuously sending requests to the server. This is the time to make a decision; either replace it with another plugin or cross your fingers.

– POST admin-ajax.php

Summary

Considering its feature set, the Heartbeat API is very useful on your WordPress website. However, if not used correctly, it can increase the load time of a WordPress backend and the front end by sending to and fro WordPress Ajax requests.

There are only two solutions to this issue. You can disable the Heartbeat API/enable it in a few locations only – or – upgrade to a managed hosting experience that can handle the requests’ load and reduce server response time.

Frequently Asked Questions

Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways. Where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music.

Get Connected on: Twitter Community Forum