Ajax Search Pro Documentation
Get Ajax Search Pro!Get SupportKnowledge BaseDevelopment
  • Ajax Search Pro Documentation
  • GDPR and Cookie policy
  • Video Guides
  • Plugin Updates
    • Automatic Updates
      • Activation on Development and Staging environments
      • Managing purchase codes
      • Purchase Code (license key)
    • Manual Updates
    • Safe Update Guide
    • Plugin update issues or errors
    • Disabling update check
  • Installation instructions
    • Uninstallation & Reset
  • Getting started
    • Importing from the Lite version
    • Editor Blocks
    • Search Shortcodes
    • Search Widget
    • Gutenberg and Other Page Editors
    • Replacing the default theme search bar
    • Placing the search shortcode in theme files
    • Search as menu item
    • Custom result box position
    • Custom filters box position
    • Shortcode generator
  • Search Sources
    • Search Engine
    • Post, Page, Product and other Post Type Search
    • Searching Titles, Content, Excerpt
    • Search in custom fields
      • Search By Product SKU
    • Search by categories, tags or other terms
    • Search in Attachments
      • Mime types table
    • Search in File contents (pdf, word, excel etc..)
    • Search in Users
      • User meta fields
    • Limits (number of results)
    • Categories and terms as results
    • Image options
    • Result ordering
    • Peepso Groups & Group activities search
    • Grouping title duplicates
  • Behavior
    • Return/Enter key and Magnifier icon click actions
    • Search logic (primary and secondary)
      • Exact Matches vs Fuzzy Matches
      • Search logics explained
    • Live search triggering events
    • Results page override
    • Results, Archive Page and Shop Live Search and Filter
  • Elementor Integration
    • Elementor Pro Posts Widget Live Filter
    • Elementor Loop Grid Integration
    • Elementor Pro Product Widget Live Filter
    • Custom results page with Elementor Pro
    • Elementor custom search page archive override and live filter
  • Other Integration
    • Jet Engine Listing Grid Integration
  • Multisite Settings
  • Frontend Search Settings & Search Filters
    • Settings layout, position and visibility
    • Generic Selectors
    • Content Type filters
    • Date filters
    • Category and Taxponomy term filters
    • Post type Filters
    • Custom field filters - selectors
    • Search button
    • Reset button
  • Layout Settings
    • Result Layout Types
    • Results information box
    • Results position & snap
    • Content, author, date and description in results
    • More results loader and infinite scroll feature
    • Results behavior
    • Results text keyword highlighter
    • Compact search box layout
    • Auto Populate - Automatic search results on initial page load
  • Autocomplete and Keyword suggestions
    • Autocomplete
    • Results and Keyword suggestions
    • "Try these" - suggested phrases
  • Theme Options - Visual changes to the search bar
    • Theme chooser
    • Preview
    • Search box and input field layout
    • Settings and Magnifier icon
    • Settings dropdown
    • Typography
  • Index Table
    • Generating the index table
    • Enabling index table engine
    • File Content Search Addon
    • Index table FAQ
    • Synonyms
  • Relevance Options
  • Advanced Options and Uses
    • Using the Results shortcode as a custom results page
    • Shortcodes in results content
    • HTML tags in results
    • Primary and Secondary title and description fields
    • Advanced title and Content fields
      • User Search - Advanced Title and Content fields
    • Excluding & Including results
      • Exclude by category or terms
      • Exclude or Include by authors (users)
      • Exclude or Include by date
      • Exclude by Item or ID
      • Include by ID
      • Include by categories or terms (restrict to category)
      • Exclude or Include by custom field values
    • Grouping results
    • Keyword Exception & Exclusions
  • Result priority settings
    • Individual Priorities
    • Priorities by Rules (priority groups)
  • Performance Tuning
    • Fine tuning the search configuration
    • Cache
    • Visual performance
    • Ajax performance tracker
  • Compatibility Settings
    • Javascript Compatibility
  • Google Analytics Integration (GA4)
    • Tracking with Google Site Tag (gtag.js)
    • Tracking with Google Tag Manager
    • Site Search Tracking
  • Troubleshooting
    • Styling issues
    • The response data is missing from the ajax request error message
  • Translating components
    • Translating with WPML
    • Translating with Polylang
  • Pre-Purchase FAQ
  • Plugin API
    • Actions list and usage
    • Filters list and usage
    • asp_query_args filter
    • Theme functions
    • Front-end filters API
    • Javascript API
  • Other Useful Things
    • Additional search keywords for post types
    • Negative keywords
    • Meta box on post editor screen
