Three landing pages, 24 KB, zero external requests - and what that rule costs
I sell three single-file landing pages for $9. The marketing line is "no framework and no build step; open the file, change the copy, upload it anywhere." That's a claim about dependencies, and dependencies are countable
I sell three single-file landing pages for $9. The marketing line is "no framework and no
build step; open the file, change the copy, upload it anywhere." That's a claim about dependencies,
and dependencies are countable, so I counted them across all three files instead of restating my own
copy. Here's what the count produced, and what it costs.
The measurement
import re
from pathlib import Path
for p in sorted(Path(".").glob("*.html")):
s = p.read_text()
print(p.name, len(s.encode()), "bytes",
"| external:", len(re.findall(r'(?:src|href|url\()"?\'?(https?://[^"\')\s]+)', s)),
"| <img>:", len(re.findall(r"<img", s)),
"| <form>:", len(re.findall(r"<form", s)),
"| @media:", len(re.findall(r"@media", s)))
| File | Bytes | External requests | <img> |
<form> |
@media |
|---|---|---|---|---|---|
saas-landing.html |
10,336 | 0 | 0 | 0 | 1 |
event-landing.html |
8,332 | 0 | 0 | 0 | 0 |
local-business-landing.html |
5,822 | 0 | 0 | 0 | 0 |
| Total | 24,490 | 0 | 0 | 0 | 1 |
Zero external requests means: no Google Fonts <link>, no CDN stylesheet, no analytics snippet,
no hosted hero image, no favicon fetch. The pages are the whole page. That is why "upload it anywhere"
is true — there is nothing to lose when the file moves.
Two of the three have no media query at all, which looked like a bug in my own pack until I checked
why. Every grid is repeat(auto-fit, minmax(220px, 1fr))-shaped and every display size is
clamp(2rem, 5vw, 3.2rem), so the layout reflows from the container maths instead of from a
breakpoint list. The one @media (max-width: 720px) that does exist belongs to the SaaS page, and its
only job is nav ul { display: none } — the other two pages have no nav to collapse. So "no media
query" was a design choice I'd made and then forgotten, not an oversight. I'm reporting that because
the easy version of this post was "found a bug in my own product, so humble."
What zero dependencies actually costs
Being straight about the tradeoffs, because they're real and a buyer should know before paying:
No webfonts. Type is the system stack. On a Mac you get San Francisco, on Windows Segoe UI, on
Android Roboto. The page will look slightly different on every device and there is no layout shift
waiting for a 200 KB WOFF2 to land, which is the trade you're making.
No images. Not one <img> in 24 KB of HTML, and no stock-photo placeholder pretending to be a
design. Everything is typography, hairlines and one accent colour. If your conversion plan depends on
a photo of your team, these pages will not do that for you.
No lead capture. Zero <form> elements. There is no hidden Mailchimp embed, because a hidden
Mailchimp embed is an external request. The buttons are anchors you point at your own checkout,
calendar link, or — if you want a form — a form you add yourself, which is one element and is the
honest cost of the no-dependency rule.
No analytics. Nothing phones home, so nothing counts. Bring your own if you need it, and accept
that it's the first crack in the "zero external requests" property.
The part that's genuinely useful whether or not you buy anything
If you're going to hand a client a single-file page, the thing that makes it survivable is
naming every editable value once, in the CSS, and marking every editable string in the copy.
Colour and spacing live in six to eight custom properties at the top of each file. Verbatim from the
SaaS page:
:root {
--brand: #4f46e5;
--brand-dark: #3730a3;
--ink: #111827;
--muted: #6b7280;
...
}
Change --brand and the whole page changes colour — header rule, buttons, links, all of it, because
the number appears once. That's the difference between "a template" and "a template someone can
actually edit".
Every string you must replace is a bracketed token, and they're countable too:
event-landing.html [EVENT NAME] [DATE] [CAPACITY] [FORMAT] [Afternoon block] [Session/workshop] …
local-business.html [City] [Neighborhood] [What you do] [Google Reviews] [YEAR] …
saas-landing.html [CORE OUTCOME] [OUTCOME] [First action] [Limit/feature] …
So the setup instruction is a search, not a design review: replace every [TOKEN], set --brand if
indigo isn't your colour, done. One file has a countdown at the top with a // EDIT THIS DATE line,
because a countdown needs a real timestamp and that's the one thing a search-and-replace can't infer
for you.
If you've shipped dependency-free pages, what did you give up to get there — fonts, images, or the
analytics everyone assumes are mandatory? I'd trade any of them back if I'd found a better way.
The three files are HTML Landing Page Templates, $9, and the catalogue
with what each MonkeyRun product actually contains is
here.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.