How this site is built

people asked me for a site like this one after seeing it

Problem: Text appeared only after 210 KB of scripts, and on a slow network the whole first screen jumped when the fonts arrived.
Solution: Built a static site with no framework, matched the fallback fonts to the real ones and moved the heavy animation to background threads.
Result: The text shows at once; the page doesn’t jump while it loads — from “poor” on Google’s scale to “good” — and doesn’t stutter, even on a slow phone.

Below are the six problems that had to be solved for that, with measurements before and after. The technical details are under “How it was done”.

Built by one person working with Claude Code, like the Roton store: I own the architecture and sign-⁠off. More than 80 changes, and every speed change comes with a before-⁠and-⁠after measurement — the same way I work with clients.

The text shows at once, with no wait for scripts

A visitor sees the page as soon as it arrives instead of waiting for code to download, which shows on a slow mobile connection. Search crawlers and AI assistants get all the text at once too, even if they don’t run scripts.

How it was donecollapse

The prototype from the design handoff rendered the page with React and its own runtime: the first frame was blank, and both languages lived at one address. Now the build puts all the markup into the HTML, one page per language. Scripts load after it and only bring the page to life: without JavaScript it reads in full.

from 210 to 0 KB

scripts that had to download before any text showed

The page holds still while it loads

While the fonts arrive, the text doesn’t jump, so a visitor doesn’t miss a button. Google counts these shifts when it rates a page: on its scale this went from “poor” to “good”.

How it was donecollapse

On a slow network the heading first came in a system font 44% wider than it should be, and when the real one arrived the whole first screen jumped. The typing caret in the heading moved the page even more. The caret no longer takes space in the line, and the system fonts are fitted to the real ones: width to the longest line of the slogan, line height to the font metrics.

Measured: layout shift (CLS) on a first visit, fonts held back 1.5 s; English version, desktop.

from 0.57 to 0.0007

how much the page jumps on a first visit; Google rates up to 0.1 as “good” and over 0.25 as “poor”

The portrait animation doesn’t slow the page

The portrait made of characters keeps its “rain” without taking time from the page: scrolling and taps respond at once, even on a slow phone.

How it was donecollapse

The drops on the ASCII portrait rewrote its lines every frame, and the loop behind the tab boards kept running off screen. Now a background thread draws the drops on its own canvases, and the boards stop while nobody can see them.

Measured: main-⁠thread work, ms per second, with the portrait on screen; desktop.

from 385–⁠807 to 9 milliseconds per second

milliseconds of every second the browser spent on the portrait; on a phone slowed down four times: 946–⁠996 before, 18 now

The globe in the contact section doesn’t hold up taps

The spinning globe of words next to the contact button doesn’t take the browser’s time: taps and scrolling don’t wait in line, even on a slow phone, and the globe itself turns more smoothly.

How it was donecollapse

A globe frame is 2,300 letters, and on the main thread it took the thread whole: taps and scrolling waited in line. Now a worker draws the frames from copies of letters in an atlas, and the letters are sorted by depth into 128 steps in one pass instead of a full sort.

Measured: globe frames per second on a phone with a 4× CPU slowdown; long tasks in 5 s: 47 before, 0 now.

from 6–⁠9 to 18 frames per second

globe frames per second on a phone slowed down four times; hitches over 50 ms in 5 seconds: 47 before, 0 now

The page responds sooner while it loads

The browser doesn’t spend time on sections the visitor hasn’t scrolled to yet, so on a slow phone the page answers taps almost as soon as it opens.

How it was donecollapse

While a section is far away, the browser does not lay it out (content-⁠visibility), and each font that arrives re-⁠lays only what is visible. The work does not vanish, it moves to scrolling: a section is laid out in advance, once it is a screen and a half away. In Safari and when the scroll position is restored the rule is off: there it missed anchors and the reader’s place on the page.

Measured: main-⁠thread blocking before load, Russian version; English version: 205 before, 0 now.

from 666 to 50 milliseconds

milliseconds the page didn’t respond to taps while loading; a phone slowed down four times, slow 4G

The page downloads nothing extra

Fonts are served from this site and download only the pieces the page needs: on mobile data that means less waiting and less traffic.

How it was donecollapse

Fonts are served from this domain, split by character ranges, with a content hash in the file name. Google puts the ₽ sign in extended Latin, so the Russian page downloaded 83 KB of font for one character; now it has a file of its own. The @font-⁠face rules sit in the page itself: a separate request for them held the first paint back by one more round trip.

from 83 to 1.2 KB

font downloaded for one ₽ sign on the Russian page

Also

The site doesn’t depend on anyone else’s servers: no CDN, no analytics, no third-⁠party fonts, so an outside service can’t slow the page down or break it. The content security policy (CSP) lets in only this site.
Return visits are faster: scripts and images stay in the browser cache for a year and refresh by themselves as soon as they change. The build stops by itself if a page falls behind the scripts.
On 120 and 144 Hz screens the animations run at the same speed as on ordinary ones, not 2–⁠2.4 times faster.
Someone who read the site in Russian lands on the Russian version next time, and the English page is never even downloaded.
The site reads without JavaScript, and nothing moves for people who turned animation off in their system. The tabs work from the keyboard.

Need a site this fast? Describe the task and I’ll suggest where to start.

Message me on Telegram