Home Tutorials What is ajax preloading?

What is ajax preloading?

Available on: Newsmag V2.2+, Newspaper V6.4+

Ajax preloading is a technique use by our themes to make the user experience of sites that use the ajax filters on our blocks better. When active the theme will preload content for the ajax filters before the user clicks on them at the initial page load. Used responsively and paired with a full page caching plugin it can save a lot of requests done to admin-ajax.php.

Without ajax filters autoloading:

PROS:

  • the initial page generation is faster. After the page is cached by a caching plugin this advantage is lost because the plugin will serve static HTML
  • smaller page size, in our measurements on a typical page will be smaller by 20-70kb when compressed via gzip. (Usually all servers should serve gzip content)

CONS:

  • our blocks use the WordPress provided endpoint for ajax operations admin-ajax. On each request this endpoints loads the full WordPress core and also the wp-admin core that is not used by our blocks
  • admin-ajax endpoint is usually not cached by 3rd party plugins and most CDNs avoid caching it because it’s also used by wp-admin.
GIF

With ajax filters auto loading

PROS:

  • after the initial page is rendered and it’s cached by the cacahing plugin, all the other users that click on the filters will not hit the server. All the content is already on the users browser and all the code runs there.
  • it should not slow down the rendering speed of content on mobiles. The block content for each subcategory is stored in javascript
  • it provides a better user experience, especially on the mega menu

CONS:

  • the initial page load is way slower, for example if it’s used on almost all blocks it can generate a 40% slower loading speed but once the page is cached by a full page caching plugin, the loading time will be as with any other static HTML page.
  • the page size is bigger
GIF

Where can I find it?

The preloading option is available on all blocks that feature an ajax filter and as on all the mega menus that have subcategory filters and it has the following three options:

  • no preloading – the theme will make an ajax request on each click on a filter. After the request is made the theme is using a browser cache to store the result and not make an aditional request for the same resurce until the page is reloaded.
  • optimized preloading – the theme tries to auto load the first filters
  • preload all – the theme will try to load all the filters

On each block that supports ajax filters:

ajax

As a global setting for mega menus:

ajax global