How we keep hexerize.com fast on a phone

The people we build for mostly reach the web on a phone, often on mobile data, so we build hexerize.com for that first. We care about two things: the page should show up quickly, and it shouldn't jump around while it loads. Here's how the site is built to do both.

Pages that arrive ready-made

The site is an app that runs in your browser. An app like that usually sends an empty page and fills it in with JavaScript. That's fine once it's running, but it's slow to start, and search engines and link previews see the empty page.

So when we build the site, every page gets its own HTML file, with its own title, description and preview picture already in it. Blog posts get their full text. The page has its content from the first moment, before any JavaScript runs.

Pictures that load with the page

A picture that appears a second after the rest of the page makes the layout jump. It's a small thing that makes a site feel cheap. We had it on the About page, where the photo popped in after the text, and on the home page, where the app icons arrived late.

The browser usually finds a picture only after it has downloaded the page's code and started drawing. We tell it sooner. Each page's HTML lists its key pictures at the very top, with <link rel="preload">, and marks them as high priority. The home and app pages preload the app icons, the About page preloads its photo, and a blog post preloads its cover. The browser starts fetching them straight away, alongside everything else.

Pages that don't need those pictures don't preload them, so nobody downloads an image they won't see.

There's one more trick. Once a page has finished loading and the browser is idle, we quietly fetch the About page's photo in the background. If you go there next, it's already waiting.

Code that only downloads when it's needed

Not every visitor needs every part of the site. The blog's admin, for one, is only for our team. So the code is split into pieces, and each piece only downloads when someone goes to a page that uses it. Visitors never download the admin's code at all.

Pictures that are small to begin with

Blog pictures are resized before they're even uploaded: at most 1600 pixels wide, saved as WebP, which is much smaller than a phone photo. They're stored under names that never change, so browsers can keep them for a year. Your phone downloads a cover once.

A hero without a video

The home page opens on a moving, film-like gradient. It's drawn live in the browser rather than played from a video file, so there's no video for your phone to download before the home page looks right.

What we'd tell anyone building a site

• Look at your site on a phone, on mobile data. A fast laptop on good Wi-Fi hides almost everything.
• Put content in the HTML. Don't make the first view wait for JavaScript.
• Tell the browser about important pictures early. A single preload line can stop a layout jump.
• Ship less. The fastest code is code the visitor never downloads.