Websites are Not Print: Pay Attention to the Movement.

The front-end of a website is, naturally, the part that visitors see. The branding, images, illustration, typefaces, overall layout. That these visual aspects are crucial is a given. Every touchpoint of the brand needs to be consistent, and deliver the correct message and tone.

But website pages are delivered across networks, to a variety of devices on networks of different speeds. A page might be beautiful, but if it takes five seconds to load, with all sorts of funky stuff going on in the meantime (90s-style progressive-image reveals, pages jumping around as bits get loaded in, FOUC) this disrupts the experience. It reflects on the brand and the perceived usability. It has been shown to dramatically affect engagement. After three seconds of loading, up to 50% of users will abandon your site. It also contributes to search-engine ranking!

There are a number of strategies to improve performance. Here is an overview of just a few of them.

Content optimisation

Reducing image or video file size means less data to download. This can often be achieved without significant trade-off with quality. We take care to optimise any images, icons, fonts, that are part of the design. Steps can also be taken to auto-optimise images that are dynamically added by clients using a Content Management System.

Other asset optimisation

Style and script files can be large and many. These can be ‘minified’ , compressed, and combined to reduce the time required to fetch them. They can also be served from dedicated services like Content Delivery Networks (CDNs).

Perceived performance

Browsers do lots of things in the background to build a web-page. We’ve all seen pages that seem incomplete while the images load, and things moving around until it settles. This can be minimised with care taken for the order in which things are loaded. We aim to reduce the ‘time to interactivity’, or ‘above-the-fold’ loading. Also things like loading-progress icons, or subtle page-transitions.

Server-side optimisation

Serving dynamic pages from a Content Management System like WordPress or Drupal typically requires the server to ‘build’ the page server-side before it can be sent to the browser. Techniques like caching semi-static pages can reduce server load and improve performance.

Asset and script caching

Visitors that are returning, or visiting multiple pages, will naturally load some of the same assets, such as the logo, fonts, header images. These can be stored in the user’s browser for a set time, to reduce repeatedly fetching them.

Prefetch, preload

When we are confident what page a user will visit next, we can now tell the browser to preload the assets on that page, so that they are ready on click.

Network

Servers that are fast and geographically close to users will serve webpages faster.

Be sure your web developers take care with these critical, often overlooked aspects of designing websites. We do.