lernerworks.com

The situation

A freelancer's website has one job: make a stranger comfortable enough to book a call. The first version of this site tried to do that with a headline, a "what a quiet phone costs you" calculator and a pricing table, and pushed the actual work to a secondary page.

Looked at the way I'd look at a client's site, it had four problems. The proof was hidden: the case studies were the strongest thing on the site and they were three clicks away. A placeholder card reading "PROJECT NAME" was live on the homepage. The calculator asked visitors to guess their own numbers and reported a made-up figure back to them, which is the opposite of credible. And on a phone, the navigation simply hid most of its links rather than offering a menu.

The problem in one sentence: the site asserted that I was careful and measurable, but didn't show it.

Constraints

No invented proof. No testimonials I chose myself, no client counts, no logo wall. Independent concept work had to be labelled as such everywhere it appears. If a number couldn't be measured, it couldn't go on the page.

No third-party requests. No analytics script, no font service, no embedded booking widget, no chat bubble. A visitor's browser talks to this site and nothing else. That is a privacy position, but it is also most of what makes the pages fast.

No build step. Plain HTML and one stylesheet, so any page can be edited in a text editor and the site can be hosted anywhere for nothing. The dev tooling that exists (link-preview rendering, image re-encoding, measurement) runs on demand and ships nothing to the visitor.

What I built

A structure that leads with terms and proof. The homepage opens with the headline beside the five terms of working together: fixed price in writing, ownership of everything, one person, a refundable first design, and a reply within a business day. The three case studies come next, before the services or the prices. Work, Services, About and Contact each got their own page, so the home page could stop trying to be all of them.

One case-study template, the same six questions every time. Situation, constraints, what I built, decisions and tradeoffs, result, where it stands. Each study opens with a facts panel (client, sector, scope, year, status) and an "at a glance" strip that is limited to things that can be counted. A badge on every study says what kind of work it is: client project, independent concept, or this site.

Type that is served from here. Source Serif 4 for headings and Public Sans for everything else, both variable fonts, both self-hosted. Only the Latin subsets are shipped, and the browser fetches the extended-Latin file only if a page actually contains one of those characters. English copy costs 76 KB of font, once; every page after the first reads it from cache.

Images that reserve their own space. Every image carries its real pixel dimensions, written by a small script that reads the files rather than trusting what was typed. That is what stops the page jumping as pictures arrive. Screenshots are re-encoded with the bundled browser rather than an image suite, and the cards use 800-pixel thumbnails instead of the full lead image.

The groundwork search engines look for. One h1 per page and no skipped heading levels. Canonical URLs, a sitemap that matches them character for character, and structured data describing the business. Link-preview cards for social platforms are generated from the site's own type and colour, so a shared link looks like the page it points to.

Decisions and tradeoffs

No analytics on my own site. I set up call and form tracking for clients because their enquiries are the score, and I recommend it. Here, the score is whether the call gets booked, and the booking calendar already tells me that. So there is no analytics script, and the cost is that I don't know how many people read this page. I've decided that is a fair trade for a site that makes no requests I'd have to explain in a privacy policy.

The calculator went. It was the most interactive thing on the site, and it produced a number nobody could check. Removing it also removed the only JavaScript on the site. The pricing table, which shows real numbers a visitor can act on, stayed and moved up.

Prices posted, in full. Most freelancers don't, on the grounds that it invites comparison. It does, and that is the point: a visitor who has read the prices and still books a call is a much better call.

No content management system. I am the only person who edits this site, so a CMS would be machinery to maintain for no one's benefit. For a client who needs to change their own text and photos, I make the opposite call, and the services page says so.

A case study about the site itself. I'd rather have a real study than a "coming soon" card. This one has the advantage that every decision can be shown, and every claim can be checked by reading the page you're on.

Result

Measured in headless Chromium at a 1,600-pixel viewport with an empty cache, using the script kept in the repository, after the rebuild. "Requests" is everything the page fetches; "external" is any request to a domain other than this one.

Before the rebuild, the home page was 803 KB and the H&M study was 2.9 MB, almost all of it screenshots saved as PNG. Re-encoding them as JPEG and using thumbnails on the cards cut the home page by more than half and the H&M page by four fifths, with no change to what a reader sees.

What is not measured here: PageSpeed scores, because they need a public URL and a moment in time, and real-visitor timings, because there is no analytics. When I quote a PageSpeed figure elsewhere on this site, it is from a dated screenshot.

Where it stands

Live, and re-measured after every change with the same script, so the table above can be regenerated rather than trusted. The next change to this site will be a client case study replacing one of the independent pieces, once a client project wraps and the client has approved what's published.