Het Orange Juice team heeft er weer een nieuw gezicht bij. Thijs heeft al enige ervaring als developer en is ontzettend...
Optimizing DomeinMagazijn.nl’s filter system14 december 2016
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.
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.
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.
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!
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.
Unfortunately using the method has a few downsides:
- Increased page size because of all the JSON.
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.
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.