Server side rendering in Koko Analytics version 1.4

Posted on by Danny van Kooten.

Last week we pushed out a new major version of Koko Analytics. At a first glance, it may appear as if not much has changed. Behind the scenes however, a lot actually has.

Inspired by Alex Russel’s yearly Performance Inequality Gap series we have been focusing more of our efforts in ensuring the Koko Analytics dashboard runs on as wide an array of devices as possible and not just on the latest iPhone or whatever luxury device us developers in the Western world usually have available.

Earlier this year that leads to us rewriting the dashboard to no longer use React and instead use a lower level virtual DOM library (specifically, snabbdom) directly. Our JavaScript bundle size shrunk from a whopping 280 kB to just 14 kB (after compression), but the bulk of the dashboard was still JavaScript powered.

The dashboard was server-side rendered during its first load, after which JavaScript took over and took care of browsing through date ranges without requiring a full page reload. This meant that certain code was duplicated on both the server (in PHP) and the client (in JavaScript), which wasn’t ideal in terms of maintenance.

SSR all the things

In version 1.4 we bit the bullet, turning the entire dashboard into an exclusively server-side rendered application.

This change comes with several pro’s and cons:

Pro’s:

  • All state can now be managed from the URL, so it can be bookmarked and navigated using your browser’s history more easily.
  • Server side rendering is way more efficient than waiting for JS to load, parse and then execute.
  • The JavaScript bundle shrank from 14 KB minzipped to just 1 KB for some minor progressive enhancement.
  • Any code related to rendering the interface is now exclusively in PHP, making it easier for us to maintain and extend.
  • It’s much easier to extend or modify HTML generation with WordPress’ action and filter hooks versus hooking into virtual DOM patching.

Con’s:

  • Navigating through the dashboard now requires a full page reload which may be slower than a JS API call + updating the DOM, depending on your set-up.

The being slow part can mostly be mitigated by using the standalone version of our dashboard, which ensures that nothing that isn’t needed for the dashboard is included in the page HTML.

To make for smoother page reloads, we opted into a new browser feature which is currently only available in Chrome, Edge and Opera: view transitions. This allows us to use a smooth animation for transitioning between pages, which makes it seem as if a full page reload is not actually happening.

This way faster devices still get a smooth experience that resembles a Single Page Application while the dashboard remains performant and usable on slower devices. Basically, reverting the default of a React powered dashboard that is really only fast on high-end devices. That’s a win in my book!

This is combined with storing the current scroll position unbeforeunload and then later restoring it once the page has loaded, a neat trick we learned from Wolfram Kriesing on Mastodon.

You can see it all in action in the video above (2 MB) or on our live demo dashboard here. Ensure you’re using Chrome, Edge or Opera if you want to see it with view transitions enabled.

Improved screen reader support

Years ago I received a mock-up design for what later became the Koko Analytics dashboard which used div-elements instead of actual tables for representing the tabular data that is the top pages or top referrers components.

It was recently pointed out to me that this is pretty bad for accessibility and something screen readers choke on. I knew this, but missed it at the time and never looked at this specific part again, for which I am sorry.

In version 1.4 we made several improvements which should make the dashboard more usable if you’re using it through a screen reader.

Help me improve accessibility for Koko Analytics

Finally, a call for help to the community.

If you’re using Koko Analytics with a screen reader or other accessibility software or simply have related experience, please get in touch. I would love your help in making Koko Analytics better.

Although Koko Analytics is pretty much still a labor of love at this point, I would happily reimburse you for your time.

Tags: , , , ,