What my site sends before it says hello

I like personal sites that feel cared for, with small choices that look intentional instead of random effects stacked on top of each other.

One small thing is what the browser downloads before the page feels ready.

Before anyone reads the homepage, the browser has already fetched HTML, CSS, fonts, images, scripts, and maybe some data. That first few seconds says a lot about the site.

So I looked at my own site with that in mind.

the page is more than HTML#

The homepage starts with HTML, but the browser quickly finds more work:

HTML
CSS
Google Fonts CSS
font files
favicons
profile image
theme script
header telemetry script
weather and GitHub data later

Some of this is needed. Some of it is taste. Some of it is just “I wanted the site to feel like mine”.

That is okay, but it should still be a choice.

fonts cost something#

The site loads Space Grotesk and JetBrains Mono from Google Fonts.

I like both. They fit the site.

But fonts are still network requests. display=swap helps, and preconnect helps, but the browser still has to leave my origin and fetch them.

Maybe that is worth it. I think it probably is for now.

But if the site ever starts feeling slow on mobile data, fonts are one of the first things I would check. Maybe self-host. Maybe reduce weights. Maybe use system fonts in some places.

I would hate for “I liked the font” to become an excuse for ignoring the cost.

early scripts should stay tiny#

The base layout has a theme bootstrap script in the head.

That makes sense. If it runs too late, the page can flash the wrong theme.

But head scripts run early, so they should be boring:

read stored theme
check system preference
set attribute
exit

It should avoid fetches, big work, and cleverness.

Early JS is like luggage on a bike ride. Carry only what you need.

the header does real work#

My header does more than navigation. It has time, status text, RPM, gear, music, and scroll telemetry.

That is part of the site identity, so I am fine with some JavaScript there.

But identity code still has to behave. It should avoid duplicate listeners, heavy DOM writes, ignored reduced-motion settings, and background work after the tab is hidden.

This is where small features slowly become maintenance work. At first it is “nice little header thing”. Later it is a small instrument panel and you have to treat it properly.

This is apparently normal behaviour for someone who keeps dragging vehicle metaphors into frontend work.

below the fold can wait#

The homepage has GitHub contributions, photos, experience, projects, latest posts, weather, and contact links.

Only some of that needs to be urgent.

Weather can use cached data. GitHub contributions can load after the page is usable. Photos below the fold should not fight the first viewport. External links should not be prefetched casually.

Astro helps here because most of the page can stay static. Client code can stay in the few places that need it.

That is the shape I like:

static first
interactive where useful
external data after paint

how I check it#

I start simple:

curl -I https://wthrajat.com
curl -s https://wthrajat.com | wc -c

Then DevTools:

disable cache
throttle network
reload
sort by start time
sort by size
look for surprises

The surprises are usually where the work is.

Why did this script load so early? Why is this image bigger than expected? Why are there so many font files? Why is a widget calling an API before the page is useful?

If the answer is “because I wanted it”, fine. If the answer is “oh lol”, fix it.

my current view#

A personal site can have personality while still respecting a budget.

Every early request should help show the page, set the visual style, prevent a bad flash, or support something visible right away.

Everything else can probably wait.

I am not chasing a perfect score here. I just want the site to feel immediate and intentional, even on average Wi-Fi.

Websites gain weight slowly. Bikes also start making weird sounds slowly. Then one day you hear chhan chhan in second gear and realize you ignored it for too long.