Boost Site Speed with PJAX: Combine pushState and Ajax for Faster Navigation

21CTO Community Introduction: This article introduces the enhanced version of Ajax called PJAX, focusing on the new features of the HTML5 History API—history.pushState and history.replaceState—and shows how they are combined with AJAX.

Slow‑loading websites frustrate users; a loading delay of more than four seconds often leads to abandonment. Improving load time, especially on mobile, is crucial for user satisfaction and business revenue.

What is PJAX?

PJAX merges two concepts: Ajax (asynchronous JavaScript and XML) and the HTML5 History API’s pushState method. Ajax enables asynchronous communication with the server using XMLHttpRequest, allowing page content to be updated without a full refresh. pushState lets developers modify the browser’s URL and history without reloading the page.

How pushState Works

pushState changes the current URL to a new address and can manipulate the browser’s history stack, so the back button navigates to the previous URL even though the page content was loaded via Ajax.

PJAX Mechanism

PJAX fetches HTML from the server via Ajax, replaces the content of a specified container element, and then updates the URL using pushState. This approach speeds up page loads because:

JavaScript and CSS resources are not re‑executed or re‑loaded.

The server renders only the partial page content, avoiding the overhead of a full page layout.

Installation

Install PJAX using the standalone JavaScript module: $npm install pjax Or via Bower:

$bower install pjax

Typical Example

The project includes main.html as the homepage, common.html as a shared layout, and a JavaScript file that initializes PJAX. The images below illustrate these files:

The JavaScript initializes a PJAX instance, specifying the elements to be handled (e.g., anchor tags with a specific class) and the selectors of containers to replace. Both HTML pages must share the same layout and DOM structure; otherwise PJAX falls back to a normal page load.

Running the Server

Start the server (for example, with npm): npm run <scriptname> When the site is opened, clicking the first link updates the target div and the URL without a full page refresh. Clicking the second link triggers a JavaScript dialog, demonstrating that PJAX does not re‑execute existing scripts or reload CSS, thereby saving considerable loading time.

Resources

GitHub repository for the tutorial code: https://github.com/akshanshjain95/pjax-tutorial

PJAX library: https://github.com/MoOx/pjax

Additional references:

https://github.com/MoOx/pjax

https://www.npmjs.com/package/pjax

https://www.pixelstech.net/article/1366737736-What-is-pjax-and-why-we-should-use-it