In-Browser filtering

The FiboFilters plugin was built to be significantly faster than the competition. This is achieved in part by eliminating client-server communication during filtering. The whole filtering process and calculating the counters takes place on the browser side. This reduces the server response time – up to 2 seconds – to zero. From the user perspective, the filtering is instant. We’re proud to have eliminated one of the main pain points for e-commerce customers.

The customer perspective
Lifetime of JSON with descriptors

The customer perspective

To work properly, FiboFilters needs a properly built filtering index.

Loading descriptors on customers’ first visit

On the customer’s first visit to your store, a server request is sent to download all data necessary for the filtering process (this is the only case where this action is necessary). This index we call “descriptors”.
Descriptors are stored in the file:

/wp-content/uploads/fibofilters/filters-descriptors-{$indext_build_id}.json

For example, a descriptor for 10000 products and 10 filters can weigh around 155kB, assuming it’s gzipped. This is roughly an equivalent of a few images.
Descriptors are stored in the cache storage – the customer downloads them and uses them as long as the index isn’t rebuilt. Please review our article for more information on when the index will be rebuilt
Descriptors are modified dynamically when the product data has been changed, for example, stock status or a product category. The cache will be fully refreshed only after the whole index is rebuilt.

Optimizing descriptor loading

FiboFilters includes an optimization designed to improve performance for smaller stores – specifically, those with a descriptor size of 50 kB or less.

Whenever a product changes (for example, its price or name), FiboFilters updates the corresponding descriptors in the database. On the front end, the browser cache stores a copy of these descriptors. When products change, FiboFilters sends an AJAX request to the server to fetch only the differences (i.e., which products were edited) and updates the cached descriptors in the browser accordingly.

This differential update mechanism can become inefficient when a store experiences high traffic and frequent product updates. In such cases, the server may become overloaded because every AJAX request requires initializing WordPress – even if only a few bytes of data need to be fetched.

To address this, FiboFilters automatically switches to a lightweight update mechanism for small descriptors. Instead of sending multiple AJAX requests, it simply downloads the entire JSON descriptor file whenever a product update occurs. Because serving a static JSON file does not require initializing WordPress, this approach is significantly more resource-efficient.

Note:
This optimization is only applied when the descriptor file size is ≤ 50 kB.

Disabling the optimization

If you prefer not to use this feature, you can disable it with the following hook:

add_filter( 'fibofilters/config/refetch_descriptors_after_update', fn() => false, 15 );

ⓘLearn how to add this snippet to your WordPress.

This will revert FiboFilters to using AJAX requests for descriptor updates, regardless of the descriptor size.

Filtering (after the filter state changes)

What is considered a filter state change? A filter state change occurs every time customers make a choice. For example, they select a “yellow color” T-shirt – this is considered the first change of state. Then, they also select a “yellow color” + “XL size” – the state changes again, and so on.

Product ID’s matching the filtering query are calculated.
Information about selected filters, also known as applied filters, is displayed.
The filter status is refreshed and the counters are recalculated.

Product rendering

The HTML product templates that haven’t been displayed yet are downloaded with the AJAX request.
The products are rendered.
Other elements, such as pagination, .woocommerce-no-products-found or .woocommerce-result-count are overwritten.

We described the product rendering process in detail in our article “Products loading and rendering”.

Key benefits of in-browser filtering

Many times faster filtering compared to the client-server approach.
High store traffic doesn’t affect filter performance.

Lifetime of JSON with descriptors

After each index rebuild, a new JSON file is created. It contains all of the descriptors. The old JSON files are stored for 2 days. Then, FiboFilters removes them automatically.

The link to the descriptors is displayed in the <head> section of the page’s HTML, so it can be cached. If the cache lasts longer than 48 hours, use the snippet below to extend the storage time of old JSON files to 5 days:

add_filter( 'fibofilters/indexer/descriptors_cache/expiration_time', function () {
    return 5 * DAY_IN_SECONDS;
} );