Ajax Load for WordPress

Intro:

You might have also been interested in seeing new web technologies, such as React.js or Angular.js! In fact, it seems like magic is happening behind the scenes and all links are loading at an incredible speed and with a modern system unlike the classic and old web system. If you don’t know what technology we are talking about, you can get some clues by viewing the following link:

https://angular.io

But what if we could bring such technology to our WordPress site?! It’s a very interesting topic, but when it comes to web development, even the WordPress CMS system doesn’t work!

What is AjaxLoader?!

In fact, in normal mode, every time you click on a link, a GET request is sent from your browser to the destination site’s server (the site you are currently on!). After your request is processed by the server, a response in the form of an HTML document is sent to your browser, and your browser page is usually refreshed, or in simpler terms, refreshed.

Today, more modern systems are designed to load a website, which, unlike in the past, do not send requests in the usual way and use Ajax technology, In simpler terms, your browser page finds and displays other content to you without refreshing. Even if this system does not make a difference in the loading speed of your pages, it still gives your site users a better feeling in terms of user experience (UX), and even in 80% of the time, the user feels that the loading speed of links has increased!!

Why is AJAX loading important today?

With the increasing spread of new technologies such as React and Angular, which we mentioned above, this preconception has formed among users, and in a way, their minds and eyes have become accustomed to pages and links loading using Ajax, And when they enter a site with a classic and regular loading system (like most WordPress sites),

the experience may be a bit old-fashioned and even annoying for them, making your website’s image and brand look a bit old and outdated, which is not good for your business at all.

