At farbenmeer, we recently had a rebranding that involved a complete rewrite of our website featuring a major design overhaul as well as lots of new content. We considered this a chance to get our website up to date with the latest stack and also to evaluate a bunch of new tools before we recommend them to our customers. I have been leading the technical setup, architecture and a large part of the implementation for this project for most of the past year.
Since our soft launch we’ve been asked by several people how we made our website feel so “snappy”. So here it is:
Introduction
There is no magic trick behind the website’s performance. It is the result of considerable technical effort by a whole bunch of very experienced frontend engineers. If you want your own website to feel like this, contact us!
Stack
The website is based on Next.js with tailwind CSS (augmented with CSS Modules) for styling. All content is stored in Dato CMS and we use Plausible Analytics to get minimal statistics about website usage without tracking users or degrading performance but none of these choices is essential for the way the page feels snappy.
Aside from the very basic technical choices, we have placed great emphasis on introducing only necessary dependencies, and especially on making the runtime JavaScript bundles we provide as small as possible.
First page load
To render content as quickly as possible, we use Next.js’ static optimization features to fetch most of the data and render most of the pages to static HTML at build time. These assets are delivered via the Vercel CDN so that they reach our users as quickly as possible.
Our website is rich in assets and most assets are hand drawn sketches. These scribbles are all provided as SVGs and are pre-optimized with SVGO and in some cases manually optimized right in the markup.
We use Next.js‘ integrated image optimization to serve all other image assets with the best possible compression and smallest possible dimensions for each device and viewport.
Font loading ist optimized to only load relevant glyph sets for our wonderful CI font Aeonik.
And then there‘s the curtain.
The curtain is actually a design feature that has a dramatic effect when falling, but it also serves another purpose:
Because the curtain SVG is inlined and is one of the first elements on the page, browsers can render a blank solid page almost instantly. The page remains blank while the rest of the first viewport is loading in the background, and the curtain falls once the client-side bundle is hydrated, leaving you with a finished, fully rendered, and interactive page after the effect. This bridges the visually disruptive phase of showing an incomplete page when loading assets, and makes the loading process feel fast without showing a loading spinner.
Subsequent page loads
The navigation within our site is done via the client-side navigation of Next.js. This means that instead of rendering a complete html page, we only load the necessary data and some JavaScript on each page load.
This is the kind of complexity that a lot of people complain about or scoff at lately, but it makes page transitions feel buttery smooth. Of course, client-side navigation doesn't help at all if the page depends on a slow backend or heavy assets, so this only works in combination with all other optimizations to reduce overall bundle size.
Custom code versus flexible content
Any team working on a website must strike a balance between flexibility in editing content and the ability to develop specialized, responsive, and optimized components. For us as a development agency, the sweet spot is clearly more on the technical side. By providing relatively static content, a relatively small site, and detail-oriented design, it was relatively clear where to focus.