Optimizing DomeinMagazijn.nl's filter system

14 december 2016 Development

We saw an opportunity to improve the filter system of DomeinMagazijn.nl's domain overview page. On the overview page of Domein Magazijn when you clicked a letter or category the page would refresh, taking you to a new page with the filtered content. If you wanted to change your filter you would click again, then be taken to yet another new page. This process of filtering was extremely slow, it would take around 4-6 seconds just to get your new results.

A better approach

We knew this could be much better, our target was to get the filtered results to show in. Obviously you can't load a new page and reliably get the results to appear in under 1 second, too many factors are against you. So, we looked at a client side solution.

History API

A really important part of this site is SEO friendly URLs, luckily the HTML5 history api is widely supported, this made the challenge a lot easier for us to tackle. Every time a user clicks a filter we could just push a new state to the browsers history, this keeps the same behavior which we loved before, but without a page refresh.

Content rendering

Before, all the data on the page was rendered from the server onto the page making it impossible to filter client side because we would never have all the data. Now when the page loads we ask the server to give us all the data as JSON, from there we read the URL of the page, set the active filters then go through all the JSON and render just what we want.

Faster errors

Before when a filter didn't have any results you'd have to wait for the page to load before you saw the error message. But now if you encounter a page with no results you can just change the filter and get new results instantly, no worries!

Smoother transitions

Another advantage of filtering client side is animation. When you click a new filter, we can fade the existing results, update them, then fade in the new stuff. It's visually smoother and a much nicer experience for the end user.

Downsides

Unfortunately using the method has a few downsides:

We have to wait for the Javascript before we can show content.
Increased page size because of all the JSON.

Upsides

Fortunately using this method has a a lot more upsides:

We can manipulate the URL of the page client side.
Changing a filter is smoother with animations.
Changing a filter takes
We can catch mistakes in the URL and show alternate content.
We can show friendly error messages and make suggestions.

Future improvements

This is just V1 of the 'new solution', but there is still so much we could do to improve the page further.

Client side searching.
Smarter errors with suggestions or 'frequently viewed'.
Ajax calls to the server for data to reduce initial page load.
Disabling filters when there are no results for a combination of filters.