If we want to give you a famous and successful example, we can mention the famous Vercel site (https://vercel.com/), which recently used React + Next + Node.js technologies in their site development and made the page loading system of their store website much more up-to-date, modern, and faster.

How to add ajax load to a WordPress Site?!

There are 4 ways to add such a system to your site:

• Change the entire site and its management system (CMS) from WordPress to more modern technologies such as React and Next

• Use the frontity framework for WordPress development (a combination of WordPress + React)

• Design your front-end Exclusively and use wordpress as Headless CMS

• Use the Ajax-Loader plugin (free)

Items 1 and 2 and 3 may not be good suggestions for 85% of dear WordPress users and business owners due to their high complexity and high costs, but the forth item (using a free plugin), which is a free, lightweight, and simple plugin in the WordPress repository, can be a logical, simple, and always available option!

Introducing the Ajax-Loader plugin

The Ajax Loader plugin is a free, extremely lightweight and compact plugin that you can download from the following link:

https://wordpress.org/plugins/ajax-loader-cache/

To download this incredibly useful plugin from your WordPress site’s repository, search for ajax loader: (as shown in the image below)

Unlike other plugins, this plugin does not have a heavy system or strange coding! And by just adding a very small, fully compressed and optimized JavaScript file, it can load all the internal links of your WordPress site in a completely modern and Ajax way. It can be said that after using this free plugin, your site will become more than 80% modern and up-to-date.

Ajax Loader plugin features:

• Has a dedicated settings page + many settings

• Has loading graphic effects

• Ability to add a dedicated loading effect

• Fully compatible with WordPress cache plugins such as Wp-Rocket

• Lightweight and optimized

• Compatible with WordPress themes

• Compatible with WooCommerce store builder

• + Internal browser cache system

1- Modern and practical settings

Having a settings page for WordPress users, especially for free plugins, can be a blessing! With a dedicated settings page and a wide range of settings, this plugin can work on your site without any problems.

In fact, you can determine which links on your site will be loaded this way and which links will be loaded normally and non-AJAX. You can have a flawless system by excluding links on your site with the very advanced rules and settings of this plugin.

The many settings of this plugin can surprise you, and you can easily use it to design a stylish and modern site even with WordPress and deliver it to the client! Explaining all the settings of this plugin may make this article a bit boring and tedious, so we suggest that you install and use the plugin as soon as possible to familiarize yourself with and view other settings of this free product.

2- Has loading graphic effects

In the latest update of this plugin, you can enjoy 8 beautiful and modern loading effects for your website.

All the ready-made loading effects are as follows:

• Simple

• Glass

• Fantasy

• Dark

• Sepia (warm)

• Black and white

• Dark glass

• X-ray

• None

Each of these effects can be useful and beautiful for a type of site, so use them carefully and sensitively!

3- Ability to add custom load effects

With the help of the complete and practical settings of the Ajax Loader plugin, you can easily define your own custom loading effect CSS class for the plugin. You only need to know a little CSS to be able to use your own custom loading effects.

It goes without saying that the time a user is loading your site pages can be the best time to build your brand and imprint your business slogan in the user’s mind! For this reason, we suggest providing and designing a loading effect using your business slogan for the viewer and user.

4- Fully compatible with WordPress cache plugins

The fact that this plugin has no incompatibility with WordPress cache plugins can be a trump card for you, because despite the slowness of the WordPress system, especially WordPress/WooCommerce store sites, you should definitely use WordPress cache plugins to increase the speed of your site. The Ajax Loader plugin has been tested with all the leading WordPress cache plugins and has not had any problems, so use it with confidence.

5- Internal browser cache system

The built-in caching system of this plugin can be a challenging feature, especially if you are not an experienced web designer and are somewhat new to this field!

This system intelligently stores all pages viewed by the user in the user’s browser’s local storage and displays the pages to the user at incredible speed the next time! In fact, using this modern system reduces the user’s connection to your server to %0!

The internal cache system of this plugin is not incompatible with server-side cache systems such as Rocket or Varnish Cache and continues to work well and in harmony, but if you have a very dynamic website with a lot of dynamic content (your site’s content is constantly changing), we do not recommend using this option at all.

Static and cached files in your site users’ browsers will be permanently deleted after a certain period of time and are a type of temporary file, and of course this period can be adjusted by you:

You can choose the following time periods for automatic expiration of cached files in users’ browsers:

• After 30 minutes

• After 1 hour (the most logical case)

• 2 hours

• 3 hours

• 6 hours

• 10 hours

• 12 hours

• 24 hours (a full day!)

• After 48 hours (2 full days!!)

In addition to the above, this plugin also has another mode called Session Mode. In this mode, cached files in the user’s browser will be permanently deleted when the user’s browser is closed. Using this mode can also be useful in some cases.

Using long lifetimes with long durations such as (24 hours) is not recommended by us at all and may result in a poor user experience for your site, especially if your site is an e-commerce website.

Note: If you have pages like the user panel page or the shopping cart page that have completely dynamic content, you can simply exclude that page from the browser cache process by entering the address:

6- Incompatibilities

This plugin had no incompatibilities with other plugins in 85% of cases, but in another 15% of cases, incompatibilities were observed related to the non-standard way some plugins coded their JavaScript files.

If a JavaScript global variable is defined as const or let in one of your site’s JS files (which is a serious mistake in JS coding), it can interfere with the operation of this plugin and the Page Fetcher system, leading to the Ajax Loader plugin not working properly and errors in the users’ browser console.

If you have encountered such a problem, you should first contact the developer of that plugin and explain the problem. If the problem is not resolved, you can manually edit the JS code of that plugin or decide to use a plugin with standard coding

7- Developers

If you are a developer who wants to use the built-in Ajax Loader functions, you can check out the plugin documentation via the link below:

https://ajaxloader.mdezign.ir/dev-guids/

The Pro Version!

This plugin also has a Pro version which is not free and you must use it with an active license. In the Pro version, you will have the following practical and professional features:

— Public

Allows the script to access the Java-Script Fetch-API, which is the most modern and efficient way to fetch and load pages via Ajax (instead of the deprecated XHR method)

— Graphics

Allows you to use the Dash-Loader effect with additional settings that will improve your site’s UI/UX score to a high level!
Allows you to use the Modern Loading Effect (Professional for Branding) that allows you to show your logo/brand + business tagline to users or customers when pages load.

— Advanced

Adds a very powerful lazy loading system that works perfectly on images, audio, video tags (any html tag with src attribute) and increases the speed of your entire site!
Allows you to exclude some pages (along with the URL) from the ajax loading process

Adds a “Clean URLs” option, which intelligently removes all extra characters including # from the address bar of users’ browsers on your site (makes the URL cleaner and prevents conflicts and bugs with ajax-loader)

— Developers

Allows you to run your custom js code before and after page load. Comes with examples and documentation

— Help & Support

Life time advanced support + solve issues and bugs on your site

— Support Us

Dear User: Please note that purchasing and using the Pro version of this plugin is a significant support from you, our dear users, and has a significant impact on the development and future of this free plugin!

Final word:

Using such a system for WordPress can have amazing results in improving your site’s user experience and, at the lowest possible cost, you can have a loading system similar to modern web technologies such as React and Angular.

Using such a system for WordPress can have amazing results in improving your site’s user experience and, at the lowest possible cost, you can have a loading system similar to modern web technologies such as React and Angular.