How I Converted my WordPress site to Astro

If you know my background, you know I’ve been breathing WordPress since 2008. I literally built ClockworkWP to provide high-performance hosting for WordPress sites, and I’ve sold thousands of hours of development time inside the WordPress ecosystem.

But recently, I’ve been obsessing over modern static site generators and the insane performance they unlock. When it came time to rebuild my personal site, I decided to drink the Kool-Aid and ditch my old WordPress setup entirely. The weapon of choice? Astro 5.0.

Moving to Astro was incredibly fun, but the real joy was the optimization chase.

Chasing the Perfect Score

With WordPress, optimizing performance often feels like a constant war against plugins, database queries, and heavy DOM elements. With Astro, by default you ship zero JavaScript to the client. The difference is night and day.

To really push this site to the absolute limit, I didn’t want any layout shifts or frontend latency. So, I exported all my legacy posts into Markdown files using Astro’s Content Collections, hooked up TailwindCSS v4, and globally statically generated everything into flat HTML.

Everything was blazing fast except for one thing: my YouTube videos.

The YouTube Bottleneck

If you embed a standard YouTube <iframe> on a page, you are forcing your users to download over 500kb of external JavaScript while simultaneously blocking the main thread. It destroys page speed tools.

To fix this, I implemented an Astro facade component (<lite-youtube>). Instead of loading an active player, the page only renders a highly optimized .webp thumbnail. The heavy video player only initializes after a user actually clicks play.

I also decoupled the API logic that pulls my latest videos into a static pre-build script, which runs seamlessly via a Vercel Deploy Hook everyday at midnight.

The Result: A 0.5 Second Load Time

The results of this architecture speak for themselves. According to GTMetrix, the site renders a First Contentful Paint in around 335ms. Fully loaded time? As you can see in the screenshot below, the entire site loads in just 0.5 seconds.

Getting perfect 100/A scores without having to rely on expensive caching proxies or heavy CDNs feels like a superpower. The Astro developer experience is phenomenal, and being able to write components inside .astro files feels like web development stripped down to its perfection.