Powered by GitBook
On this page
  • 1. Animation options
  • 2. JavaScript source and location
  • Javascript Source
  • Javascript in footer
  • Turn off unused scripts
  • 3. CSS compatibility and loading
  • CSS compatibility level option
  • Force inline styles option
  • Load CSS files conditionally option
  1. Performance Tuning

Visual performance

PreviousCacheNextAjax performance tracker

Last updated 7 years ago

Visual (front-end) performance can be just as important as search speed. Controlling animations, Javacript files and stylesheets can greatly improve your overall site performance. The plugin offers lots of tweaks to optimize visual performance to your need.

1. Animation options

Advanced Options -> Animations

On the Advanced Options -> Animations panel you can control both Desktop and Mobile device animations separately. Adjust the Settings drop-down, Results drop-down and Result items animations to your needs.

Desktop browsers usually have great performance, so they should be able to handle animations well. If your site already has lots of animations (slider plugins, other visual elements), then you should consider turning the animations on this settings page.

Also, please note, that mobile browsers and devices vary greatly in performance, so choosing no animation is usually the best idea.

2. JavaScript source and location

Compatibility Settings submenu -> CSS and JS compatibility panel

Javascript Source

By default the plugin runs in the highest javascript compatibility mode. By adjusting the Javascript Source option you can achieve faster page load times. The best choice is the Minified, but after switching, make sure you that the plugin works on the back-end normally. In case of issues, switch back to the Minified-Scoped default.

Possible choices and explanations:

  • Non minified - Low Compatibility, Medium space

  • Minified - Low Compatibility, Low space

  • Non minified Scoped - High Compatibility, High space

  • Minified Scoped - High Compatibility, Medium space

Javascript in footer

By default the Load scripts in footer option is turned ON and I recommend leaving it that way. If the scripts are loaded in the footer, they won't block the site rendering process = faster page loads.

Turn off unused scripts

Compatibility Settings submenu -> CSS and JS loading

By default the plugin loads every script to give as much freedom to you as possible. In most cases however you won't use some of the functions the plugin offers. In this case you can turn off some of the scripts to have more performance.

  • Are you using the Isotopic layout? If not, turn off the Load the isotope JS option.

  • Are you using the Polaroid layout? If not, turn off the Load the polaroid gallery JS option.

  • Are you using Custom Field filters and sliding bars? (probably not) If not, then turn off the Load the NoUI slider JS option.

3. CSS compatibility and loading

Compatibility Settings submenu -> CSS and JS compatibility panel

CSS compatibility level option

This option was mainly designed because of the popular themes aggressive style sheets. Unless you are having issues, I recommend leaving it on Medium. You can try Low as well, and if the layout of the plugin does not break or change, then it works.

If you are having issues with the layout try the High value. It will try to override the most agressive CSS rules as well.

Possible values:

  • Maximum - Highy compatibility, big size

  • Medium - Medium compatibility, medium size

  • Low - Low compabibility, small size

Force inline styles option

This options should be turned OFF by default. If it's turned on, then the plugin could not create/write the CSS files neccessary. Make sure that the permissions are set correctly on the

  • wp-content/uploads/asp_upload/

directory on your server. The permissions should be 775 or 755.

Turn this option ON if you experience issues with the plugin styling or layout.

Load CSS files conditionally option

This is a huge performance saver. It won't put the CSS files into the site header, but instead load them with a javascript code after the page is rendered.

I recommend this option to sites having lots of search instances created or having lots of other CSS files loaded.

Pros:

  • Only loads the files for the search instances on the actual page. If there is no search on the page, no stylesheet is loaded.

  • Greatly affects the site load performance, as the CSS files are loaded asynchronously on page load.

Cons:

Because the stylesheets are loaded later, the search bars are not visible initially (to avoid phenomenon)

Flash of Unstyled Content