One primary goal of web developers and designers is to build fast, usable websites. But what about when they load too fast? Well, how can it load too fast? That’s a fallacy, right? Here’s how an artificial delay can improve UX.

Static site generators

When we were tasked with deploying a new website for Netwise, we opted to use Jigsaw (a static site generator) to bring all of the components together. By using a static site generator, the web server just delivers the flat HTML file to the user to begin the page rendering. The server doesn’t need to run any preprocessing on the site, such as PHP includes or MySQL queries.

A static site generator still allows you to use includes for headers, footers and CTA (call to action) buttons. It just generates them once and outputs flat HTML files for you to host on a server (or maybe not…). HTML is generated when you use PHP to generate your site anyway. There’s usually no need to run it for every user when it results in the same page every time.

Dynamic content

One common misconception with websites built with static site generators is that the pages cannot be dynamic or interactive. While the HTML served from the server is static, that doesn’t mean the page has to be.

Netwise’s new website had staff photo call outs which needed to be randomised on each page load. If we did this in Jigsaw, it would have meant that a staff member would be fixed to a page at the time the HTML is generated. That wouldn’t quite do in this case, the staff photo needed to change on each page load.

JavaScript to the rescue

Long gone are the days of sites requiring huge, bloated libraries to change the colour of a rectangle. Modern JavaScript can do a whole lot more without writing line after line of selector code. With modern JavaScript we can show a random staff photo on a website so fast it doesn’t even look like it was done on the client side.

What actually happens is that all of the staff photos are sent to the client’s browser, but hidden. The JavaScript is then picking a random item and changing its CSS display property from none to block. It’s visible before the client even realises what’s happened, and there’s no FOUC (flash of unstyled content).

When fast isn’t what you want

Everyone wants the fastest website they can get, but sometimes it can seem too good to be true. In some cases, an artificial delay can actually improve UX. Especially when the page is claiming to report live data relating to the status of the company’s systems. When that sort of thing loads instantly, people tend not to believe it’s actually live. This can result in it being untruthful or not trustworthy.

Illusions with live data on a static site

The Netwise status page reports the live state of their internal and public facing systems. We again employed JavaScript to call back to a microservice we’d built to check the state of these services The trouble was, it was all too fast. The loading icons had barely loaded before they vanished!

The almost instant load time of the page, followed by several green “Online” messages immediately after, just didn’t look real. Customers would just think Netwise are saying “everything is great” and not actually checking in real time. Because many websites actually do that, you can’t blame customers for suspecting it.

A random delay

To solve the problem, we introduced a random time delay in the microservice which checks the services, giving each service has a different delay. This means each delay is unique to its neighbour in the list. It enforces to the user that the status page is actually checking in real time, building trust with Netwise’s customers.

It’s the same if you ask a shop assistant to check if an item is in stock, only to be told “No, out of stock” immediately, rather than them going into the store room to check. Even if they know it’s out of stock, you feel like time was spent looking into your request.

The end result is a blazing fast website and a genuine live status page which feels as real as it actually is.

Categorised in: Uncategorised & tagged with: cloudflare, fast, javascript, jquery, js, php, static site, status page, ux